Changeset 403


Ignore:
Timestamp:
08/31/12 19:02:41 (13 years ago)
Author:
tjcschipper
Message:
  • Switched to LESS for stylesheets. Most of the conversion is done, it's only (predictably) the color system that is giving trouble. Plan for next week: get rid of the inherit stuff, just use proper color classes.

-> Use only a minimal .*colorName* .bg/.text class combination that doesn't inherit. Do anything more complicated than that in a page-specific stylesheet.

Location:
Dev/branches/rest-dojo-ui/client/rft
Files:
22 added
5 edited

Legend:

Unmodified
Added
Removed

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

    r344 r403  
    107107    border: none;
    108108}
    109 
    110 
    111 
    112 
    113 
    114 

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

    r397 r403  
    114114}
    115115
     116
     117
     118
     119
     120
     121
     122
     123
     124
    116125/* General */
    117126.loginLabel {
    … …  
    155164    width: 200px;
    156165    min-height: 30px;
     166    border: 1px solid #888888;
    157167}
    158168.claro .dijitTab {
     169    background-color: transparent;
    159170    padding: 2px 8px;
    160171    color: #999999;
    161     border: 1px solid #999999;
    162172    white-space: normal;
    163173    overflow: hidden;
    … …  
    358368}
    359369.claro .orange .dojoxTitleGroup .dijitTitlePaneTitleHover,
    360 .claro .ornage .dojoxTitleGroup .dijitTitlePanelTitleFocused {
     370.claro .orange .dojoxTitleGroup .dijitTitlePanelTitleFocused {
    361371    background-color: #ff9140;
    362372}

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

    r351 r403  
    1 /* 
    2     The icon's parent element class decides the icon size and url. (.rftLargeButton .rftIcon / .rftInlineButton .rftIcon, for example)
    3     The icon gets two classes: .rftIcon (which sets general spacing/positioning, etc),
    4     and an icon identifier such as .rftIconAccept (Which sets the background offset.
    5 */
    6 .rftIcon {
    7     display: inline-block;
    8     margin: 0;
    9     padding: 0;
    10     border: none;
    11     background-color: transparent;
    12     background-repeat: no-repeat;
    13 }
     1/*The icon's parent element class decides the icon size and url. (.rftLargeButton .rftIcon / .rftInlineButton .rftIcon, for example)*/
     2/*The icon gets two classes: .rftIcon (which sets general spacing/positioning, etc), */
     3/*and an icon identifier such as .rftIconAccept (Which sets the background offset.*/
     4        .rftIcon {
     5                display: inline-block;
     6                margin: 0;
     7                padding: 0;
     8                border: none;
     9                background-color: transparent;
     10                background-repeat: no-repeat;
     11        }
     12       
     13        /*Settings for different icon sizes and contexts */
     14        .rftIcon.rftMainIcon {
     15                float: left;
     16                width: 32px;
     17                height: 32px;
     18                background-image: url('images/icons/rftIcons32.png');
     19        }
    1420
    15 /* Settings for different icon sizes and contexts */
    16 .rftIcon.rftMainIcon {
    17     float: left;
    18     width: 32px;
    19     height: 32px;
    20     background-image: url('images/icons/rftIcons32.png');
    21 }
    22 
    23 /*  Specific icon indices
    24     If extra icons are added to the spritesheets, make sure that shared icons retain the same index!
    25     Also, if possible put common/shared icons at the start of the list to prevent excessively large spritesheets.
    26 */
    27 
    28 /* Types */
    29 .rftIconApplication {
    30     background-position: 0px 0px;
    31 }
    32 .rftIconDashboard {
    33     background-position: -32px 0px;
    34 }
    35 .rftIconSession {
    36     background-position: -64px 0px;
    37 }
    38 .rftIconSessionActive {
    39     background-position: -96px 0px;
    40 }
    41 .rftIconSessionTemplate {
    42     background-position: -128px 0px;
    43 }
    44 .rftIconSurvey {
    45     background-position: -160px 0px;
    46 }
    47 .rftIconQuestion {
    48     background-position: -192px 0px;
    49 }
    50 .rftIconQuestionFill {
    51     background-position: -224px 0px;
    52 }
    53 .rftIconRespondent {
    54     background-position: -256px 0px;
    55 }
    56 .rftIconAnswer {
    57     background-position: -288px 0px;
    58 }
    59 .rftIconAnswerSet {
    60     background-position: -320px 0px;
    61 }
    62 .rftIconGameData {
    63     background-position: -352px 0px;
    64 }
    65 .rftIconUser {
    66     background-position: -384px 0px;
    67 }
    68 /* Actions */
    69 .rftIconAccept {
    70     background-position: -416px 0px;
    71 }
    72 .rftIconCancel {
    73     background-position: -448px 0px;
    74 }
    75 .rftIconPlus {
    76     background-position: -480px 0px;
    77 }
    78 .rftIconMinus {
    79     background-position: -512px 0px;
    80 }
    81 .rftIconIncrease {
    82     background-position: -544px 0px;
    83 }
    84 .rftIconDecrease {
    85     background-position: -576px 0px;
    86 }
    87 .rftIconDelete {
    88     background-position: -608px 0px;
    89 }
    90 .rftIconHome {
    91     background-position: -640px 0px;
    92 }
    93 .rftIconPreview {
    94     background-position: -672px 0px;
    95 }
    96 .rftIconSave {
    97     background-position: -704px 0px;
    98 }
    99 .rftIconDiscard {
    100     background-position: -736px 0px;
    101 }
    102 .rftIconProperties {
    103     background-position: -768px 0px;
    104 }
    105 .rftIconUndo {
    106     background-position: -800px 0px;
    107 }
    108 .rftIconRedo {
    109     background-position: -832px 0px;
    110 }
    111 .rftIconBack {
    112     background-position: -864px 0px;
    113 }
    114 .rftIconForward {
    115     background-position: -896px 0px;
    116 }
    117 .rftIconRefresh {
    118     background-position: -928px 0px;
    119 }
    120 .rftIconHelp {
    121     background-position: -960px 0px;
    122 }
    123 .rftIconInspect {
    124     background-position: -992px 0px;
    125 }
    126 .rftIconTag {
    127     background-position: -1024px 0px;
    128 }
    129 .rftIconImage {
    130     background-position: -1056px 0px;
    131 }
    132 .rftIconEdit {
    133     background-position: -1088px 0px;
    134 }
    135 .rftIconLock {
    136     background-position: -1120px 0px;
    137 }
    138 .rftIconUnlock {
    139     background-position: -1152px 0px;
    140 }
    141 .rftIconPreset {
    142     background-position: -1184px 0px;
    143 }
    144 .rftIconTextBlock {
    145     background-position: -1216px 0px;
    146 }
    147 .rftIconPageBreak {
    148     background-position: -1248px 0px;
    149 }
    150 .rftIconExternal {
    151     background-position: -1280px 0px;
    152 }
    153 .rftIconInput {
    154     background-position: -1312px 0px;
    155 }
    156 .rftIconPublish {
    157     background-position: -1344px 0px;
    158 }
    159 
    160 /* Arrows */
    161 .rftIconFullArrowUp {
    162     background-position: -1696px 0px;
    163 }
    164 .rftIconFullArrowDown {
    165     background-position: -1728px 0px;
    166 }
    167 .rftIconFullArrowLeft {
    168     background-position: -1760px 0px;
    169 }
    170 .rftIconFullArrowRight {
    171     background-position: -1792px 0px;
    172 }
    173 .rftIconHalfArrowUp {
    174     background-position: -1824px 0px;
    175 }
    176 .rftIconHalfArrowDown {
    177     background-position: -1856px 0px;
    178 }
    179 .rftIconHalfArrowLeft {
    180     background-position: -1888px 0px;
    181 }
    182 .rftIconHalfArrowRight {
    183     background-position: -1920px 0px;
    184 }
     21        /*Specific icon indices */
     22        /*If extra icons are added to the spritesheets, make sure that shared icons retain the same index!*/
     23        /*Also, if possible put common/shared icons at the start of the list to prevent excessively large spritesheets.*/
    18524
    18625
    187 /* TODO: rftIcons24.png and rftIcons16.png have icons that are 1px too wide!
    188  * Fix this in the .psd and re-export!
    189  */
     26        /*Types */
     27        .rftIconApplication {
     28                background-position: 0px 0px;
     29        }
     30        .rftIconDashboard {
     31                background-position: -32px 0px;
     32        }
     33        .rftIconSession {
     34                background-position: -64px 0px;
     35        }
     36        .rftIconSessionActive {
     37                background-position: -96px 0px;
     38        }
     39        .rftIconSessionTemplate {
     40                background-position: -128px 0px;
     41        }
     42        .rftIconSurvey {
     43                background-position: -160px 0px;
     44        }
     45        .rftIconQuestion {
     46                background-position: -192px 0px;
     47        }
     48        .rftIconQuestionFill {
     49                background-position: -224px 0px;
     50        }
     51        .rftIconRespondent {
     52                background-position: -256px 0px;
     53        }
     54        .rftIconAnswer {
     55                background-position: -288px 0px;
     56        }
     57        .rftIconAnswerSet {
     58                background-position: -320px 0px;
     59        }
     60        .rftIconGameData {
     61                background-position: -352px 0px;
     62        }
     63        .rftIconUser {
     64                background-position: -384px 0px;
     65        }
     66        /*Actions*/
     67        .rftIconAccept {
     68                background-position: -416px 0px;
     69        }
     70        .rftIconCancel {
     71                background-position: -448px 0px;
     72        }
     73        .rftIconPlus {
     74                background-position: -480px 0px;
     75        }
     76        .rftIconMinus {
     77                background-position: -512px 0px;
     78        }
     79        .rftIconIncrease {
     80                background-position: -544px 0px;
     81        }
     82        .rftIconDecrease {
     83                background-position: -576px 0px;
     84        }
     85        .rftIconDelete {
     86                background-position: -608px 0px;
     87        }
     88        .rftIconHome {
     89                background-position: -640px 0px;
     90        }
     91        .rftIconPreview {
     92                background-position: -672px 0px;
     93        }
     94        .rftIconSave {
     95                background-position: -704px 0px;
     96        }
     97        .rftIconDiscard {
     98                background-position: -736px 0px;
     99        }
     100        .rftIconProperties {
     101                background-position: -768px 0px;
     102        }
     103        .rftIconUndo {
     104                background-position: -800px 0px;
     105        }
     106        .rftIconRedo {
     107                background-position: -832px 0px;
     108        }
     109        .rftIconBack {
     110                background-position: -864px 0px;
     111        }
     112        .rftIconForward {
     113                background-position: -896px 0px;
     114        }
     115        .rftIconRefresh {
     116                background-position: -928px 0px;
     117        }
     118        .rftIconHelp {
     119                background-position: -960px 0px;
     120        }
     121        .rftIconInspect {
     122                background-position: -992px 0px;
     123        }
     124        .rftIconTag {
     125                background-position: -1024px 0px;
     126        }
     127        .rftIconImage {
     128                background-position: -1056px 0px;
     129        }
     130        .rftIconEdit {
     131                background-position: -1088px 0px;
     132        }
     133        .rftIconLock {
     134                background-position: -1120px 0px;
     135        }
     136        .rftIconUnlock {
     137                background-position: -1152px 0px;
     138        }
     139        .rftIconPreset {
     140                background-position: -1184px 0px;
     141        }
     142        .rftIconTextBlock {
     143                background-position: -1216px 0px;
     144        }
     145        .rftIconPageBreak {
     146                background-position: -1248px 0px;
     147        }
     148        .rftIconExternal {
     149                background-position: -1280px 0px;
     150        }
     151        .rftIconInput {
     152                background-position: -1312px 0px;
     153        }
     154        .rftIconPublish {
     155                background-position: -1344px 0px;
     156        }
     157
     158        /*Arrows */
     159        .rftIconFullArrowUp {
     160                background-position: -1696px 0px;
     161        }
     162        .rftIconFullArrowDown {
     163                background-position: -1728px 0px;
     164        }
     165        .rftIconFullArrowLeft {
     166                background-position: -1760px 0px;
     167        }
     168        .rftIconFullArrowRight {
     169                background-position: -1792px 0px;
     170        }
     171        .rftIconHalfArrowUp {
     172                background-position: -1824px 0px;
     173        }
     174        .rftIconHalfArrowDown {
     175                background-position: -1856px 0px;
     176        }
     177        .rftIconHalfArrowLeft {
     178                background-position: -1888px 0px;
     179        }
     180        .rftIconHalfArrowRight {
     181                background-position: -1920px 0px;
     182        }

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

    r395 r403  
    11.claro .rftLineWithButtons {
     2    position: relative;
    23    height: 24px;
    34    line-height: 24px;
    … …  
    78}
    89.claro .rftLineWithButtons .rftLineWithButtonsButtons {
    9     float: right;
     10    position: absolute;
     11    right: 0;
    1012    height: 24px;
    1113    line-height: 24px;
    … …  
    2426
    2527/* SurveyListView stuff */
     28/*
    2629.claro div.blue.inheritBgColor.dojoDndItemAnchor,
    2730.claro .blue .inheritBgColor.dojoDndItemAnchor,
    … …  
    5356    background-color: #bd0013;
    5457    color: #ffffff;
    55 }
     58}*/
    5659
    5760.claro .rftLineWithButtons.dojoDndItem {
    … …  
    7679    overflow: hidden;
    7780}
     81
     82
     83.claro .rftLineWithButtons.dojoDndItemOver {
     84    background-image: none;
     85    border: none;
     86    padding: 2px;
     87}
     88.claro .rftLineWithButtons.dojoDndItemAnchor {
     89    background-image: none;
     90    padding: 2px;
     91    border: none;
     92}

  • Dev/branches/rest-dojo-ui/client/rft/ui/templates/MainMenu.html

    r349 r403  
    55            <span>Content</span>
    66            <div data-dojo-type="dijit.DropDownMenu">
    7                 <div data-dojo-type="rft.ui.MenuLink" class="blue" data-dojo-props="pageId:'surveys', iconClass:'rftIcon rftIconSurvey'">Surveys</div>
    8                 <div data-dojo-type="rft.ui.MenuLink" class="orange" data-dojo-props="pageId:'questions', iconClass:'rftIcon rftIconQuestion'">Questions</div>
    9                 <div data-dojo-type="rft.ui.MenuLink" class="purple" data-dojo-props="pageId:'applications', iconClass: 'rftIcon rftIconApplication'">Applications</div>
    10                 <div data-dojo-type="rft.ui.MenuLink" class="red" data-dojo-props="pageId:'dashboards', iconClass: 'rftIcon rftIconDashboard'">Dashboards</div>
     7                <div data-dojo-type="rft.ui.MenuLink" class="blue bgColorHover" data-dojo-props="pageId:'surveys', iconClass:'rftIcon rftIconSurvey'">Surveys</div>
     8                <div data-dojo-type="rft.ui.MenuLink" class="orange bgColorHover" data-dojo-props="pageId:'questions', iconClass:'rftIcon rftIconQuestion'">Questions</div>
     9                <div data-dojo-type="rft.ui.MenuLink" class="purple bgColorHover" data-dojo-props="pageId:'applications', iconClass: 'rftIcon rftIconApplication'">Applications</div>
     10                <div data-dojo-type="rft.ui.MenuLink" class="red bgColorHover" data-dojo-props="pageId:'dashboards', iconClass: 'rftIcon rftIconDashboard'">Dashboards</div>
    1111            </div>
    1212        </div>
Note: See TracChangeset for help on using the changeset viewer.