1.colorswatch { 2 display: inline-block; 3 vertical-align: top; 4 margin: 0.3rem; 5 6 /* sizes etc. as CSS variables */ 7 --tiny-height: 1; 8 --tiny-width: 2; 9 --small-height: 4; 10 --small-width: 6; 11 --middle-height: 6; 12 --middle-width: 8; 13 --large-height: 8; 14 --large-width: 10; 15 16 --ratio: 0.66; 17} 18 19.colorswatch.colorswatch_tiny { 20 min-height: calc(var(--tiny-height) * 1rem); 21 min-width: calc(var(--tiny-width) * 1rem); 22} 23 24.colorswatch.colorswatch_tiny .colorswatch_swatch { 25 height: calc(var(--ratio) * var(--tiny-height) * 1rem); 26} 27 28.colorswatch.colorswatch_small { 29 min-height: calc(var(--small-height) * 1rem); 30 min-width: calc(var(--small-width) * 1rem); 31} 32 33.colorswatch.colorswatch_small .colorswatch_swatch { 34 height: calc(var(--ratio) * var(--small-height) * 1rem); 35} 36 37.colorswatch.colorswatch_middle { 38 min-height: calc(var(--middle-height) * 1rem); 39 min-width: calc(var(--middle-width) * 1rem); 40} 41 42.colorswatch.colorswatch_middle .colorswatch_swatch { 43 height: calc(var(--ratio) * var(--middle-height) * 1rem); 44} 45 46.colorswatch.colorswatch_large { 47 min-height: calc(var(--large-height) * 1rem); 48 min-width: calc(var(--large-width) * 1rem); 49} 50 51.colorswatch.colorswatch_large .colorswatch_swatch { 52 height: calc(var(--ratio) * var(--large-height) * 1rem); 53} 54 55.colorswatch .colorswatch_swatch { 56 width: 100%; 57 border-radius: 0.3rem; 58} 59 60.colorswatch .colorswatch_info { 61 width: 100%; 62 height: 34%; 63 font-size: 85%; 64 text-align: center; 65 padding: 0.3rem 0 0; 66} 67