"Fossies" - the Fresh Open Source Software Archive

Member "koha-19.11.15/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss" (23 Feb 2021, 16723 Bytes) of package /linux/misc/koha-19.11.15.tar.gz:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) SASS/SCSS source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file. See also the last Fossies "Diffs" side-by-side code changes report for "_tables.scss": 20.05.06_vs_20.11.00.

    1 table {
    2     border-collapse: collapse;
    3     border-right: 1px solid $table-border-color;
    4     border-top: 1px solid $table-border-color;
    5 
    6     .btn-group {
    7         white-space: nowrap;
    8 
    9         .btn {
   10             display: inline-block;
   11             float: none;
   12         }
   13     }
   14 
   15     &.indexes {
   16         td {
   17             vertical-align: middle;
   18         }
   19     }
   20 
   21     > caption {
   22         span {
   23             &.actions {
   24                 font-size: 66%;
   25                 font-weight: normal;
   26                 margin: 0 .5em 0 0;
   27             }
   28         }
   29     }
   30 
   31     &.invis {
   32         border: 0;
   33 
   34         tr,
   35         td {
   36             border: 0;
   37         }
   38     }
   39 
   40     + table {
   41         margin-top: 1em;
   42     }
   43 
   44     &.dataTable {
   45         border-collapse: collapse;
   46 
   47         tfoot {
   48             td,
   49             th {
   50                 padding: .5em;
   51             }
   52         }
   53 
   54         thead {
   55             th,
   56             td {
   57                 border-bottom: 1px solid $table-border-color;
   58                 border-left: 1px solid $table-border-color;
   59                 padding: .5em;
   60 
   61             }
   62 
   63             tr {
   64                 &.columnFilter {
   65                     th {
   66                         padding: 0;
   67                     }
   68                 }
   69             }
   70 
   71             .sorting_asc {
   72                 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAECAYAAABhnXSoAAAAKElEQVQYlWNgIAV0nPlPknqiDOw485/BdyaVDIYZSDWDfWf+x4lxAABQRiFTkRQi9gAAAABJRU5ErkJggg==") no-repeat scroll right center $table-header-background;
   73                 padding-right: 19px;
   74             }
   75 
   76             .sorting_desc {
   77                 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAECAYAAABhnXSoAAAAIklEQVQYlWNgIAQ6zvzHiSkC6Ib5zqTQQHSDqWYgDBBpIAAjvCPnQb/pawAAAABJRU5ErkJggg==") no-repeat scroll right center $table-header-background;
   78                 padding-right: 19px;
   79             }
   80 
   81             .sorting {
   82                 background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAJCAYAAADdA2d2AAAAPklEQVQokWNgIBJUVlb+J1YtUWDNmjX/16xZ859qBsMMpJrBlZWV/3FhqriYagDd61QLAqobiG4w1cOSFAMBWo9YAwnK2+4AAAAASUVORK5CYII=") no-repeat scroll right center $table-header-background;
   83                 padding-right: 19px;
   84             }
   85         }
   86 
   87         tbody {
   88             td {
   89                 padding: .5em;
   90 
   91                 &.dataTables_empty {
   92                     display: none;
   93                 }
   94             }
   95         }
   96 
   97     }
   98 
   99     /* Row grouping */
  100     &.group {
  101         tr {
  102             &.odd td {
  103                 background-color: #F3F3F3;
  104                 border: 1px solid $table-border-color;
  105                 border-right: 1px solid $table-border-color;
  106             }
  107 
  108             &.even td {
  109                 background-color: #FFF;
  110                 border-right: 1px solid $table-border-color;
  111             }
  112         }
  113 
  114         td.group {
  115             background-color: #D1CFD0;
  116             border-bottom: 2px solid #A19B9E;
  117             border-top: 2px solid #A19B9E;
  118         }
  119     }
  120 }
  121 
  122 td,
  123 th {
  124     border-bottom: 1px solid $table-border-color;
  125     border-left: 1px solid $table-border-color;
  126     padding: .2em .3em;
  127 }
  128 
  129 td {
  130     background-color: #FFFFFF;
  131     vertical-align: top;
  132 
  133     &.actions {
  134         white-space: nowrap;
  135     }
  136 
  137     &.borderless {
  138         border: 0 none;
  139         border-collapse: separate;
  140     }
  141 
  142     &.data {
  143         font-family: $font-monospace;
  144         text-align: right;
  145     }
  146 
  147     &.total {
  148         text-align: right;
  149     }
  150 
  151     input {
  152         &.approve {
  153             background-color: #FFC;
  154         }
  155     }
  156 
  157     /* Row grouping */
  158     &.group {
  159         background-color: #D1CFD0;
  160         border-bottom: 2px solid #A19B9E;
  161         border-top: 2px solid #A19B9E;
  162     }
  163 }
  164 
  165 
  166 th {
  167     background-color: $table-header-background;
  168     font-weight: bold;
  169     text-align: center;
  170 
  171     &[scope="row"] {
  172         text-align: right;
  173     }
  174 
  175     &.data {
  176         font-family: $font-monospace;
  177         text-align: right;
  178     }
  179 }
  180 
  181 
  182 tr {
  183     &.clickable {
  184         cursor: pointer;
  185     }
  186 
  187     &.expired {
  188         td {
  189             color: #999999;
  190         }
  191     }
  192 
  193     &.highlight {
  194         td {
  195             background-color: #F6F6F6;
  196             border-color: $table-border-color;
  197         }
  198 
  199         th {
  200             &[scope="row"] {
  201                 background-color: #DDDDDD;
  202                 border-color: $table-border-color;
  203             }
  204         }
  205 
  206         table {
  207             &.invis {
  208                 td {
  209                     border: 0;
  210                 }
  211             }
  212         }
  213     }
  214 
  215     &.odd {
  216         &.onissue {
  217             td {
  218                 background-color: #FFFFE1;
  219             }
  220         }
  221     }
  222 
  223     &.ok {
  224         td {
  225             background-color: #FFFFCC;
  226         }
  227 
  228         &:nth-child(odd) {
  229             td {
  230                 background-color: #FFFFCC;
  231             }
  232         }
  233 
  234         &:nth-child(even) {
  235             td {
  236                 background-color: #FFFFCC;
  237             }
  238         }
  239     }
  240 
  241     &.onissue {
  242         td {
  243             background-color: #FFFFCC;
  244         }
  245     }
  246 
  247     &.reserved {
  248         td {
  249             background-color: #EEFFD4;
  250         }
  251     }
  252 
  253     &.transfered {
  254         td {
  255             background-color: #E8F0F6;
  256         }
  257     }
  258 
  259     &.warn {
  260         td {
  261             background-color: #FF9090;
  262         }
  263 
  264         &:nth-child(odd) {
  265             td {
  266                 background-color: #FF9090;
  267             }
  268         }
  269     }
  270 
  271     &.default {
  272         td {
  273             font-weight: bold;
  274         }
  275     }
  276 }
  277 
  278 .selections-table {
  279     tr {
  280         &:hover {
  281             td {
  282                 background-color: #FFFF99;
  283             }
  284         }
  285     }
  286 }
  287 
  288 tfoot {
  289     td {
  290         background-color: $table-odd-row;
  291         font-weight: bold;
  292         vertical-align: middle;
  293     }
  294 }
  295 
  296 caption {
  297     color: #000;
  298     font-size: 133.9%;
  299     font-weight: bold;
  300     margin: .3em 0;
  301 }
  302 
  303 .highlighted-row,
  304 .highlighted-row td {
  305     background-color: #FFD000 !important;
  306 }
  307 
  308 .warned-row,
  309 .warned-row td { background-color: #FF9000 !important }
  310 
  311 .high-warned-row,
  312 .high-warned-row td { background-color: #FF0000 !important }
  313 
  314 tbody {
  315     tr {
  316         &:nth-child(odd) {
  317             td {
  318                 background-color: $table-odd-row;
  319                 border-right: 1px solid $table-border-color;
  320             }
  321         }
  322     }
  323 }
  324 
  325 .dataTables_wrapper {
  326     .dataTables_processing {
  327         background-color: #F4F8F9;
  328         border: 2px solid #82B4BE;
  329         border-radius: 3px;
  330         box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .2);
  331         color: #333;
  332         height: unset;
  333         left: 50%;
  334         margin-left: -125px;
  335         margin-top: -15px;
  336         padding: 1.5em;
  337         position: fixed;
  338         text-align: center;
  339         top: 50%;
  340         width: auto;
  341     }
  342 
  343     .dataTables_info {
  344         float: left;
  345         line-height: 1.9em;
  346         padding-right: 1em;
  347         padding-top: 0;
  348     }
  349 
  350     .dataTables_length {
  351         display: none;
  352         float: left;
  353         line-height: 1.5em;
  354         padding-right: 1em;
  355     }
  356 
  357     .dataTables_filter {
  358         float: left;
  359         padding-right: 1em;
  360     }
  361 
  362     .dataTables_paginate {
  363         float: left;
  364         line-height: 1.5em;
  365         padding: 0;
  366         padding-right: 1em;
  367 
  368         span {
  369             .paginate_button {
  370                 display: none;
  371             }
  372         }
  373 
  374         .paginate_button {
  375             color: #004D99 !important;
  376             padding-bottom: 0;
  377             padding-top: 0;
  378 
  379             &:hover,
  380             &:active {
  381                 background: #FFC none;
  382                 border: 1px solid transparent;
  383                 box-shadow: none;
  384                 color: #222BAC !important;
  385             }
  386 
  387             &.current {
  388                 background: #E6FCB7 none;
  389                 border: 0;
  390                 color: #666;
  391                 font-weight: bold;
  392 
  393                 &:hover,
  394                 &:active {
  395                     background: #E6FCB7 none;
  396                     border: 0;
  397                     box-shadow: none;
  398                     color: #666;
  399                     cursor: default;
  400                 }
  401             }
  402 
  403             &.first,
  404             &.previous,
  405             &.next,
  406             &.last {
  407                 &::before,
  408                 &::after {
  409                     display: inline-block;
  410                     font-family: FontAwesome;
  411                     width: 1em;
  412                 }
  413             }
  414 
  415             &.first {
  416                 display: none;
  417 
  418                 &::before {
  419                     content: "\f100";
  420                     padding-right: .5em;
  421                 }
  422             }
  423 
  424             &.previous {
  425                 &::before {
  426                     content: "\f104";
  427                     padding-right: .5em;
  428                 }
  429             }
  430 
  431             &.next {
  432                 &::after {
  433                     content: "\f105";
  434                     padding-left: .5em;
  435                 }
  436             }
  437 
  438             &.last {
  439                 display: none;
  440 
  441                 &::after {
  442                     content: "\f101";
  443                     padding-left: .5em;
  444                 }
  445             }
  446         }
  447     }
  448 }
  449 
  450 .pager {
  451     font-size: 90%;
  452 
  453     &.top {
  454         border-top: 1px solid $table-border-color;
  455         padding-top: 1em;
  456     }
  457 
  458     &.bottom {
  459         border-bottom: 1px solid $table-border-color;
  460         padding-bottom: 1em;
  461     }
  462 
  463     button,
  464     div,
  465     a {
  466         &.dt-button {
  467             background: transparent none;
  468             border: 0;
  469             color: #000;
  470             font-size: 1em;
  471             line-height: 1.7em;
  472             margin: 3px 3px 0;
  473             padding: 0 .5em;
  474 
  475             &::before {
  476                 content: '';
  477             }
  478 
  479             &.disabled {
  480                 color: #999;
  481                 cursor: default;
  482             }
  483 
  484             &:active,
  485             &:focus {
  486                 background: transparent none;
  487                 border: 0;
  488                 box-shadow: none;
  489                 text-shadow: none;
  490 
  491                 &:not(.disabled):hover:not(.disabled) {
  492                     background: transparent none;
  493                     box-shadow: none;
  494                 }
  495             }
  496 
  497             &:hover {
  498                 background: transparent none;
  499                 border: 0;
  500 
  501                 &:not(.disabled) {
  502                     background: transparent none;
  503                 }
  504             }
  505 
  506             &.active:not(.disabled):hover:not(.disabled) {
  507                 background: transparent none;
  508                 box-shadow: none;
  509             }
  510         }
  511     }
  512 
  513     input {
  514         &[type="search"] {
  515             border: 1px solid #CCC;
  516         }
  517     }
  518 
  519     &:empty {
  520         border: 0;
  521         padding: 0;
  522     }
  523 } /* /.pager */
  524 
  525 .toptabs {
  526     .pager {
  527         margin: 0;
  528         padding-bottom: .7em;
  529         padding-top: .7em;
  530 
  531         &.top {
  532             border-top: 0;
  533             padding-top: 0;
  534         }
  535 
  536         &.bottom {
  537             border-bottom: 0;
  538             padding-bottom: 0;
  539         }
  540     }
  541 }
  542 
  543 .filter_column {
  544     & > input {
  545         &[type="text"] {
  546             border: 0;
  547             color: #999;
  548             font-size: 85%;
  549             width: 100%;
  550         }
  551     }
  552 }
  553 
  554 div {
  555     &.dt-button-collection {
  556         width: auto;
  557 
  558         button {
  559             &.dt-button {
  560                 border-radius: 2px;
  561                 text-align: left;
  562 
  563                 &.buttons-collection {
  564                     border: 0;
  565                 }
  566 
  567                 &.buttons-columnVisibility {
  568                     background: #FFF none;
  569                     border: 1px solid #EEE;
  570                     box-shadow: none;
  571                     font-size: 1em;
  572                     margin: 0 0 4px 0;
  573                     padding: .3em .7em;
  574                     text-shadow: none;
  575 
  576                     &::before {
  577                         color: #CC0000;
  578                         content: "\f00d";
  579                         display: inline-block;
  580                         font-family: FontAwesome;
  581                         margin-right: .5em;
  582                         width: 1em;
  583                     }
  584 
  585                     &:hover {
  586                         background: #FFC none;
  587                         border: 1px solid #999;
  588                         box-shadow: none;
  589 
  590                         &::before {
  591                             color: #538200;
  592                             content: "\f00c";
  593                             display: inline-block;
  594                             font-family: FontAwesome;
  595                             margin-right: .5em;
  596                             width: 1em;
  597                         }
  598                     }
  599 
  600                     &:active:not(.disabled):hover:not(.disabled) {
  601                         background: transparent none;
  602                         box-shadow: none;
  603                     }
  604 
  605                     &.active {
  606                         background: #E6F0F2 none;
  607                         border-color: #999;
  608                         box-shadow: none;
  609 
  610                         &:hover {
  611                             background: #FFC none;
  612 
  613                             &::before {
  614                                 color:  #CC0000;
  615                                 content: "\f00d";
  616                                 display: inline-block;
  617                                 font-family: FontAwesome;
  618                                 margin-right: .5em;
  619                                 width: 1em;
  620                             }
  621                         }
  622 
  623                         &:not(.disabled):hover:not(.disabled) {
  624                             background: transparent none;
  625                             box-shadow: none;
  626                         }
  627 
  628                         &::before {
  629                             color: #538200;
  630                             content: "\f00c";
  631                             display: inline-block;
  632                             font-family: FontAwesome;
  633                             margin-right: .5em;
  634                             width: 1em;
  635                         }
  636                     }
  637                 }
  638 
  639                 &.buttons-html5,
  640                 &.buttons-print {
  641                     background: #FFF none;
  642                     border: 1px solid #EEE;
  643                     box-shadow: none;
  644                     font-size: 1.2em;
  645                     margin: 0 0 4px 0;
  646                     padding: .3em .7em;
  647                     text-shadow: none;
  648 
  649                     &:hover {
  650                         background: #FFC none;
  651                     }
  652                 }
  653 
  654                 &.buttons-html5:not(.disabled)::before {
  655                     color: #222BAC;
  656                     display: inline-block;
  657                     font-family: FontAwesome;
  658                     margin-right: .5em;
  659                     width: 1em;
  660                 }
  661 
  662                 &.buttons-excel:not(.disabled)::before {
  663                     content: "\f1c3";
  664                 }
  665 
  666                 &.buttons-csv:not(.disabled)::before {
  667                     content: "\f0ce";
  668                 }
  669 
  670                 &.buttons-copy:not(.disabled)::before {
  671                     content: "\f0c5";
  672                 }
  673 
  674                 &.buttons-print:not(.disabled)::before {
  675                     color:  #222BAC;
  676                     content: "\f02f";
  677                     display: inline-block;
  678                     font-family: FontAwesome;
  679                     margin-right: .5em;
  680                     width: 1em;
  681                 }
  682 
  683             }
  684         }
  685     }
  686 }
  687 
  688 .table_entries {
  689     clear: both;
  690 }
  691 
  692 .table_controls {
  693     border-top: 1px solid #EEE;
  694     clear: both;
  695     margin-top: .5em;
  696     padding-top: .5em;
  697 }
  698 
  699 @media (min-width: 1275px) {
  700     .dt-button-text {
  701         display: inline;
  702     }
  703 
  704     .dataTables_wrapper {
  705         .dataTables_paginate {
  706             .paginate_button {
  707                 &.first,
  708                 &.last {
  709                     display: inline-block;
  710                 }
  711             }
  712         }
  713     }
  714 }
  715 
  716 @media only screen and ( min-width: 500px ) {
  717     .dataTables_wrapper {
  718         .dataTables_length {
  719             display: block;
  720         }
  721     }
  722 }
  723 
  724 @media only screen and ( min-width: 850px ) {
  725 
  726 }
  727 
  728 @media only screen and ( max-width: 767px ) {
  729     .dataTables_wrapper {
  730         .dataTables_paginate {
  731             margin-top: 0;
  732         }
  733     }
  734 
  735 }
  736 
  737 @media only screen and (min-width: 950px) and (max-width: 1125px) {
  738     .dt-button-text {
  739         display: none;
  740     }
  741 }
  742 
  743 @media only screen and ( min-width: 950px ) {
  744     .dataTables_wrapper {
  745         .dataTables_paginate {
  746             span {
  747                 .paginate_button {
  748                     display: inline-block;
  749                 }
  750             }
  751         }
  752     }
  753 
  754     .table_entries,
  755     .table_controls {
  756         border-top: 0;
  757         clear: none;
  758         margin: 0;
  759         padding: 0;
  760     }
  761 }