Changeset 409


Ignore:
Timestamp:
09/05/12 16:05:13 (13 years ago)
Author:
tjcschipper
Message:

-Rest of LESS conversion

Location:
Dev/branches/rest-dojo-ui/client/rft/css
Files:
4 added
8 edited

Legend:

Unmodified
Added
Removed

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/main.css

    r403 r409  
    3838  height: 32px;
    3939  margin: 0;
    40   background-image: url('images/icons/rftIcons24.png');
    41   width: 32px;
    42   height: 32px;
    43   margin: 0;
    4440  background-image: url('images/icons/rftIcons32.png');
    4541  margin-right: 8px;
    … …  
    414410  height: 32px;
    415411  margin: 0;
    416   background-image: url('images/icons/rftIcons24.png');
    417   width: 32px;
    418   height: 32px;
    419   margin: 0;
    420412  background-image: url('images/icons/rftIcons32.png');
    421413}
    … …  
    700692  height: 32px;
    701693  margin: 0;
    702   background-image: url('images/icons/rftIcons24.png');
    703   width: 32px;
    704   height: 32px;
    705   margin: 0;
    706694  background-image: url('images/icons/rftIcons32.png');
    707695  float: left;
    708696  margin: 184px 8px 0 8px;
     697}
     698#rft.claro .rftIndexMenuButton {
     699  border: none;
     700  background-image: none;
     701  -webkit-box-shadow: none;
     702  box-shadow: none;
     703  border-radius: 0;
     704  margin: 0;
     705  padding: 0;
     706  -webkit-transition: all 0.3s;
     707  -moz-transition: all 0.3s;
     708  -o-transition: all 0.3s;
     709  -ms-transition: all 0.3s;
     710  transition: all 0.3s;
     711  line-height: 32px;
     712  border: none;
     713}
     714#rft.claro .rftIndexMenuButton .dijitButtonNode {
     715  border: none;
     716  color: #999999;
     717  font-size: 22px;
     718}
     719#rft.claro .rftIndexMenuButton .dijitButtonNode .dijitButtonContents {
     720  vertical-align: top;
     721}
     722#rft.claro .rftIndexMenuButton .dijitButtonNode .dijitButtonContents .dijitButtonText {
     723  padding-bottom: 10px;
     724  line-height: 20px;
     725}
     726#rft.claro .rftIndexMenuButton .dijitButtonNode .dijitButtonContents .rftIcon {
     727  width: 32px;
     728  height: 32px;
     729  margin: 0;
     730  background-image: url('images/icons/rftIcons32.png');
     731  margin: 0 8px;
     732}
     733#rft.claro .rftIndexMenuButton.oneHeight {
     734  height: 100px;
     735}
     736#rft.claro .rftIndexMenuButton.oneHeight .dijitButtonNode {
     737  margin: 38px 0 0 0;
     738}
     739#rft.claro .rftIndexMenuButton.twoHeight {
     740  height: 200px;
     741}
     742#rft.claro .rftIndexMenuButton.twoHeight .dijitButtonNode {
     743  margin: 88px 0 0 0;
     744}
     745#rft.claro .rftIndexMenuButton.fourHeight {
     746  height: 400px;
     747}
     748#rft.claro .rftIndexMenuButton.fourHeight .dijitButtonNode {
     749  margin: 188px 0 0 0;
     750}
     751#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover {
     752  color: #ffffff;
     753  -webkit-transition: all 0.1s;
     754  -moz-transition: all 0.1s;
     755  -o-transition: all 0.1s;
     756  -ms-transition: all 0.1s;
     757  transition: all 0.1s;
     758}
     759#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover .dijitButtonText {
     760  color: #ffffff;
     761  -webkit-transition: all 0.1s;
     762  -moz-transition: all 0.1s;
     763  -o-transition: all 0.1s;
     764  -ms-transition: all 0.1s;
     765  transition: all 0.1s;
     766}
     767#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover.blue {
     768  background-color: #0072bc;
     769}
     770#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover.red {
     771  background-color: #8c0310;
     772}
     773#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover.green {
     774  background-color: #3aa605;
     775}
     776#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover.orange {
     777  background-color: #ff5b12;
     778}
     779#rft.claro .rftIndexMenuButton.rftIndexMenuButtonHover.purple {
     780  background-color: #6529b7;
     781}
     782#rft.claro .rftIndexMenuButton.rftIndexMenuButtonActive {
     783  width: 32px;
     784  height: 32px;
     785  margin: 0;
     786  background-image: url('images/icons/rftIcons32b.png');
     787  -webkit-transition: all 0.3s;
     788  -moz-transition: all 0.3s;
     789  -o-transition: all 0.3s;
     790  -ms-transition: all 0.3s;
     791  transition: all 0.3s;
     792  color: #111111;
     793  background: #ffffff;
    709794}
    710795#rft.claro .dijitMenuPopup .dijitMenu {
    … …  
    818903  margin: 0;
    819904}
     905#rft.claro .rftSurveyListView .rftSurveyListViewContent {
     906  min-height: 300px;
     907  background: #444444;
     908  overflow: auto;
     909}
    820910#rft.claro .rftLargeButton {
    821911  border: none;
    … …  
    10661156  background-image: url('images/icons/rftIcons16b.png');
    10671157}
     1158#rft.claro .rftObjectBox {
     1159  margin: 8px 0;
     1160}
     1161#rft.claro .rftObjectBox .rftIcon {
     1162  width: 32px;
     1163  height: 32px;
     1164  margin: 0;
     1165  background-image: url('images/icons/rftIcons32.png');
     1166  float: left;
     1167  margin: 20px 8px;
     1168}
     1169#rft.claro .rftObjectBox .rftLineWithButtons {
     1170  margin: 0;
     1171  padding: 0;
     1172}
     1173#rft.claro .rftSessionObject {
     1174  margin: 0;
     1175  padding: 0;
     1176  width: 100px;
     1177  height: 100px;
     1178  background: #999999;
     1179  margin: 8px;
     1180  display: inline-block;
     1181}
     1182#rft.claro .rftSessionObject .rftIcon {
     1183  width: 32px;
     1184  height: 32px;
     1185  margin: 0;
     1186  background-image: url('images/icons/rftIcons32.png');
     1187  margin: 8px 34px 0 34px;
     1188}
     1189#rft.claro .rftSessionObject label {
     1190  margin: 0;
     1191  padding: 0;
     1192  float: left;
     1193  clear: both;
     1194  width: 100px;
     1195  text-align: center;
     1196  color: #ffffff;
     1197  overflow: hidden;
     1198}
     1199#rft.claro .rftSessionObject.blue {
     1200  background-color: #0072bc;
     1201}
     1202#rft.claro .rftSessionObject.blue.selected {
     1203  background-color: #0794d1;
     1204}
     1205#rft.claro .rftSessionObject.green {
     1206  background-color: #3aa605;
     1207}
     1208#rft.claro .rftSessionObject.green.selected {
     1209  background-color: #79ca0a;
     1210}
     1211#rft.claro .rftSessionObject.red {
     1212  background-color: #8c0310;
     1213}
     1214#rft.claro .rftSessionObject.red.selected {
     1215  background-color: #bd0013;
     1216}

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/main.less

    r403 r409  
    88@import "menus.less";
    99@import "questionEditor.less";
     10@import "surveyEditor.less";
    1011@import "rftButtons.less";
     12@import "rftObjectBox.less";
     13@import "sessionEditor.less";

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/menus.css

    r403 r409  
    1 
    2 /* This beautiful CSS-File has been crafted with LESS (lesscss.org) and compiled by simpLESS (wearekiss.com/simpless) */

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/menus.less

    r403 r409  
    33                //Index menu
    44                .rftIndexMenuBlock {
    5                         width: @mm_blockwidth;
    6                         height: @mm_blockheight;
     5                        width: @im_blockwidth;
     6                        height: @im_blockheight;
    77                        background: @base1;
    88                        float: left;
    9                         margin: @mm_blockmargin;
     9                        margin: @im_blockmargin;
    1010                        overflow: hidden;
    1111
    1212                        &:hover .rftIndexMenuMask {
    13                                 margin-top: -@mm_blockheight;
     13                                margin-top: -@im_blockheight;
    1414                        }
    1515                }
    1616                .rftIndexMenuMask {
    17                         width: @mm_blockwidth;
    18                         height: @mm_blockheight;
     17                        width: @im_blockwidth;
     18                        height: @im_blockheight;
    1919                        background: @base1;
    2020                        color: @headers;
    … …  
    2323                        .label {
    2424                                color: @headers;
    25                                 font-size: @mm_font_size;
    26                                 height: @mm_font_size;
    27                                 line-height: @mm_font_size;
    28                                 margin-top: (@mm_blockheight - @mm_font_size) / 2;
     25                                font-size: @im_font_size;
     26                                height: @im_font_size;
     27                                line-height: @im_font_size;
     28                                margin-top: (@im_blockheight - @im_font_size) / 2;
    2929                                float: left;
    3030                        }
    … …  
    3333                                .setIcon(32px);
    3434                                float: left;
    35                                 margin: ((@mm_blockheight - @mm_font_size)/2) 8px 0 8px;
     35                                margin: ((@im_blockheight - @im_font_size)/2) 8px 0 8px;
    3636                        }
     37                }
     38                .rftIndexMenuButton {
     39                        .flatShading;
     40                        .noOffset;
     41                        .transition (0.3s);
     42                        line-height: @button_indexmenu_height;
     43                        border: none;
     44
     45                        .dijitButtonNode {
     46                                border: none;
     47                                color: @headers;
     48                                font-size: @h2Size;
     49
     50                                .dijitButtonContents {
     51                                        vertical-align: top;
     52
     53                                        .dijitButtonText {
     54                                                padding-bottom: 10px;
     55                                                line-height: 20px;
     56                                        }
     57
     58                                        .rftIcon {
     59                                                .setIcon (32px);
     60                                                margin: 0 @std_offset_big;
     61                                        }
     62                                }
     63
     64                               
     65                        }
     66
     67                        .indexMenuMixin (@number) when (@number > 0){
     68                                @height: @im_blockheight / @number;
     69                                height: @height;
     70                               
     71                                .dijitButtonNode {
     72                                        margin: ((@height - @button_indexmenu_content_size)/2) 0 0 0;
     73                                }
     74                        }
     75
     76                        &.oneHeight {
     77                                .indexMenuMixin (4);
     78                        }
     79                        &.twoHeight {
     80                                .indexMenuMixin (2);
     81                        }
     82                        &.fourHeight {
     83                                .indexMenuMixin (1);
     84                        }
     85
     86                        &.rftIndexMenuButtonHover {
     87                                color: @text;
     88                                .transition(0.1s);
     89                                .dijitButtonText {
     90                                        color: @text;
     91                                        .transition(0.1s);
     92                                }
     93
     94                                &.blue {
     95                                        background-color: @blue;
     96                                }
     97                                &.red {
     98                                        background-color: @red;
     99                                }
     100                                &.green {
     101                                        background-color: @green;
     102                                }
     103                                &.orange {
     104                                        background-color: @orange;
     105                                }
     106                                &.purple {
     107                                        background-color: @purple;
     108                                }
     109                        }
     110
     111                        &.rftIndexMenuButtonActive {
     112                                .setIcon (32px, black);
     113                                .transition(0.3s);
     114                                color: @darkest;
     115                                background: @text;
     116
     117                        }
     118
    37119                }
    38120

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/mixins.less

    r403 r409  
    4444}
    4545
    46 .setIconSize (@size, @b) when (@size > 24px) {
     46.setIconSize (@size, @b) when (@size > 24px) and (@size < 32) {
    4747        width: @size;
    4848        height: @size;

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/rftButtons.less

    r403 r409  
    184184                        }
    185185                }
    186 
    187                 //MAINMENUBUTTON---------------------------------
    188 
    189186        }
    190187}

  • Dev/branches/rest-dojo-ui/client/rft/css/LESS/variables.less

    r403 r409  
    4040@icon_smallSize: 16px;
    4141
    42 // MainMenu
    43 @mm_blockheight: 400px;
    44 @mm_blockwidth: 400px;
    45 @mm_blockmargin: 16px;
    46 @mm_font_size: 32px;
     42// IndexMenu
     43@im_blockheight: 400px;
     44@im_blockwidth: 400px;
     45@im_blockmargin: 16px;
     46@im_font_size: 32px;
     47
     48// Mainmenu
     49@button_mainmenu_height: 30px;
     50@button_mainmenu_spacing: 5px;
     51@button_mainmenu_padding: 4px;
     52@button_mainmenu_font_size: 24px;
     53@button_mainmenu_font_grow: @button_mainmenu_font_size / 12;
     54
     55// Index menu
     56@button_indexmenu_height: 32px;
     57@button_indexmenu_content_size: 24px;
     58@button_indexmenu_font_size: @h1Size;
     59
     60// SessionObject
     61@sessionobject_size: 100px;
     62@sessionObject_spacing: 2 * @std_offset_big;
    4763
    4864// Buttons
    … …  
    5874@button_inline_spacing: 0;
    5975@button_inline_font_size: @font_size;
    60 
    61 @button_mainmenu_height: 30px;
    62 @button_mainmenu_spacing: 5px;
    63 @button_mainmenu_padding: 4px;
    64 @button_mainmenu_font_size: 24px;
    65 @button_mainmenu_font_grow: @button_mainmenu_font_size / 12;

  • Dev/branches/rest-dojo-ui/client/rft/css/rftButtons.css

    r397 r409  
    320320    margin: 0;
    321321    padding: 0;
     322    height: 32px;
    322323    line-height: 32px;
    323324    vertical-align: middle;
Note: See TracChangeset for help on using the changeset viewer.