Ignore:
Timestamp:
04/17/13 14:40:30 (12 years ago)
Author:
hendrikvanantwerpen
Message:

Split up and re-organized LESS. Not sure how it all works yet though.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • Dev/trunk/client/qed/css/layout.less

    r428 r432  
    11*:focus {
    2         //disable Chrome outline of focused elements
    3         outline: none;
     2    //disable Chrome outline of focused elements
     3    outline: none;
    44}
    55html, body {
    6         width: 100%;
    7         height: 100%;
    8         background-color: @base;
     6    width: 100%;
     7    height: 100%;
     8    background-color: @base;
    99}
    10 
    11 #rft {
    12         &.claro {
    13                 font-family: @font;
    14                 font-size: @font_size;
    15                 color: @darkest;
    16 
    17                 .dijitBorderContainer, .dijitContentPane, .dijitTabContainer, .dijitTabPaneWrapper {
    18                         background: transparent;
    19                         border: none;
    20                 }               
    21 
    22 
    23                 h1 {
    24                         .noMargin;
    25                         padding: 0 10px 8px 10px;
    26                         float: left;
    27                         clear: left;
    28                         font-size: @h1Size;
    29                         color: @headers;
    30                         line-height: @h1Size;
    31                         font-weight: normal;
    32                         -webkit-user-select: none;
    33                         -moz-user-select: none;
    34                         -ms-user-select: none;
    35                         user-select: none;
    36                 }
    37 
    38                 h2 {
    39                         .noOffset;
    40                         color: @headers;
    41                         font-size: @h2Size;
    42                         line-height: floor(@h2Size * 1.365);
    43 
    44                         .rftIcon {
    45                                 .setIcon(32px);
    46                                 margin-right: 8px;
    47                         }
    48                 }
    49 
    50                 h3 {
    51                         .noMargin;
    52                         font-size: @h3Size;
    53                         margin-bottom: @std_offset;
    54                 }
    55 
    56                 h4 {
    57                         font-size: @h4Size;
    58                 }
    59 
    60                 //Main screen layout
    61                 .topbar {
    62 
    63                         overflow-y: hidden;
    64 
    65                         .dijitMenuBar {
    66                                 .flatShading;
    67                                 background-color: transparent;
    68                                 float: right;
    69                                 clear: right;
    70                                 margin-top: 16px;
    71                         }
    72 
    73                         .breadcrumbs {
    74                                 color: @headers;
    75                                 .breadcrumb {
    76                                         font-size: @font_size;
    77                                         &.breadcrumbCurrent {
    78                                                 color: @text;
    79                                                 font-size: round(@font_size * 1.125);
    80                                         }
    81                                         &.breadcrumbHover {
    82                                                 color: @blue;
    83                                         }
    84                                 }
    85                         }
    86                 }
    87 
    88                 .dijitContentPane.page {
    89                         .noOffset;
    90                 }
    91 
    92                 .dijitContentPane.content {
    93                         .noOffset;
    94                         display: block;
    95                         clear: both;
    96                         background-color: @base2;
    97                         background-image: -webkit-gradient(
    98                                 50% 50%,
    99                                 circle,
    100                                 #666666 1%,
    101                                 #444444 100%
    102                                 );
    103                         -moz-background-image: gradient(
    104                                 50% 50%,
    105                                 circle,
    106                                 #666666 1%,
    107                                 #444444 100%
    108                                 );
    109                         -o-background-image: gradient(
    110                                 50% 50%,
    111                                 circle,
    112                                 #666666 1%,
    113                                 #444444 100%
    114                                 );
    115                         -ms-background-image: gradient(
    116                                 50% 50%,
    117                                 circle,
    118                                 #666666 1%,
    119                                 #444444 100%
    120                                 );
    121                         background-image: gradient(
    122                                 50% 50%,
    123                                 circle,
    124                                 #666666 1%,
    125                                 #444444 100%
    126                                 );
    127 
    128                         .dijitBorderContainer {
    129                                 padding: @std_offset;
    130                         }
    131                 }
    132 
    133                 //Form stuff?
    134                 .loginLabel {
    135                         .newLine;
    136                         width: 100px;
    137                 }
    138                 .loginInput {
    139                         width: 150px;
    140                 }
    141 
    142                 .rftMultipleChoiceWidget {
    143                         display: table;
    144                         .row {
    145                                 display: table-row;
    146                         }
    147                         .rowBox {
    148                                 display: table-cell;
    149                         }
    150                         .rowText {
    151                                 display: table-cell;
    152                                 width: 100px;
    153                         }
    154                         .rowBtn {
    155                                 display: table-cell;
    156                                 width: 30px;
    157                         }
    158                 }
    159 
    160                 //Tabs
    161                 .verticalTabList {
    162                         width: 190px;
    163                 }
    164 
    165                 .dijitTab {
    166                         .transition(0.2s);
    167                         background-color: transparent;
    168                         padding: @std_offset @std_offset_big;
    169                         color: @headers;
    170                         overflow: hidden;
    171 
    172                        
    173 
    174                        
    175                 }
    176 
    177                 .dijitTabContainerLeft-tabs {
    178                         border: none;
    179                         padding: @std_offset;
    180 
    181                         .dijitTab {
    182                                 margin: @std_offset;
    183                                 width: 200px;
    184                                 min-height: @tab_height;
    185                                 border: 1px solid @headers;
    186 
    187                                 .dijitTabContent {
    188                                         min-height: @tab_height;
    189                                         line-height: @tab_height;
    190                                         width: 190px;
    191                                 }
    192 
    193                                 &.dijitTabChecked {
    194                                         .transition (0.1s);
    195                                         color: @text;
    196                                         border: 1px solid transparent;
    197 
    198                                         &.dijitTabHover {
    199                                                 border: 1px solid transparent;
    200                                         }
    201                                 }
    202 
    203                                 &.dijitTabHover {
    204                                         .transition (0.1s);
    205                                         color: @text;
    206                                         border-color: @text;
    207                                 }
    208 
    209                                 &.dijitTabActive {
    210                                         .transition (0.1s);
    211                                         color: @headers;
    212                                 }
    213                         }
    214 
    215                 }
    216                 //Tab colour settings
    217                 &.blue .dijitTabChecked,
    218                 .blue .dijitTabChecked,
    219                 div.blue.dijitTabChecked {
    220                         .bgColor ("blue");
    221                 }
    222                 &.green .dijitTabChecked,
    223                 .green .dijitTabChecked,
    224                 div.green.dijitTabChecked {
    225                         .bgColor ("green");
    226                 }
    227                 &.red .dijitTabChecked,
    228                 .red .dijitTabChecked,
    229                 div.red.dijitTabChecked {
    230                         .bgColor ("red");
    231                 }
    232                 &.orange .dijitTabChecked,
    233                 .orange .dijitTabChecked,
    234                 div.orange.dijitTabChecked {
    235                         .bgColor ("orange");
    236                 }
    237                 &.purple .dijitTabChecked,
    238                 .purple .dijitTabChecked,
    239                 div.purple.dijitTabChecked {
    240                         .bgColor ("purple");
    241                 }
    242 
    243 
    244                 // Inputs
    245                 fieldset {
    246                         border: none;
    247                        
    248                         &.align {
    249                                
    250                                 input,
    251                                 .dijitTextBox,
    252                                 textarea {
    253                                         margin-left: 0;
    254                                 }
    255 
    256                                 label {
    257                                         color: @text;
    258                                         display: inline-block;
    259                                         width: 100px !important;
    260                                 }
    261                         }
    262                 }
    263 
    264                 .newline {
    265                         .newLine;
    266                         display: block;
    267                 }
    268 
    269                 .floatRight {
    270                         float: right;
    271                         .noMargin
    272                 }
    273 
    274                 .rftLineListView {
    275                         max-width: 300px;
    276                         max-height: 500px;
    277                        
    278                         .rftLineListViewContent {
    279                                 width: auto;
    280                                 overflow: auto;
    281                         }
    282                 }
    283         }
    284 }
    285 
Note: See TracChangeset for help on using the changeset viewer.