Ignore:
Timestamp:
08/20/14 09:10:24 (10 years ago)
Author:
Twan Goosen
Message:

Styling of the wizard
Refs #594

File:
1 edited

Legend:

Unmodified
Added
Removed

  • VirtualCollectionRegistry/trunk/VirtualCollectionRegistry/src/main/webapp/css/_wizard.scss

    r5572 r5574  
    1616*/
    1717
    18 div.wizard .wicketExtensionsWizardHeaderTitle {
    19     padding: 0px 10px;
    20     font-size: 16px;
    21     font-weight: bold;
    22 }
    23 
    24 div.wizard .wicketExtensionsWizardHeaderSummary {
    25     padding: 5px 10px 0 10px;
    26     font-style: italics;
    27 }
    28 
    29 div.wizard .wizardHeader {
    30     border-bottom: 1px solid #000000;
    31     margin: 0 0 10px 0;
    32     padding: 0 0 10px 0;
     18div.wizard {
     19
     20    .wicketExtensionsWizardHeaderTitle {
     21        padding: 0px 10px;
     22        font-size: 16px;
     23        font-weight: bold;
     24    }
     25
     26    .wicketExtensionsWizardHeaderSummary {
     27        padding: 5px 10px 0 10px;
     28        font-style: italics;
     29    }
     30
     31    .wizardHeader {
     32        border-bottom: 1px solid #000000;
     33        margin: 0 0 10px 0;
     34        padding: 0 0 10px 0;
     35    }
     36
     37    .wizardFeedback {
     38        // redundant because of global feedback, suppress
     39        display: none !important;
     40    }
     41
    3342}
    3443
    … …  
    6574}
    6675
     76$help-icon-size: 16px;
     77
    6778form.wizard .extrainfo a.extrainfotoggle {
    6879    display: inline-block;
    6980    float: right;
    7081    vertical-align: top;
    71     width: 16px;
    72     height: 16px;
    73     background-image: url(help-128.png); /* from http://www.iconsdb.com/ */
    74     background-size: 16px 16px;
     82    width: $help-icon-size;
     83    height: $help-icon-size;
     84    /* icon from GLYPHICONS.com */
     85    background-image: url(../icons/glyphicons_194_circle_question_mark.png);
     86    background-size: $help-icon-size;
    7587    background-repeat: no-repeat;
    7688}
    7789
    78 form.wizard .extrainfo a.extrainfotoggle span {
    79     display: none;
    80 }
    81 
    82 form.wizard div.notes, form.wizard div.sidenotes {
    83     display: inline-block;
    84     height: auto;
    85     padding: 5px;
    86     border: 1px solid #666666;
    87     background-color: #ffffe1;
    88     color: #666666;
    89 }
    90 
    91 form.wizard div.notes {
    92     width: 80%;
    93     margin: 0 0 10px 70px;
    94 }
    95 
    96 form.wizard div.sidenotes {
    97     float: right;
    98     width: 198px;
    99     margin: 0 0 10px 10px;
    100 }
    101 
    102 form.wizard div.notes h4 {
    103     /*
    104     background-image: url(/images/icon_info.gif);
    105     background-repeat: no-repeat;
    106     background-position: top left;
    107     */
    108     text-align: center;
    109     padding: 3px 0 3px 0; /*27px; */
    110     margin: 0 0 3px 0;
    111     border-width: 0 0 1px 0;
    112     border-style: solid;
    113     border-color: #666666;
    114     color: #666666;
    115     font-size: 100%;
    116 }
    117 
    118 form.wizard div.notes p {
    119     margin: 0em 0em 0.5em 0em;
    120     color: #666666;
    121     font-size: 80%;
    122 }
    123 
    124 form.wizard div.notes p.last {
    125     margin: 0em;
    126 }
    127 
    128 form.wizard div label {
    129     display: block;
    130     float: left;
    131     width: 140px;
    132     padding: 3px 10px;
    133     margin: 0 0 5px 0;
    134     text-align: right;
    135     font-weight: normal;
     90form.wizard {
     91
     92    .extrainfo a.extrainfotoggle span {
     93        display: none;
     94    }
     95
     96    div.notes, div.sidenotes {
     97        display: inline-block;
     98        height: auto;
     99        padding: 5px;
     100        border: 1px solid #666666;
     101        background-color: #ffffe1;
     102        color: #666666;
     103    }
     104
     105    div.notes {
     106        width: 80%;
     107        margin: 0 0 10px 70px;
     108    }
     109
     110    div.sidenotes {
     111        float: right;
     112        width: 198px;
     113        margin: 0 0 10px 10px;
     114    }
     115
     116    div.notes h4 {
     117        /*
     118        background-image: url(/images/icon_info.gif);
     119        background-repeat: no-repeat;
     120        background-position: top left;
     121        */
     122        text-align: center;
     123        padding: 3px 0 3px 0; /*27px; */
     124        margin: 0 0 3px 0;
     125        border-width: 0 0 1px 0;
     126        border-style: solid;
     127        border-color: #666666;
     128        color: #666666;
     129        font-size: 100%;
     130    }
     131
     132    div.notes p {
     133        margin: 0em 0em 0.5em 0em;
     134        color: #666666;
     135        font-size: 80%;
     136    }
     137
     138    div.notes p.last {
     139        margin: 0em;
     140    }
     141
     142    div label {
     143        display: block;
     144        float: left;
     145        width: 140px;
     146        padding: 3px 10px;
     147        margin: 0 0 5px 0;
     148        text-align: right;
     149        font-weight: normal;
     150    }
     151
     152
     153    textarea {
     154        font-family: Verdana, sans-serif;
     155        font-size: 100%;
     156        width: 570px;
     157        overflow: auto;
     158        margin-bottom: 5px;
     159    }
     160
     161    .wizardButtons {
     162        border-top: 1px solid #000000;
     163        margin: 10px 0 0 0;
     164        clear: both;
     165    }
     166
     167    .buttonbar {
     168        margin: 10px 220px 0 0;
     169        padding: 0 10px 0 0;
     170        text-align: right;
     171    }
     172} //form.wizard
     173
     174
     175form.wizard .buttonbar, div.modalDialog div.modalDialogButtons {
     176
     177    input.button:hover {
     178        color: #AE0000;
     179        background-color: #E9EEF7;
     180    }
     181
     182    input.button[disabled],input.button[disabled]:hover {
     183        color: #AFAFAF;
     184        border-color: #EFEFEF;
     185    }
    136186}
    137187
    … …  
    139189label.required {
    140190    font-weight: bold !important;
    141 }
    142 
    143 form.wizard textarea {
    144     font-family: Verdana, sans-serif;
    145     font-size: 100%;
    146     width: 570px;
    147     overflow: auto;
    148     margin-bottom: 5px;
    149 }
    150 
    151 form.wizard .wizardButtons {
    152     border-top: 1px solid #000000;
    153     margin: 10px 0 0 0;
    154     clear: both;
    155 }
    156 
    157 form.wizard .buttonbar {
    158     margin: 10px 220px 0 0;
    159     padding: 0 10px 0 0;
    160     text-align: right;
    161 }
    162 
    163 form.wizard .buttonbar input.button:hover,
    164 div.modalDialog div.modalDialogButtons input.button:hover {
    165     color: #AE0000;
    166     background-color: #E9EEF7;
    167 }
    168 
    169 form.wizard .buttonbar  input.button[disabled],
    170 form.wizard .buttonbar  input.button[disabled]:hover,
    171 div.modalDialog div.modalDialogButtons input.button[disabled],
    172 div.modalDialog div.modalDialogButtons input.button[disabled]:hover {
    173     color: #AFAFAF;
    174     border-color: #EFEFEF;
    175191}
    176192
    … …  
    181197    margin: 0;
    182198    padding: 0;
    183 }
    184 
    185 div.modalDialog div.modalDialogContent {
    186     margin: 10px;
    187 }
    188 
    189 div.modalDialog div.modalDialogContent p {
    190     margin: 1em;
    191 }
    192 
    193 div.modalDialog div.modalDialogButtons {
    194     border-top: 1px solid #BBBBBB;
    195     margin: 0 5px 5px 5px;
    196     padding: 5px 0 0 0;
    197     text-align: center;
    198 }
     199
     200    div.modalDialogContent {
     201        margin: 10px;
     202       
     203        p {
     204            margin: 1em;
     205        }
     206    }
     207
     208    div.modalDialogButtons {
     209        border-top: 1px solid #BBBBBB;
     210        margin: 0 5px 5px 5px;
     211        padding: 5px 0 0 0;
     212        text-align: center;
     213    }
     214}
     215
    199216
    200217div.confirmationDialog {
    … …  
    221238}
    222239
    223 
    224240/*
    225241 * dialog customizations
    226242 */
    227 div.editCreatorDialog  fieldset label {
    228     width: 90px;
    229 }
    230 
    231 div.editCreatorDialog fieldset input,
    232 div.editCreatorDialog fieldset textarea {
    233     width: 255px;
    234 }
    235 
    236 div.editResourceDialog fieldset label {
    237     width: 70px;
    238 }
    239 
    240 div.editResourceDialog fieldset input,
    241 div.editResourceDialog fieldset textarea {
    242     width: 475px;
    243 }
    244 
    245 div.addResourcesDialog fieldset label {
    246     width: 85px;
    247 }
    248 
    249 div.addResourcesDialog fieldset input,
    250 div.addResourcesDialog fieldset textarea {
    251     width: 460px;
     243div.editCreatorDialog fieldset {
     244
     245    label {
     246        width: 7em;
     247    }
     248
     249    input, textarea {
     250        width: 17em;
     251    }
     252}
     253
     254div.editResourceDialog fieldset {
     255
     256    label {
     257        width: 6em;
     258    }
     259
     260    input, textarea {
     261        width: 30em;
     262    }
     263}
     264
     265div.addResourcesDialog fieldset {
     266
     267    label {
     268        width: 6em;
     269    }
     270
     271    input, textarea {
     272        width: 30em;
     273    }
    252274}
    253275
    254276div.addKeywordDialog fieldset input {
    255     width: 285px;
     277    width: 20em;
    256278}
    257279
    … …  
    268290    margin-left: 160px;
    269291    padding: 3px 0;
    270 }
    271 
    272 div.keywordsList div {
    273     clear: none;
    274 }
    275 
    276 div.keywordsList ul {
    277     list-style-type: square;
    278     margin: 0;
    279     padding: 0 0 0 16px;
    280 }
    281 
    282 div.keywordsList ul li {
    283     margin-top: 2px;
    284 }
    285 
    286 div.keywordsList ul li.first {
    287     margin-top: 0;
    288 }
     292
     293
     294    div {
     295        clear: none;
     296    }
     297
     298    ul {
     299        list-style-type: square;
     300        margin: 0;
     301        padding: 0 0 0 16px;
     302
     303        li {
     304            margin-top: 2px;
     305        }
     306
     307        li.first {
     308            margin-top: 0;
     309        }
     310    }
     311}
     312
    289313
    290314input.button {
Note: See TracChangeset for help on using the changeset viewer.