Dotclear


Ignore:
Timestamp:
01/28/18 13:16:06 (8 years ago)
Author:
franck <carnet.franck.paul@…>
Branch:
default
Message:

Focus (and visually show) the subhash if possible

File:
1 edited

Legend:

Unmodified
Added
Removed

  • admin/style/scss/partials/_forms.scss

    r3685 r3690  
    1 input[type=text], 
    2 input[type=password], 
    3 input[type=submit], 
    4 input[type=button], 
    5 input[type=reset], 
    6 a.button, 
    7 button, 
    8 textarea, 
    9 select, 
     1input[type=text], input[type=password], input[type=submit], input[type=button], input[type=reset], a.button, button, textarea, select, legend { 
     2  max-width: 100%; 
     3} 
     4input[type=text], input[type=password], input[type=submit], input[type=button], input[type=reset], a.button, button, textarea, legend { 
     5  border-radius: 3px; 
     6} 
     7form { 
     8  display: block; 
     9  margin: 0; 
     10  padding: 0; 
     11} 
     12fieldset { 
     13  display: block; 
     14  margin: 1em 0; 
     15  padding: 1em 0.5em; 
     16  border-width: 1px 0; 
     17  border-style: solid; 
     18  border-color: #ccc; 
     19  background: #f7f7f7; 
     20  &:focus-within { 
     21    background-color: #eee; 
     22  } 
     23} 
     24input[type=text], textarea { 
     25  font-family: $sans-serif-input; 
     26  font-size: 100%; 
     27} 
    1028legend { 
    11      max-width: 100%; 
    12 } 
    13  
    14 input[type=text], 
    15 input[type=password], 
    16 input[type=submit], 
    17 input[type=button], 
    18 input[type=reset], 
    19 a.button, 
    20 button, 
    21 textarea, 
    22 legend { 
    23      border-radius: 3px; 
    24 } 
    25  
    26 form { 
    27      display: block; 
    28      margin: 0; 
    29      padding: 0; 
    30 } 
    31  
    32 fieldset { 
    33      display: block; 
    34      margin: 1em 0; 
    35      padding: 1em 0.5em; 
    36      border-width: 1px 0; 
    37      border-style: solid; 
    38      border-color: #ccc; 
    39      background: #f7f7f7; 
    40      &:focus-within { 
    41           background-color: #eee; 
    42      } 
    43 } 
    44  
    45 input[type=text], 
     29  padding: 0.2em 0.6em; 
     30  border-width: 1px; 
     31  border-style: solid; 
     32  border-color: #676e78; 
     33  background: #fff; 
     34  margin-bottom: 0.5em; 
     35} 
     36label .maximal, textarea.maximal, input.maximal, select.maximal { 
     37  width: 99%; 
     38} 
     39input.invalid, textarea.invalid, select.invalid, input:not([type=file]):invalid:not(:focus) { 
     40  color: #900; 
     41  box-shadow: 0 0 0 3px rgba(218, 62, 90, 0.3); 
     42} 
     43input.invalid, textarea.invalid, input:not([type=file]):invalid:not(:focus) { 
     44  border: 1px solid red; 
     45  background: #FFBABA; 
     46} 
     47input[type=text], input[type=password], textarea, select, input:not([type=file]):invalid, input:not([type=file]):invalid:placeholder-shown { 
     48  color: #000; 
     49  box-shadow: 1px 1px 2px #f3f3f3 inset; 
     50  padding: 3px; 
     51  vertical-align: top; 
     52} 
     53input[type=text], input[type=password], textarea, input:not([type=file]):invalid, input:not([type=file]):invalid:placeholder-shown { 
     54  background: #fcfcfc; 
     55  border-width: 1px; 
     56  border-style: solid; 
     57  border-color: #dfdfdf; 
     58} 
     59input:focus, textarea:focus { 
     60  border-color: #9bca1c; 
     61} 
    4662textarea { 
    47      font-family: $sans-serif-input; 
    48      font-size: 100%; 
    49 } 
    50  
    51 legend { 
    52      padding: 0.2em 0.6em; 
    53      border-width: 1px; 
    54      border-style: solid; 
    55      border-color: #676e78; 
    56      background: #fff; 
    57      margin-bottom: 0.5em; 
    58 } 
    59  
    60 label .maximal, 
    61 textarea.maximal, 
    62 input.maximal, 
    63 select.maximal { 
    64      width: 99%; 
    65 } 
    66  
    67 input.invalid, 
    68 textarea.invalid, 
    69 select.invalid, 
    70 input:not([type=file]):invalid:not(:focus) { 
    71      color: #900; 
    72      box-shadow: 0 0 0 3px rgba(218, 62, 90, 0.3); 
    73 } 
    74 input.invalid, 
    75 textarea.invalid, 
    76 input:not([type=file]):invalid:not(:focus) { 
    77      border: 1px solid red; 
    78      background: #FFBABA; 
    79 } 
    80  
    81 input[type=text], 
    82 input[type=password], 
    83 textarea, 
    84 select, 
    85 input:not([type=file]):invalid, 
    86 input:not([type=file]):invalid:placeholder-shown { 
    87      color: #000; 
    88      box-shadow: 1px 1px 2px #f3f3f3 inset; 
    89      padding: 3px; 
    90      vertical-align: top; 
    91 } 
    92 input[type=text], 
    93 input[type=password], 
    94 textarea, 
    95 input:not([type=file]):invalid, 
    96 input:not([type=file]):invalid:placeholder-shown { 
    97      background: #fcfcfc; 
    98      border-width: 1px; 
    99      border-style: solid; 
    100      border-color: #dfdfdf; 
    101 } 
    102  
    103 input:focus, 
    104 textarea:focus { 
    105      border-color: #9bca1c; 
    106 } 
    107  
    108 textarea { 
    109      padding: 2px 0; 
    110      &.maximal { 
    111           resize: vertical; 
    112      } 
    113      .area & { 
    114           display: block; 
    115           width: 100%; 
    116           resize: vertical; 
    117      } 
    118 } 
    119  
     63  padding: 2px 0; 
     64  &.maximal { 
     65    resize: vertical; 
     66  } 
     67  .area & { 
     68    display: block; 
     69    width: 100%; 
     70    resize: vertical; 
     71  } 
     72} 
    12073select { 
    121      padding: 2px 0; 
    122      vertical-align: middle; 
    123 } 
    124 @media not all and (min-resolution:.001dpcm) 
    125 { @supports (-webkit-appearance:none) { 
    126      /* Safari 10.1+ only (https://browserstrangeness.bitbucket.io/css_hacks.html#webkit) */ 
    127      select { 
    128           font-size: initial; 
     74  padding: 2px 0; 
     75  vertical-align: middle; 
     76} 
     77@media not all and (min-resolution:.001dpcm) { 
     78  @supports (-webkit-appearance: none) { 
     79    /* Safari 10.1+ only (https://browserstrangeness.bitbucket.io/css_hacks.html#webkit) */ 
     80    select { 
     81      font-size: initial; 
    12982    } 
    130 }} 
    131  
     83  } 
     84} 
    13285select.l10n option { 
    133      padding-left: 16px; 
    134 } 
    135  
     86  padding-left: 16px; 
     87} 
    13688option.avail10n { 
    137      background: transparent url(../images/check-on.png) no-repeat 0 50%; 
    138 } 
    139  
    140 input[type=text], 
    141 input[type=password], 
    142 textarea { 
    143      margin-right: .3em; 
    144 } 
    145  
    146 input[type=checkbox], 
    147 input[type=radio], 
     89  background: transparent url(../images/check-on.png) no-repeat 0 50%; 
     90} 
     91input[type=text], input[type=password], textarea { 
     92  margin-right: .3em; 
     93} 
     94input[type=checkbox], input[type=radio], input[type=file] { 
     95  border: none; 
     96  margin: 0 .33em 0 0; 
     97  padding: 0; 
     98  background: transparent; 
     99} 
     100input+input[type=checkbox] { 
     101  // Used for js expand/hide (lists, options, ...) 
     102  margin-left: .33em; 
     103} 
     104a input { 
     105  // Used for js expand/hide (lists, options, ...) 
     106  margin-right: .33em; 
     107} 
    148108input[type=file] { 
    149      border: none; 
    150      margin: 0 .33em 0 0; 
    151      padding: 0; 
    152      background: transparent; 
    153 } 
    154 input + input[type=checkbox] { 
    155      // Used for js expand/hide (lists, options, ...) 
    156      margin-left: .33em; 
    157 } 
    158 a input { 
    159      // Used for js expand/hide (lists, options, ...) 
    160      margin-right: .33em; 
    161 } 
    162  
    163 input[type=file] { 
    164      margin-top: .3em; 
    165      margin-bottom: .3em; 
    166 } 
    167  
     109  margin-top: .3em; 
     110  margin-bottom: .3em; 
     111} 
    168112optgroup { 
    169      font-weight: bold; 
    170      font-style: normal; 
    171 } 
    172  
     113  font-weight: bold; 
     114  font-style: normal; 
     115} 
    173116option { 
    174      font-weight: normal; 
    175 } 
    176  
    177 label, 
    178 label span { 
    179      display: block; 
    180 } 
    181  
    182 label.ib, 
    183 input.ib { 
    184      display: inline-block; 
    185 } 
    186  
     117  font-weight: normal; 
     118} 
     119label, label span { 
     120  display: block; 
     121} 
     122label.ib, input.ib { 
     123  display: inline-block; 
     124} 
    187125label.classic { 
    188      display: inline; 
    189 } 
    190  
    191 label.classic input, 
    192 label span input, 
    193 label.classic select, 
    194 label span select { 
    195      display: inline; 
    196 } 
    197  
     126  display: inline; 
     127} 
     128label.classic input, label span input, label.classic select, label span select { 
     129  display: inline; 
     130} 
    198131label.required { 
    199      font-weight: bold; 
    200 } 
    201  
     132  font-weight: bold; 
     133} 
    202134label.required abbr { 
    203      color: #900; 
    204      font-size: 1.3em; 
    205 } 
    206  
     135  color: #900; 
     136  font-size: 1.3em; 
     137} 
    207138label.bold { 
    208      text-transform: uppercase; 
    209      font-weight: bold; 
    210      margin-top: 2em; 
    211 } 
    212  
    213 label.area, 
    214 p.area { 
    215      width: inherit !important; 
    216 } 
    217  
     139  text-transform: uppercase; 
     140  font-weight: bold; 
     141  margin-top: 2em; 
     142} 
     143label.area, p.area { 
     144  width: inherit !important; 
     145} 
    218146p.field { 
    219      position: relative; 
    220      label { 
    221           display: inline-block; 
    222           width: 14em; 
    223      } 
    224      &.wide label { 
    225           width: 21em; 
    226      } 
    227      input, 
    228      select { 
    229           display: inline-block; 
    230      } 
    231 } 
    232  
     147  position: relative; 
     148  label { 
     149    display: inline-block; 
     150    width: 14em; 
     151  } 
     152  &.wide label { 
     153    width: 21em; 
     154  } 
     155  input, select { 
     156    display: inline-block; 
     157  } 
     158} 
    233159.form-note, .form-stats { 
    234      font-style: italic; 
    235      font-weight: normal; 
    236      color: #676e78; 
    237 } 
    238  
     160  font-style: italic; 
     161  font-weight: normal; 
     162  color: #676e78; 
     163} 
    239164p.form-note, p.form-stats { 
    240      margin-top: -.7em; 
    241 } 
    242  
     165  margin-top: -.7em; 
     166} 
    243167span.form-note, span.form-stats { 
    244      text-transform: none; 
    245 } 
    246  
     168  text-transform: none; 
     169} 
    247170.missing { 
    248171  background-color: inherit; 
    … …  
    261184  } 
    262185} 
    263  
     186.focus { 
     187  background-color: inherit; 
     188  animation-name: kf-focus; 
     189  animation-duration: 1s; 
     190} 
     191@keyframes kf-focus { 
     192  0% { 
     193    background-color: inherit; 
     194  } 
     195  50% { 
     196    background-color: #ccff00; 
     197  } 
     198  100% { 
     199    background-color: inherit; 
     200  } 
     201} 
    264202// .more-info Additional information on fieldset, field, … (may be hide from user-prefs) 
    265203.more-info {} 
    266  
    267204.no-more-info { 
    268      display: none; 
    269 } 
     205  display: none; 
     206} 
Note: See TracChangeset for help on using the changeset viewer.

Sites map