Ignore:
Timestamp:
03/23/14 22:58:54 (11 years ago)
Author:
hendrikvanantwerpen
Message:
  • Added grey icons for better highlighting, synced block and large buttons.
  • Introduced extra color for text, now disabled/inactive/hovered -> it's not very clear though.
  • Added confirmation on irrevertable actions.
  • Added support for query string in our new request implementation.
Location:
Dev/trunk/src/client/qed-client/css
Files:
8 added
6 edited

Legend:

Unmodified
Added
Removed

  • Dev/trunk/src/client/qed-client/css/icons.less

    r443 r529  
    11#rft {
    2         &.claro {
    3                 .rftIcon {
    4                         .noOffset;
    5                         float: left;
    6                         display: inline-block;
    7                         border: none;
    8                         background-color: transparent;
    9                         background-repeat: no-repeat;
    10                 }
    11         }
     2    &.claro {
     3       
     4    .rftIcon {
     5            .noOffset;
     6            float: left;
     7            display: inline-block;
     8            border: none;
     9            background-color: transparent;
     10            background-repeat: no-repeat;
     11        }
     12    }
    1213
    13         .rftIconApplication {
    14                 background-position: 0px 0px;
    15         }
    16         .rftIconDashboard {
    17                 background-position: -32px 0px;
    18         }
    19         .rftIconSession {
    20                 background-position: -64px 0px;
    21         }
    22         .rftIconSessionActive {
    23                 background-position: -96px 0px;
    24         }
    25         .rftIconSessionTemplate {
    26                 background-position: -128px 0px;
    27         }
    28         .rftIconSurvey {
    29                 background-position: -160px 0px;
    30         }
    31         .rftIconQuestion {
    32                 background-position: -192px 0px;
    33         }
    34         .rftIconQuestionFill {
    35                 background-position: -224px 0px;
    36         }
    37         .rftIconRespondent {
    38                 background-position: -256px 0px;
    39         }
    40         .rftIconAnswer {
    41                 background-position: -288px 0px;
    42         }
    43         .rftIconAnswerSet {
    44                 background-position: -320px 0px;
    45         }
    46         .rftIconGameData {
    47                 background-position: -352px 0px;
    48         }
    49         .rftIconUser {
    50                 background-position: -384px 0px;
    51         }
    52                 //Actions
    53         .rftIconAccept {
    54                 background-position: -416px 0px;
    55         }
    56         .rftIconCancel {
    57                 background-position: -448px 0px;
    58         }
    59         .rftIconPlus {
    60                 background-position: -480px 0px;
    61         }
    62         .rftIconMinus {
    63                 background-position: -512px 0px;
    64         }
    65         .rftIconIncrease {
    66                 background-position: -544px 0px;
    67         }
    68         .rftIconDecrease {
    69                 background-position: -576px 0px;
    70         }
    71         .rftIconDelete {
    72                 background-position: -608px 0px;
    73         }
    74         .rftIconHome {
    75                 background-position: -640px 0px;
    76         }
    77         .rftIconPreview {
    78                 background-position: -672px 0px;
    79         }
    80         .rftIconSave {
    81                 background-position: -704px 0px;
    82         }
    83         .rftIconDiscard {
    84                 background-position: -736px 0px;
    85         }
    86         .rftIconProperties {
    87                 background-position: -768px 0px;
    88         }
    89         .rftIconUndo {
    90                 background-position: -800px 0px;
    91         }
    92         .rftIconRedo {
    93                 background-position: -832px 0px;
    94         }
    95         .rftIconBack {
    96                 background-position: -864px 0px;
    97         }
    98         .rftIconForward {
    99                 background-position: -896px 0px;
    100         }
    101         .rftIconRefresh {
    102                 background-position: -928px 0px;
    103         }
    104         .rftIconHelp {
    105                 background-position: -960px 0px;
    106         }
    107         .rftIconInspect {
    108                 background-position: -992px 0px;
    109         }
    110         .rftIconTag {
    111                 background-position: -1024px 0px;
    112         }
    113         .rftIconImage {
    114                 background-position: -1056px 0px;
    115         }
    116         .rftIconEdit {
    117                 background-position: -1088px 0px;
    118         }
    119         .rftIconLock {
    120                 background-position: -1120px 0px;
    121         }
    122         .rftIconUnlock {
    123                 background-position: -1152px 0px;
    124         }
    125         .rftIconPreset {
    126                 background-position: -1184px 0px;
    127         }
    128         .rftIconTextBlock {
    129                 background-position: -1216px 0px;
    130         }
    131         .rftIconPageBreak {
    132                 background-position: -1248px 0px;
    133         }
    134         .rftIconExternal {
    135                 background-position: -1280px 0px;
    136         }
    137         .rftIconInput {
    138                 background-position: -1312px 0px;
    139         }
    140         .rftIconPublish {
    141                 background-position: -1344px 0px;
    142         }
    143         //Arrows
    144         .rftIconFullArrowUp {
    145                 background-position: -1696px 0px;
    146         }
    147         .rftIconFullArrowDown {
    148                 background-position: -1728px 0px;
    149         }
    150         .rftIconFullArrowLeft {
    151                 background-position: -1760px 0px;
    152         }
    153         .rftIconFullArrowRight {
    154                 background-position: -1792px 0px;
    155         }
    156         .rftIconHalfArrowUp {
    157                 background-position: -1824px 0px;
    158         }
    159         .rftIconHalfArrowDown {
    160                 background-position: -1856px 0px;
    161         }
    162         .rftIconHalfArrowLeft {
    163                 background-position: -1888px 0px;
    164         }
    165         .rftIconHalfArrowRight {
    166                 background-position: -1920px 0px;
    167         }
     14    .rftIconApplication {
     15        background-position: 0px 0px;
     16    }
     17    .rftIconDashboard {
     18        background-position: -32px 0px;
     19    }
     20    .rftIconSession {
     21        background-position: -64px 0px;
     22    }
     23    .rftIconSessionActive {
     24        background-position: -96px 0px;
     25    }
     26    .rftIconSessionTemplate {
     27        background-position: -128px 0px;
     28    }
     29    .rftIconSurvey {
     30        background-position: -160px 0px;
     31    }
     32    .rftIconQuestion {
     33        background-position: -192px 0px;
     34    }
     35    .rftIconQuestionFill {
     36        background-position: -224px 0px;
     37    }
     38    .rftIconRespondent {
     39        background-position: -256px 0px;
     40    }
     41    .rftIconAnswer {
     42        background-position: -288px 0px;
     43    }
     44    .rftIconAnswerSet {
     45        background-position: -320px 0px;
     46    }
     47    .rftIconGameData {
     48        background-position: -352px 0px;
     49    }
     50    .rftIconUser {
     51        background-position: -384px 0px;
     52    }
     53        //Actions
     54    .rftIconAccept {
     55        background-position: -416px 0px;
     56    }
     57    .rftIconCancel {
     58        background-position: -448px 0px;
     59    }
     60    .rftIconPlus {
     61        background-position: -480px 0px;
     62    }
     63    .rftIconMinus {
     64        background-position: -512px 0px;
     65    }
     66    .rftIconIncrease {
     67        background-position: -544px 0px;
     68    }
     69    .rftIconDecrease {
     70        background-position: -576px 0px;
     71    }
     72    .rftIconDelete {
     73        background-position: -608px 0px;
     74    }
     75    .rftIconHome {
     76        background-position: -640px 0px;
     77    }
     78    .rftIconPreview {
     79        background-position: -672px 0px;
     80    }
     81    .rftIconSave {
     82        background-position: -704px 0px;
     83    }
     84    .rftIconDiscard {
     85        background-position: -736px 0px;
     86    }
     87    .rftIconProperties {
     88        background-position: -768px 0px;
     89    }
     90    .rftIconUndo {
     91        background-position: -800px 0px;
     92    }
     93    .rftIconRedo {
     94        background-position: -832px 0px;
     95    }
     96    .rftIconBack {
     97        background-position: -864px 0px;
     98    }
     99    .rftIconForward {
     100        background-position: -896px 0px;
     101    }
     102    .rftIconRefresh {
     103        background-position: -928px 0px;
     104    }
     105    .rftIconHelp {
     106        background-position: -960px 0px;
     107    }
     108    .rftIconInspect {
     109        background-position: -992px 0px;
     110    }
     111    .rftIconTag {
     112        background-position: -1024px 0px;
     113    }
     114    .rftIconImage {
     115        background-position: -1056px 0px;
     116    }
     117    .rftIconEdit {
     118        background-position: -1088px 0px;
     119    }
     120    .rftIconLock {
     121        background-position: -1120px 0px;
     122    }
     123    .rftIconUnlock {
     124        background-position: -1152px 0px;
     125    }
     126    .rftIconPreset {
     127        background-position: -1184px 0px;
     128    }
     129    .rftIconTextBlock {
     130        background-position: -1216px 0px;
     131    }
     132    .rftIconPageBreak {
     133        background-position: -1248px 0px;
     134    }
     135    .rftIconExternal {
     136        background-position: -1280px 0px;
     137    }
     138    .rftIconInput {
     139        background-position: -1312px 0px;
     140    }
     141    .rftIconPublish {
     142        background-position: -1344px 0px;
     143    }
     144    //Arrows
     145    .rftIconFullArrowUp {
     146        background-position: -1696px 0px;
     147    }
     148    .rftIconFullArrowDown {
     149        background-position: -1728px 0px;
     150    }
     151    .rftIconFullArrowLeft {
     152        background-position: -1760px 0px;
     153    }
     154    .rftIconFullArrowRight {
     155        background-position: -1792px 0px;
     156    }
     157    .rftIconHalfArrowUp {
     158        background-position: -1824px 0px;
     159    }
     160    .rftIconHalfArrowDown {
     161        background-position: -1856px 0px;
     162    }
     163    .rftIconHalfArrowLeft {
     164        background-position: -1888px 0px;
     165    }
     166    .rftIconHalfArrowRight {
     167        background-position: -1920px 0px;
     168    }
    168169}

  • Dev/trunk/src/client/qed-client/css/mixins.less

    r443 r529  
    6767        .setIconSize(@size, "");
    6868}
     69.setIcon (@size, grey) {
     70        .setIconSize(@size, "g");
     71}
    6972.setIcon (@size) {
    7073        .setIconSize(@size, "");

  • Dev/trunk/src/client/qed-client/css/qed.less

    r513 r529  
    1515@import "fonts.less";
    1616@import "icons.less";
     17@import "loading.less";
    1718@import "layout.less";
    1819@import "forms.less";

  • Dev/trunk/src/client/qed-client/css/variables.less

    r492 r529  
    66@headers: #999999;
    77@text: #ffffff;
     8@inactivetext: #aaaaaa;
    89@disabledtext: #777777;
    910

  • Dev/trunk/src/client/qed-client/css/widgets/BlockButton.less

    r492 r529  
    55    height: @button_block_height;
    66    vertical-align: top;
    7     color: @text;
     7    color: @inactivetext;
    88
    99    &.dijitDisabled {
    1010        color: @disabledtext;
     11    }
     12
     13    &.dijitHover {
     14        color: @text;
    1115    }
    1216
    … …  
    3034
    3135        .rftIcon {
    32             .setIcon(16px);
     36            .setIcon(16px, grey);
    3337        }
    3438    }
    … …  
    3943        .rftIcon {
    4044            vertical-align: top;
    41             .setIcon(16px, black);
     45            .setIcon(16px, white);
    4246        }
    4347    }

  • Dev/trunk/src/client/qed-client/css/widgets/LargeButton.less

    r492 r529  
    77        height: @button_large_height;
    88        padding: 3px;
    9         color: @text;
     9        color: @inactivetext;
    1010
    1111        &*, * {
    … …  
    2020        }
    2121
     22        &.dijitHover {
     23            color: @text;
     24        }
     25
    2226        .dijitButtonNode {
    2327
    … …  
    3034
    3135            .rftIcon {
    32                 .setIcon(24px);
     36                .setIcon(24px, grey);
    3337            }
    3438
    … …  
    4549        }
    4650
    47         &.rftLargeButtonHover .dijitButtonNode,
    48         &.rftLargeButtonActive .dijitButtonNode {
     51        &.rftLargeButtonHover,
     52        &.rftLargeButtonActive {
    4953            .transition (0.1s);
     54            .rftIcon {
     55                vertical-align: top;
     56                .setIcon(24px, white);
     57            }
    5058        }
    5159    }
Note: See TracChangeset for help on using the changeset viewer.