.make-palette(@color, @index: 1) when (@index <= 10) { .palette-@{color}-@{index} { @background: '@{color}-@{index}'; background: @@background; } .make-palette(@color, (@index + 1)); // next iteration } @gray-1: #fff; @gray-2: #fafafa; @gray-3: #f5f5f5; @gray-4: #f0f0f0; @gray-5: #d9d9d9; @gray-6: #bfbfbf; @gray-7: #8c8c8c; @gray-8: #595959; @gray-9: #434343; @gray-10: #262626; @gray-11: #1f1f1f; @gray-12: #141414; @gray-13: #000; @border-color: rgba(229, 231, 235, 100); .color-palettes { margin: 0 1%; &-dark { margin: 0; padding: 0 28px; background-color: #141414; .color-title { color: fade(@white, 85); } .color-description { color: fade(@white, 45); } .color-palette { margin: 45px 3.5% 45px 0; &:nth-of-type(3n) { margin-right: 0; } .main-color-item { margin-right: 0; &:hover { margin-right: -8px; } } } } } .color-palette { display: inline-block; width: 31%; margin: 45px 1%; &-pick { margin: 0 0 20px; font-size: 20px; text-align: center; } &-picker { margin: 24px 0; &-value { position: relative; top: -3px; margin-left: 16px; font-size: 14px; font-family: Consolas, sans-serif; } &-validation { position: relative; top: -3px; margin-left: 16px; color: @error-color; font-size: 13px; &-dark { margin-left: 0; } } } } .main-color { .make-palette(blue); .make-palette(purple); .make-palette(cyan); .make-palette(green); .make-palette(magenta); .make-palette(red); .make-palette(volcano); .make-palette(orange); .make-palette(gold); .make-palette(yellow); .make-palette(lime); .make-palette(geekblue); .make-palette(gray); .palette-gray-11 { background: @gray-11; } .palette-gray-12 { background: @gray-12; } .palette-gray-13 { background: @gray-13; } text-align: left; &-item { position: relative; height: 44px; margin-right: 4px; padding: 0 12px; font-size: 14px; font-family: Consolas, sans-serif; line-height: 44px; cursor: pointer; transition: all 0.2s; &:first-child { border-radius: 4px 4px 0 0; } &:last-child { border-radius: 0 0 4px 4px; } &:hover { margin-right: -8px; border-radius: 0 4px 4px 0; } } &-item &-text { float: left; transition: all 0.3s; } &-item &-value { position: relative; left: 3px; float: right; transform: scale(0.85); transform-origin: 100% 50%; opacity: 0; transition: all 0.3s; } } .color-title { margin: 0 0 24px; color: #5c6b77; font-weight: 500; font-size: 22px; text-align: center; text-transform: capitalize; } .color-description { display: block; color: #777; font-weight: lighter; font-size: 14px; } .main-color:hover { .main-color-value { left: 0; opacity: 0.7; } } .color-palette-horizontal { width: 100%; &-dark { height: 303px; padding: 32px 28px; background-color: #141414; .color-palette-picker { margin-bottom: 0; } .color-palette-pick { color: fade(@white, 65); text-align: left; &-hex { color: fade(@white, 65); } } } .main-color { display: flex; &-item { position: relative; flex: 1; height: 86px; margin-right: 0; padding: 37px 0 0; line-height: normal; text-align: center; border-radius: 0; .main-color-text { float: none; } &:hover { height: 96px; margin-top: -10px; border-radius: 4px 4px 0 0; } } &-value { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; transform-origin: unset; } &:hover { .main-color-item { padding-top: 8px; } .main-color-value { bottom: 8px; opacity: 0.7; } } } }