universe

Universe
git clone https://git.dasho.dev/universe.git
Log | Files | Refs | Submodules | README

colour-picker.css (4028B)

      1 .colorPicker {
      2  display: block;
      3  max-width: 500px;
      4  width: 100%;
      5  position: relative;
      6  font-size: 0;
      7  margin-bottom: 15px;
      8 }
      9 
     10 .colorPicker > input[type="radio"] {
     11  position: absolute;
     12  margin: 0;
     13  padding: 0;
     14  width: calc(100% / 5);
     15  height: calc(100% / 3);
     16  cursor: pointer;
     17  opacity: 0;
     18  z-index: 5;
     19 }
     20 
     21 .colorPicker > .colors {
     22  display: block;
     23  width: 100%;
     24 }
     25 
     26 .colorPicker > .colors > .item {
     27  display: inline-block;
     28  vertical-align: top;
     29  width: calc(100% / 5);
     30  padding-bottom: calc(100% / 5);
     31  position: relative;
     32 }
     33 
     34 .colorPicker > input[type="radio"][value="1"] {
     35  top: 0;
     36  left: 0;
     37 }
     38 
     39 .colorPicker > input[type="radio"][value="2"] {
     40  top: 0;
     41  left: calc(100% / 5 * 1);
     42 }
     43 
     44 .colorPicker > input[type="radio"][value="3"] {
     45  top: 0;
     46  left: calc(100% / 5 * 2);
     47 }
     48 
     49 .colorPicker > input[type="radio"][value="4"] {
     50  top: 0;
     51  left: calc(100% / 5 * 3);
     52 }
     53 
     54 .colorPicker > input[type="radio"][value="5"] {
     55  top: 0;
     56  left: calc(100% / 5 * 4);
     57 }
     58 
     59 .colorPicker > input[type="radio"][value="6"] {
     60  top: calc(100% / 3 * 1);
     61  left: 0;
     62 }
     63 
     64 .colorPicker > input[type="radio"][value="7"] {
     65  top: calc(100% / 3 * 1);
     66  left: calc(100% / 5 * 1);
     67 }
     68 
     69 .colorPicker > input[type="radio"][value="8"] {
     70  top: calc(100% / 3 * 1);
     71  left: calc(100% / 5 * 2);
     72 }
     73 
     74 .colorPicker > input[type="radio"][value="9"] {
     75  top: calc(100% / 3 * 1);
     76  left: calc(100% / 5 * 3);
     77 }
     78 
     79 .colorPicker > input[type="radio"][value="10"] {
     80  top: calc(100% / 3 * 1);
     81  left: calc(100% / 5 * 4);
     82 }
     83 
     84 .colorPicker > input[type="radio"][value="11"] {
     85  top: calc(100% / 3 * 2);
     86  left: 0;
     87 }
     88 
     89 .colorPicker > input[type="radio"][value="12"] {
     90  top: calc(100% / 3 * 2);
     91  left: calc(100% / 5 * 1);
     92 }
     93 
     94 .colorPicker > input[type="radio"][value="13"] {
     95  top: calc(100% / 3 * 2);
     96  left: calc(100% / 5 * 2);
     97 }
     98 
     99 .colorPicker > input[type="radio"][value="14"] {
    100  top: calc(100% / 3 * 2);
    101  left: calc(100% / 5 * 3);
    102 }
    103 
    104 .colorPicker > input[type="radio"][value="15"] {
    105  top: calc(100% / 3 * 2);
    106  left: calc(100% / 5 * 4);
    107 }
    108 
    109 .colorPicker
    110  > input[type="radio"][value="1"]:checked
    111  ~ .colors
    112  > .item:nth-child(1):after {
    113  display: block;
    114 }
    115 
    116 .colorPicker
    117  > input[type="radio"][value="2"]:checked
    118  ~ .colors
    119  > .item:nth-child(2):after {
    120  display: block;
    121 }
    122 
    123 .colorPicker
    124  > input[type="radio"][value="3"]:checked
    125  ~ .colors
    126  > .item:nth-child(3):after {
    127  display: block;
    128 }
    129 
    130 .colorPicker
    131  > input[type="radio"][value="4"]:checked
    132  ~ .colors
    133  > .item:nth-child(4):after {
    134  display: block;
    135 }
    136 
    137 .colorPicker
    138  > input[type="radio"][value="5"]:checked
    139  ~ .colors
    140  > .item:nth-child(5):after {
    141  display: block;
    142 }
    143 
    144 .colorPicker
    145  > input[type="radio"][value="6"]:checked
    146  ~ .colors
    147  > .item:nth-child(6):after {
    148  display: block;
    149 }
    150 
    151 .colorPicker
    152  > input[type="radio"][value="7"]:checked
    153  ~ .colors
    154  > .item:nth-child(7):after {
    155  display: block;
    156 }
    157 
    158 .colorPicker
    159  > input[type="radio"][value="8"]:checked
    160  ~ .colors
    161  > .item:nth-child(8):after {
    162  display: block;
    163 }
    164 
    165 .colorPicker
    166  > input[type="radio"][value="9"]:checked
    167  ~ .colors
    168  > .item:nth-child(9):after {
    169  display: block;
    170 }
    171 
    172 .colorPicker
    173  > input[type="radio"][value="10"]:checked
    174  ~ .colors
    175  > .item:nth-child(10):after {
    176  display: block;
    177 }
    178 
    179 .colorPicker
    180  > input[type="radio"][value="11"]:checked
    181  ~ .colors
    182  > .item:nth-child(11):after {
    183  display: block;
    184 }
    185 
    186 .colorPicker
    187  > input[type="radio"][value="12"]:checked
    188  ~ .colors
    189  > .item:nth-child(12):after {
    190  display: block;
    191 }
    192 
    193 .colorPicker
    194  > input[type="radio"][value="13"]:checked
    195  ~ .colors
    196  > .item:nth-child(13):after {
    197  display: block;
    198 }
    199 
    200 .colorPicker
    201  > input[type="radio"][value="14"]:checked
    202  ~ .colors
    203  > .item:nth-child(14):after {
    204  display: block;
    205 }
    206 
    207 .colorPicker
    208  > input[type="radio"][value="15"]:checked
    209  ~ .colors
    210  > .item:nth-child(15):after {
    211  display: block;
    212 }