entity.scss

// Import custom Bootstrap variables
@import 'bootstrap-variables';

// Then import Bootstrap with the global defaults so that changes cascade
@import 'bootstrap';


// FontAwesome
$fa-font-path: '/fonts/font-awesome';
@import 'font-awesome/scss/font-awesome';


@import 'compass/css3/border-radius';

@mixin round-corners($radius, $adjust-top: 0) {
    &:first-child {
        @include border-radius(($radius + $adjust-top) 0 0 $radius);
    }

    &:last-child {
        @include border-radius(0 ($radius + $adjust-top) $radius 0);
    }
}


// datatables
// @import './table/datatables';

// native
@import './table/native';

// derby-entities-lib - in here for the Api.render() functions (used by dataTables) since they don't add CSS,
// only using the components adds CSS automatically.
@import 'derby-entities-lib/types/color';
@import 'derby-entities-lib/types/image';



.animate-selection td {
    @include round-corners($border-radius-base);

    transition-property: all;
    transition-duration: .5s;
    transition-delay: .3s;
}

.popover {
    max-width: none;
    white-space: nowrap;

    ul {
        padding-left: 16px;
    }
}


span.highlight {
  //background-color: $brand-info;
  background-color: $brand-aux-1-med-light;
}

table.table-condensed {
    background-color: #fcf8e3;

    > thead {
        > tr > th {
            @include round-corners($border-radius-base);
            border: 0;
            background-color: $brand-primary;
        }
    }


    > tbody {

        // table borders
        > tr {
            > td {
                border-top: 1px dotted $brand-primary-light;        // TODO: try opacify() with solid/double
                border-bottom: 1px dotted $brand-primary;
            }

            &:last-child > td {
                border-bottom-style: solid;
            }
        }

        > tr:not(.child) {
            // cursor
            > td:not(.actions):not(#{$empty-table}):not(.control) {
                cursor: pointer;
            }

            // hover, selected, and round borders

            &:hover,
            &.selected {
                > td:not(#{$empty-table}) {
                    @supports (-webkit-appearance:none) {
                        border-top: 1px solid $brand-primary-light;        // solid is more specific than dotted
                        border-bottom: 1px solid $brand-primary-light;
                        @include round-corners($border-radius-base, 1px);
                    }
                    @supports (-moz-appearance:none) {
                        border-top: hidden;
                        border-bottom: hidden;
                        @include round-corners($border-radius-base);
                    }

                    color: $brand-primary-light;
                }
            }

            &.selected > td:not(#{$empty-table}) {
                background-color: $table-bg-selected;
            }

            &:hover > td:not(#{$empty-table}) {
                background-color: $table-bg-hover;
            }
        }
    }
}