Changeset 432


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.

Location:
Dev/trunk/client
Files:
34 added
19 deleted
6 edited

Legend:

Unmodified
Added
Removed

  • Dev/trunk/client/admin.html

    r421 r432  
    44        <title>QED - Researcher</title>
    55        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    6         <link rel="stylesheet" type="text/css" href="qed/css/main.css" />
     6        <link rel="stylesheet" type="text/css" href="qed/css/qed.css" />
    77    </head>
    88    <body class="dijitReset claro" id="rft">

  • Dev/trunk/client/index.html

    r420 r432  
    44        <title>QED</title>
    55        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    6         <link rel="stylesheet" type="text/css" href="qed/css/main.css" />
     6        <link rel="stylesheet" type="text/css" href="qed/css/qed.css" />
    77    </head>
    88    <body class="dijitReset claro" id="rft">

  • Dev/trunk/client/qed/Gruntfile.js

    r431 r432  
    1212            all: {
    1313                files: {
    14                     'css/main.css': 'css/main.less'
     14                    'css/qed.css': 'css/qed.less'
    1515                }
    1616            }

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

    r425 r432  
    1 #rft {
    2         &.claro {
    3                
    4                 .colorMixin (@color) {
    5                         &.bgColor {
    6                                 background-color: @@color !important;
    7                                 &.light {
    8                                         @colorName: "@{color}_light";
    9                                         background-color: @@colorName !important;
    10                                 }
    11                         }
    12                         .bgColor {
    13                                 background-color: @@color;
    14                                 &.light {
    15                                         @colorName: "@{color}_light";
    16                                         background-color: @@colorName;
    17                                 }
    18                         }
    19                 }
     1DESCRIPTION {
     2        /*
     3How to use colour system:
     4Apply a combination of at most 1 "colour" class and one or more "modifier" classes.
     5Colour classes: Red, Blue, Green, Orange, Purple
     6Modifer classes:
     7- textColor: Change the font colour of element to the "colour" class combined with.
     8- bgColor: Change the background colour to the "colour" class combined with.
     9- doesHover: If present in combination with one of the above two modifiers,
     10the element will shift it's background- or text colour to a lighter version on hover.
     11- hoverTextColor: Same as .textColor, but only affects elements being hovered over.
     12- hoverBgColor: Same as .bgColor, but only affects elements being hovered over.
     13NOTE: .doesHover does nothing in combination with the above two modifiers!
     14*/
     15}
    2016
    21                 .hoverColorMixin (@color) {
    22                         &.hoverBgColor:hover {
    23                                 background-color: @@color !important;
    24                                 &.light {
    25                                         @colorName: "@{color}_light";
    26                                         background-color: @@colorName !important;
    27                                 }
    28                         }
    29                         .hoverBgColor:hover {
    30                                 background-color: @@color;
    31                                 &.light {
    32                                         @colorName: "@{color}_light";
    33                                         background-color: @@colorName;
    34                                 }
    35                         }
    36                 }
    37 
    38                 .hoverTextColorMixin (@color) {
    39                         &.hoverTextColor:hover {
    40                                 color: @@color !important;
    41                                 &.light {
    42                                         @colorName: "@{color}_light";
    43                                         color: @@colorName !important;
    44                                 }
    45                         }
    46                         .hoverTextColor:hover {
    47                                 color: @@color;
    48                                 &.light {
    49                                         @colorName: "@{color}_light";
    50                                         color: @@colorName;
    51                                 }
    52                         }
    53                 }
    54 
    55                 .bgColor {
    56                         -webkit-transition-property: background-color 0.2s;
    57                         -moz-transition-property: background-color 0.2s;
    58                         -o-transition-property: background-color 0.2s;
    59                         -ms-transition-property: background-color 0.2s;
    60                         transition-property: background-color 0.2s;                     
    61                 }
    62 
    63                 .blue,
    64                 &.blue {
    65                         .colorMixin ("blue");
    66                         .hoverColorMixin ("blue");
    67                 }
    68                 .green,
    69                 &.green {
    70                         .colorMixin ("green");
    71                         .hoverColorMixin ("green");
    72                 }
    73                 .orange,
    74                 &.orange {
    75                         .colorMixin ("orange");
    76                         .hoverColorMixin ("orange");
    77                 }
    78                 .red,
    79                 &.red {
    80                         .colorMixin ("red");
    81                         .hoverColorMixin ("red");
    82                 }
    83                 .purple,
    84                 &.purple {
    85                         .colorMixin ("purple");
    86                         .hoverColorMixin ("purple");
    87                 }
     17// Variables/Colour scheme parameters
     18.textColor (@color) {
     19        color: @@color;
     20}
     21.textColorH (@color) {
     22        color: @@color;
     23        &.doesHover:hover {
     24                @colorName: "@{color}_light";
     25                color: @@colorName;
     26        }
     27}
     28.hoverTextColor (@color) {
     29        &:hover {
     30                color: @@color;
    8831
    8932        }
    9033}
     34.bgColor (@color) {
     35        background-color: @@color;
     36}
     37.bgColorH (@color) {
     38        background-color: @@color;
     39        &.doesHover:hover {
     40                @colorName: "@{color}_light";
     41                background-color: @@colorName;
     42        }
     43}
     44.hoverBgColor (@color) {
     45        &:hover {
     46                background-color: @@color;
     47
     48        }
     49}
     50
     51
     52// Private color mixin is used to assign the colour classes below, don't use this in external CSS!
     53.privateColorMixin (@color) {
     54        &.textColor {   //Change text colour to C-Class
     55                color: @@color;
     56                &.doesHover:hover {     //If also .doesHover, shift colour to light version on hover
     57                        @colorName: "@{color}_light";
     58                        color: @@colorName;
     59                }
     60        }
     61        &.bgColor {     // Change background colour to C-Class
     62                background-color: @@color;
     63                color: @text;
     64                &.doesHover:hover {     //If .doesHover, shift to light on hover
     65                        @colorName: "@{color}_light";
     66                        background-color: @@colorName;
     67                        color: @darkest;
     68                }
     69        }
     70        &.hoverTextColor:hover {        // Only change text colour to C-class on hover
     71                color: @@color;
     72        }
     73        &.hoverBgColor:hover {  // Only change background colour to C-class on hover
     74                background-color: @@color;
     75        }
     76}
     77
     78#rft {
     79        &.claro {
     80
     81                .blue {
     82                        .privateColorMixin("blue");
     83                }
     84                .red {
     85                        .privateColorMixin("red");
     86                }
     87                .orange {
     88                        .privateColorMixin("orange");
     89                }
     90                .green {
     91                        .privateColorMixin("green");
     92                }
     93                .purple {
     94                        .privateColorMixin("purple");
     95                }
     96
     97                .textColor,
     98                .hoverTextColor {
     99                        transition: color 0.2s;
     100                }
     101                .bgColor,
     102                .hoverBgColor {
     103                        transition: background-color 0.2s;
     104                }
     105        }
     106}

  • 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 

  • Dev/trunk/client/response.html

    r421 r432  
    44        <title>QED - Respondent</title>
    55        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    6         <link rel="stylesheet" type="text/css" href="qed/css/main.css" />
     6        <link rel="stylesheet" type="text/css" href="qed/css/qed.css" />
    77    </head>
    88    <body id="rft" class="dijitReset claro">
Note: See TracChangeset for help on using the changeset viewer.