Changeset 5852


Ignore:
Timestamp:
11/25/14 14:04:12 (9 years ago)
Author:
Sander Maijers
Message:
  • Make CLARIN style more modular.
Location:
CLARIN_style
Files:
1 added
1 edited
1 moved

Legend:

Unmodified
Added
Removed

  • CLARIN_style

    • Property svn:ignore

      •  

        old new  
        11.sass-cache
         2.idea
         3*.iml

  • CLARIN_style/_.scss

    r5794 r5852  
    11@charset "UTF-8";
    22
    3 $indent: 7px;
    4 
    5 // Colors
     3//          Colors
    64
    75$red: #9e0025;
    … …  
    1311$light_grey: #f3f3f3;
    1412
    15 $thin_separator_grey: #e7e7e7;
     13$text: black;
    1614$text_emphasized: #222;
    1715$text_deemphasized: #666;
    1816//$hyperlink_color: #03683f;
    19 $text_emphasized_periphery: #806a52;
    20 $text_deemphasized_periphery: #c0a37c;
    21 $hyperlink: $text_emphasized_periphery;
    22 $hyperlink_visited: $text_deemphasized_periphery;
     17
     18$hyperlink_text_color: $clarin_blue;
     19$hyperlink_text_emphasized_color: $red;
     20$hyperlink_text_deemphasized_color: rgba($clarin_blue, 0.01);
     21// rgba($hyperlink_text_emphasized_color, 0.0);
     22
     23$hyperlink_text_periphery_color: #544431;
     24$hyperlink_text_emphasized_periphery_color: $red;
     25$hyperlink_text_deemphasized_periphery_color: orange;
     26// rgba($hyperlink_text_emphasized_periphery_color, 0.0);
     27
     28$menu_item_selected_color: rgba($grey, 0.9);
     29$menu_item_active_color: rgba($grey, 0.8);
     30$menu_background_color: rgba($grey, 0.6);
     31
     32$thin_separator_grey_color: #e7e7e7;
     33
    2334$background_color: #f9f9f9;
    24 
    25 // Font
     35$periphery_background_color: rgba($grey, 0.4);
     36
     37//          Dimensions
     38
     39//$header_height: 7vh;
     40$footer_height: 10vh;
     41//$inner_body_height: 100vh - $header_height - $footer_height;
     42$outer_leftright_padding: 2vw;
     43$outer_topbottom_padding: 1vh;
     44$content_padding: 2vh 1vw;
     45//$width: 100vw - ($margins * 2);
     46
     47//          Fonts
     48
    2649// https://bugzilla.mozilla.org/show_bug.cgi?id=604421
    27 /*
     50
    2851@font-face {
    29   font-family: 'Roboto Condensed';
    30   font-style: normal;
    31   font-weight: 400;
    32   src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url('Roboto_Condensed_with_European_character_sets.woff') format('woff');
    33 }
    34 */
    35 
    36 @font-face {
    37   font-family: 'Roboto';
    38   font-style: normal;
    39   font-weight: 400;
    40   src: local('Roboto Regular'), local('Roboto-Regular'), url('Roboto_with_European_character_sets.woff') format('woff');
     52    font-family: 'Roboto';
     53    font-style: normal;
     54    font-weight: 400;
     55    src: local('Roboto Regular'), local('Roboto-Regular'), url('Roboto_with_European_character_sets.woff') format('woff');
    4156}
    4257
    4358$font-stack: 'Roboto', sans-serif;
    4459
     60$body_font_size: 1rem;
     61$application_brand_font_size: 1.8rem;
     62$application_menu_font_size: 1.5rem;
     63$fixed_navigation_element_font_size: 1.25rem;
     64
     65html {
     66    font-size: initial !important;
     67    height: 100%;
     68    line-height: initial !important;
     69    overflow: hidden;
     70    width: 100%;
     71    word-wrap: break-word;
     72    z-index: -1;
     73}
     74
    4575body {
    46   font-family: $font-stack;
    47   -webkit-font-smoothing: antialiased;
    48   -moz-osx-font-smoothing: grayscale;
    49   color: $text_emphasized;
    50   font-size: 100%;
    51   word-wrap: break-word;
     76    //border: solid 1px rgba($clarin_blue, 0.4);
     77    bottom: 0;
     78    color: $text_emphasized;
     79    display: -webkit-flex;
     80    display: flex;
     81    font-family: $font-stack;
     82    font-size: $body_font_size;
     83    flex: 1 1 auto;
     84    flex-flow: column;
     85    justify-content: space-around;
     86    margin: 0;
     87    left: 0;
     88    line-height: 1.5;
     89    position: absolute;
     90    //min-height: max-content;
     91    right: 0;
     92    top: 0;
     93    z-index: 0;
     94}
     95
     96body > div {
     97    padding: $outer_topbottom_padding $outer_leftright_padding;
     98}
     99
     100div#header {
     101    align-content: space-around;
     102    align-items: center;
     103    background-color: $periphery_background_color;
     104    border-bottom: 2px solid $thin_separator_grey_color;
     105    display: flex;
     106    flex-flow: row wrap;
     107    justify-content: space-around;
     108    min-height: fit-content;
     109    order: 1;
     110    z-index: 1;
     111}
     112
     113div#brand {
     114    display: flex;
     115    flex: none;
     116    flex-flow: row wrap;
     117    font-size: $application_brand_font_size;
     118    font-weight: bold;
     119    justify-content: flex-start;
     120    order: 1;
     121    padding: 2% 2vw;
     122    text-overflow: ellipsis;
     123}
     124
     125div#menu {
     126    align-content: stretch;
     127    align-items: stretch;
     128    background-color: $menu_background_color;
     129    display: flex;
     130    flex: auto;
     131    flex-flow: row wrap;
     132    font-size: $application_menu_font_size;
     133    justify-content: space-between;
     134    order: 2;
     135    padding: unset;
     136}
     137
     138div#menu > * {
     139    align-content: stretch;
     140    align-items: stretch;
     141    display: flex;
     142    flex: auto;
     143    flex-flow: row nowrap;
     144    justify-content: center;
     145    padding: 3% 3%;
     146    text-align: center;
     147}
     148
     149div#menu > .active {
     150    background-color: $menu_item_selected_color;
     151}
     152
     153//div#menu > a:hover {
     154//    // border: dashed 1px red;
     155//}
     156
     157div#login {
     158    display: flex;
     159    flex: none;
     160    flex-flow: row wrap;
     161    font-size: $fixed_navigation_element_font_size;
     162    justify-content: flex-end;
     163    order: 3;
     164    padding: 2% 2vw;
     165
     166    :not(.fa) {
     167        font-family: $font-stack; // TODO: optimize
     168    }
     169}
     170
     171div#content {
     172    flex: auto;
     173    flex-flow: column nowrap;
     174    height: 100%;
     175    justify-content: space-between;
     176    align-content: flex-start;
     177    order: 2;
     178    overflow-y: auto;
     179    margin: $content_padding;
     180    z-index: 1;
     181}
     182
     183div#footer {
     184    align-content: space-around;
     185    align-items: center;
     186    background-color: $periphery_background_color; // TODO: parameterize
     187    border-top: 2px solid $thin_separator_grey_color;
     188    display: flex;
     189    flex-flow: row nowrap;
     190    font-size: $fixed_navigation_element_font_size;
     191    min-height: fit-content;
     192    //height: $footer_height;
     193    justify-content: space-between;
     194    order: 3;
     195    z-index: 3;
     196
     197    a {
     198        img {
     199            //display: inline-block;
     200            //max-width: 20%;
     201            max-height: $footer_height * 0.98;
     202            //overflow: hidden;
     203        }
     204    }
    52205}
    53206
    54207a {
    55   color: $hyperlink;
    56   text-decoration: dotted !important;
    57 
    58   &:hover, &:focus {
    59     // color: inherit;
    60208    text-decoration: none !important;
    61   }
    62 
    63   &:visited {
    64     color: $hyperlink_visited;
    65   }
    66 }
    67 
    68 div.navbar-header {
    69   text-overflow: ellipsis;
    70   overflow: hidden;
    71   //max-height: 30px; // TODO: transition to flex divs.
    72 }
    73 
    74 a.navbar-brand {
    75   color: $text_emphasized_periphery;
    76   //text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
    77   font-size: 2em;
    78   text-overflow: ellipsis;
    79   //overflow: hidden;
    80   //letter-spacing: 1px;
    81 
    82   //$clarin_blue1: #00406f;
    83   //$clarin_blue2: #006dab;
    84   //$clarin_blue3: #007eda;
    85 
    86   //font-weight: bold;
    87   line-height: 1em;
    88   //color: $clarin_blue !important;
    89 
    90   //text-shadow: -.025em -.025em .0125em rgba(0, 64, 111, 0.8), -.060em -.080em 0.02em rgba(0, 64, 111, 0.6); //rgba(90, 90, 90, .6);
    91 }
    92 
    93 /*
    94 a {
    95     text-decoration: none;
    96 }
    97 
    98 a:link {
    99     color: #00c;
    100     border-bottom: 1px solid #00c;
    101 }
    102 
    103 a:visited {
    104     color: #6D006D;
    105     border-bottom: 1px dotted #6D006D;
    106 }
    107 
    108 a:focus {
    109     color: #c00;
    110     border-bottom: 1px dashed #c00;
    111 }
    112 
    113 a:hover {
    114     color: #c00;
    115     border-bottom: 1px dashed #c00;
    116 }
    117 
    118 a:active {
    119     color: #c00;
    120     border-bottom: 1px solid #c00;
    121     font-style: italic;
    122 }
    123 */
    124 
    125 h1, h2, h3, h4, h5, h6, label {
    126   color: $text_deemphasized;
    127   font-weight: normal;
    128   line-height: 1.2em;
    129 }
    130 
    131 body, h1, h2, h3, h4, h5, h6 {
    132   font-size-adjust: 0.5;
    133 }
    134 
    135 /* Based on http://typecast.com/blog/a-more-modern-scale-for-web-typography */
    136 
    137 #page {
    138   font-size: 1em;
    139   /* equivalent to 16px */
    140   line-height: 1.25;
    141   /* equivalent to 20px */
    142 }
    143 
    144 h1 {
    145   font-size: 2em;
    146   /* 2x body copy size = 32px */
    147   line-height: 1.25;
    148   /* 45px / 36px */
    149   margin-top: 0px !important;
    150   margin-bottom: 0px !important;
    151 }
    152 
    153 h2 {
    154   font-size: 1.625em;
    155   /* 1.625x body copy size = 26px */
    156   line-height: 1.15384615;
    157   /* 30px / 26px */
    158 }
    159 
    160 h3 {
    161   font-size: 1.375em;
    162   /* 1.375x body copy size = 22px */
    163   line-height: 1.13636364;
    164   /* 25px / 22px */
    165 }
    166 
    167 h4 {
    168   font-size: 1.125em;
    169   /* 1.125x body copy size = 18px */
    170   line-height: 1.11111111;
    171 }
    172 
    173 blockquote {
    174   font-size: 1.25em;
    175   /* 20px / 16px */
    176   line-height: 1.25;
    177   /* 25px / 20px */
    178 }
    179 
    180 @media (min-width: 56.25em) {
    181   h1 {
    182     font-size: 3em;
    183     /* 3x body copy size = 48px */
    184     line-height: 1.05;
    185     /* keep to a multiple of the 20px line height
    186     and something more appropriate for display headings */
    187   }
    188 
    189   h2 {
    190     font-size: 2.25em;
    191     /* 2.25x body copy size = 36px */
    192     line-height: 1.25;
    193   }
    194 
    195   h3 {
    196     font-size: 1.75em;
    197     /* 1.75x body copy size = 28px */
    198     line-height: 1.25;
    199   }
    200 }
    201 
    202 @media (min-width: 43.75em) {
    203   #page {
    204     font-size: 1em;
    205     /* equivalent to 16px */
    206     line-height: 1.375;
    207     /* equivalent to 22px */
    208   }
    209 
    210   h1 {
    211     font-size: 2.5em;
    212     /* 2.5x body copy size = 40px */
    213     line-height: 1.125;
    214   }
    215 
    216   h2 {
    217     font-size: 2em;
    218     /* 2x body copy size = 32px */
    219     line-height: 1.25;
    220   }
    221 
    222   h3 {
    223     font-size: 1.5em;
    224     /* 1.5x body copy size = 24px */
    225     line-height: 1.25;
    226   }
    227 
    228   h4 {
    229     line-height: 1.22222222;
    230     /* (22px / 18px */
    231   }
    232 
    233   blockquote {
    234     font-size: 1.5em;
    235     /* 24px / 16px = */
    236     line-height: 1.45833333;
    237     /* 35px / 24px */
    238   }
    239 }
    240 
    241 p {
    242   margin: 0 0 15px 0;
    243 }
    244 
    245 //input {
    246 //  @include box-sizing(border-box);
     209    transition: color 1s ease-out !important; // TODO: scale 1s ease-in, color
     210
     211    color: rgba($clarin_blue, 0.90);
     212
     213    &:link {
     214        color: $hyperlink_text_color;
     215    }
     216
     217    &:visited {
     218        color: $hyperlink_text_deemphasized_color;
     219    }
     220
     221    &:hover,
     222    &:focus {
     223        color: $hyperlink_text_emphasized_color;
     224    }
     225
     226    &:active {
     227        color: $hyperlink_text_emphasized_color;
     228    }
     229}
     230
     231//a:link              { color:red; }
     232//a:visited           { color:green; }
     233//a:hover             { color:blue; }
     234//a:active            { color:orange; }
     235
     236//div.periphery a {
     237//    &:link {
     238//        color: $hyperlink_text_periphery_color
     239//    }
     240//
     241//    &:visited {
     242//        color: $hyperlink_text_periphery_color; //green; // $hyperlink_text_deemphasized_periphery_color;
     243//    }
     244//
     245//    &:hover,
     246//    &:focus {
     247//        color: $hyperlink_text_emphasized_periphery_color;
     248//        background-color: $menu_item_active_color;
     249//    }
     250//
     251//    &:active {
     252//        color: $hyperlink_text_emphasized_periphery_color;
     253//    }
    247254//}
    248255
    249 menu, ol, ul {
    250   padding: 0 0 0 20px;
    251 }
    252 
    253256hr {
    254   clear: both;
    255 }
    256 
    257 div.container {
    258   z-index: -1 !important;
    259 }
    260 
    261 // Tables
    262 
    263 //@import "compass/utilities/tables";
    264 
    265 table.display {
    266   border-collapse: collapse !important;
    267   position: relative !important;
    268   border-spacing: 0 !important;
    269   border: 0px !important;
    270   background-clip: padding-box;
    271   //background-repeat: no-repeat;
    272   //background-position: center top;
    273 
    274   th, td {
    275     border: 0px !important;
    276     //background-clip: content-box !important;
    277   }
    278 
    279   thead tr th {
    280     background-color: $clarin_blue !important;
    281     border-collapse: collapse !important;
    282     //background-clip: content-box !important;
    283     background-attachment: scroll !important;
    284     //border-bottom: 0px !important;
    285     color: #fff !important;
    286   }
    287 
    288   thead {
    289     tr th:first-child {
    290       border-top-left-radius: 6px !important;
    291       border-bottom-left-radius: 6px !important;
    292 
    293       -webkit-border-top-left-radius: 6px !important;
    294       -webkit-border-bottom-left-radius: 6px !important;
    295 
    296       -moz-border-top-left-radius: 6px !important;
    297       -moz-border-bottom-left-radius: 6px !important;
    298     }
    299 
    300     tr {
    301       padding: $indent $indent !important;
    302       font-weight: bolder !important;
    303       text-align: left !important;
    304       border: 0px !important;
    305     }
    306 
    307     tr th a {
    308       color: #fff !important;
    309       text-decoration: underline !important;
    310     }
    311 
    312     tr th:last-child {
    313       border-top-right-radius: 6px !important;
    314       border-bottom-right-radius: 6px !important;
    315 
    316       -webkit-border-top-right-radius: 6px !important;
    317       -webkit-border-bottom-right-radius: 6px !important;
    318 
    319       -moz-border-top-right-radius: 6px !important;
    320       -moz-border-bottom-right-radius: 6px !important;
    321     }
    322   }
    323 }
     257    clear: both;
     258}
     259
     260//      Tables
    324261
    325262table {
    326   tbody {
    327     tr:nth-child(2n+1) td {
    328       background-color: $grey !important;
    329     }
    330 
    331     td:first-child {
    332       -webkit-border-top-left-radius: 6px !important;
    333       -webkit-border-bottom-left-radius: 6px !important;
    334 
    335       -moz-border-top-left-radius: 6px !important;
    336       -moz-border-bottom-left-radius: 6px !important;
    337 
    338       border-top-left-radius: 6px !important;
    339       border-bottom-left-radius: 6px !important;
    340     }
    341 
    342     td:last-child {
    343       -webkit-border-top-right-radius: 6px !important;
    344       -webkit-border-bottom-right-radius: 6px !important;
    345 
    346       -moz-border-top-right-radius: 6px !important;
    347       -moz-border-bottom-right-radius: 6px !important;
    348 
    349       border-top-right-radius: 6px !important;
    350       border-bottom-right-radius: 6px !important;
    351     }
    352 
    353     tr {
    354       //border-bottom: 1px solid #e6e6e6 !important;
    355       vertical-align: middle !important;
    356       //background-clip: padding-box !important;
    357       //border-collapse: collapse !important;
    358     }
    359 
    360     tr:last-child td:first-child {
    361       -webkit-border-bottom-left-radius: 6px !important;
    362       -moz-border-bottom-left-radius: 6px !important;
    363       border-bottom-left-radius: 6px !important;
    364     }
    365 
    366     tr:last-child td:last-child {
    367       -webkit-border-bottom-right-radius: 6px !important;
    368       -moz-border-bottom-right-radius: 6px !important;
    369       border-bottom-right-radius: 6px !important;
    370     }
    371 
    372     tr:last-child {
    373       border-bottom: 1px solid $clarin_blue !important;
    374     }
    375   }
    376 }
    377 
    378 table:not(.display) {
    379   tr:first-child {
    380     border-top: 1px solid $clarin_blue !important;
    381   }
    382 
    383   td, th {
    384     padding: 5px;
    385   }
    386 
    387   th {
    388     background-color: $grey;
    389     border-right: 1px dotted black;
    390   }
    391 }
    392 
    393 html body ul#nav ul, html body ul#nav ul li {
    394   width: 200px;
    395 }
    396 
    397 html body ul#nav ul ul {
    398   margin: 0 0 0 200px;
    399 }
    400 
    401 div#body {
    402   min-height: 100%;
    403   height: auto;
    404   //margin: 0 auto -60px;
    405   /* Pad top and bottom to prevent overflow over body div if using fixed-top navbar. */
    406   //padding: 60px 0 60px; // TODO: transition to flex divs.
    407 }
    408 
    409 div#footer {
    410   //height: 60px;
    411   background-color: #f5f5f5; // TODO: parameterize
    412   //position: absolute;
    413   bottom: 0;
    414   left: 0;
    415   width: 100%;
    416   border-top: 1px solid $thin_separator_grey;
    417   margin-top: 20px;
    418 
    419   div.container {
    420     //height: 60px !important;
    421     height: 100%;
    422     display : flex;
    423     flex-flow: row wrap;
    424     justify-content: space-between;
    425     align-items: center;
    426     align-content: space-around;
    427 
    428     div#CLARIN_footer_left {
    429       order: 1;
    430       //float: left;
    431       //display: inline-block;
    432       display: flex !important;
    433       text-align: left;
    434       vertical-align: middle;
    435       margin: auto;
    436       align-content: space-around;
    437       //width: 25%;
    438       //max-height: 100%;
    439     }
    440 
    441     div#CLARIN_footer_middle {
    442       order: 2;
    443       //float: left;
    444       //display: inline-block;
    445       display: flex !important;
    446       text-align: center;
    447       margin: auto;
    448       align-content: space-around;
    449       //width: 50%;
    450       //max-height: 100%;
    451 
    452       img {
    453         display: inline-block;
    454         max-width: 100%;
    455         max-height: 100%;
    456         overflow: hidden;
    457       }
    458     }
    459 
    460     div#CLARIN_footer_right {
    461       order: 3;
    462       //float: left;
    463       text-align: right;
    464       vertical-align: middle;
    465       display: flex !important;
    466       margin: auto;
    467       align-content: space-around;
    468       //width: 25%;
    469       //max-height: 100%;
    470     }
    471   }
    472 }
    473 
    474 ul#CLARIN_header_right, div#CLARIN_footer_left, div#CLARIN_footer_right {
    475   :not(.glyphicon) {
    476     font-family: $font-stack;
    477     font-size: smaller;
    478     font-variant: small-caps;
    479   }
    480 
    481   a {
    482     color: $text_emphasized_periphery;
    483     text-decoration: none;
    484 
    485     &:hover, &:focus {
    486       color: inherit !important;
    487       text-decoration: none !important;
    488     }
    489 
    490     &:visited {
    491       color: inherit !important;
    492       text-decoration: none !important;
    493       //color: $text_deemphasized_periphery;
    494     }
    495   }
    496 
    497   margin: 0px 4px 0 p x 4px;
    498   //text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
    499   color: $text_emphasized_periphery;
    500   //opacity: 0.8;
    501 }
    502 
     263    tbody {
     264        tr:nth-child(2n+1) td {
     265            background-color: $grey !important;
     266        }
     267
     268        td:first-child {
     269            border-top-left-radius: 6px !important;
     270            border-bottom-left-radius: 6px !important;
     271        }
     272
     273        td:last-child {
     274            border-top-right-radius: 6px !important;
     275            border-bottom-right-radius: 6px !important;
     276        }
     277
     278        tr {
     279            //border-bottom: 1px solid #e6e6e6 !important;
     280            vertical-align: middle !important;
     281            //background-clip: padding-box !important;
     282            //border-collapse: collapse !important;
     283        }
     284
     285        tr:last-child td:first-child {
     286            border-bottom-left-radius: 6px !important;
     287        }
     288
     289        tr:last-child td:last-child {
     290
     291            border-bottom-right-radius: 6px !important;
     292        }
     293
     294        tr:last-child {
     295            border-bottom: 1px solid $clarin_blue !important;
     296        }
     297    }
     298}
     299
     300span.positive {
     301    background-color: rgba(0, 255, 0, 0.4);
     302    color: red;
     303    border-radius: 10px 10px 10px 10px;
     304    padding: 1px;
     305}
     306
     307span.negative {
     308    background-color: rgba(255, 0, 0, 0.4);
     309    color: red;
     310    border-radius: 10px 10px 10px 10px;
     311    padding: 1px;
     312}
     313
     314table:not(.datatables-table) {
     315    tr:first-child {
     316        border-top: 1px solid $clarin_blue !important;
     317    }
     318
     319    td, th {
     320        padding: 5px;
     321    }
     322
     323    th {
     324        background-color: $grey;
     325        border-right: 1px dotted black;
     326    }
     327}
     328
     329
Note: See TracChangeset for help on using the changeset viewer.