cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!--
Also check out:
https://codepen.io/lerouxb/details/hAnHC/
(a later variant)
-->
<div class="color-widget"></div>
            
          
!
            
              // --------------------------------------------------
// Flexbox LESS mixins
// The spec: http://www.w3.org/TR/css3-flexbox
// Source: https://gist.github.com/jayj/4012969
// --------------------------------------------------

// Flexbox display
// flex or inline-flex
.flex-display(@display: flex) {
	display: ~"-webkit-@{display}";
	display: ~"-moz-@{display}";
	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
	display: ~"-ms-@{display}"; // IE11
	display: @display;
}

// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
.flex(@columns: initial) {
  -webkit-flex: @columns;
     -moz-flex: @columns;
      -ms-flex: @columns;
          flex: @columns;
}

// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
.flex-direction(@direction: row) {
  -webkit-flex-direction: @direction;
     -moz-flex-direction: @direction;
      -ms-flex-direction: @direction;
          flex-direction: @direction;
}

// Flex Line Wrapping
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
.flex-wrap(@wrap: nowrap) {
  -webkit-flex-wrap: @wrap;
     -moz-flex-wrap: @wrap;
      -ms-flex-wrap: @wrap;
          flex-wrap: @wrap;
}

// Flex Direction and Wrap
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
.flex-flow(@flow) {
  -webkit-flex-flow: @flow;
     -moz-flex-flow: @flow;
      -ms-flex-flow: @flow;
          flex-flow: @flow;
}

// Display Order
// - applies to: flex items
// <integer>
.flex-order(@order: 0) {
  -webkit-order: @order;
     -moz-order: @order;
      -ms-order: @order;
          order: @order;
}

// Flex grow factor
// - applies to: flex items
// <number>
.flex-grow(@grow: 0) {
  -webkit-flex-grow: @grow;
     -moz-flex-grow: @grow;
      -ms-flex-grow: @grow;
          flex-grow: @grow;
}

// Flex shr
// - applies to: flex itemsink factor
// <number>
.flex-shrink(@shrink: 1) {
  -webkit-flex-shrink: @shrink;
     -moz-flex-shrink: @shrink;
      -ms-flex-shrink: @shrink;
          flex-shrink: @shrink;
}

// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width>
.flex-basis(@width: auto) {
  -webkit-flex-basis: @width;
     -moz-flex-basis: @width;
      -ms-flex-basis: @width;
          flex-basis: @width;
}

// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around
.justify-content(@justify: flex-start) {
  -webkit-justify-content: @justify;
     -moz-justify-content: @justify;
      -ms-justify-content: @justify;
          justify-content: @justify;
}

// Packing Flex Lines
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch
.align-content(@align: stretch) {
  -webkit-align-content: @align;
     -moz-align-content: @align;
      -ms-align-content: @align;
          align-content: @align;
}

// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch
.align-items(@align: stretch) {
  -webkit-align-items: @align;
     -moz-align-items: @align;
      -ms-align-items: @align;
          align-items: @align;
}

// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch
.align-self(@align: auto) {
  -webkit-align-self: @align;
     -moz-align-self: @align;
      -ms-align-self: @align;
          align-self: @align;
}

.color-widget {
  .flex-display();
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.column {
  .flex-display();
  .flex-direction(column);
  .flex(1);
}
.shades {
  position: relative;
  .flex-display();
  .flex-direction(column);
  width: 0px;
  transition:width 0.1s linear;
  &.visible {
    width: 50px;
  }
}

.color, .back {
  .flex(1);
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  &:focus {
    outline: none;
  }
}
.back {
  background-color: #fff;
}
.shades,
.color.active {
  z-index: 1;
}
.icon {
  font-family: arial;
  font-weight: bold;
  color: #666;
  position: absolute;
  top: 50%;
  left: 50%;
  @size: 50px;
  font-size: @size;
  line-height: @size;
  margin-left: -@size/2 + 1px;
  margin-top: -@size/2;
}
.blackout {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background-color 0.1s ease-in;
  &.visible {
    background-color: rgba(0, 0, 0, 0.7);
    pointer-events: auto;
  }
}

            
          
!
            
              colors = null

cancelColor = ->
  $widget = $ '.color-widget'
  $blackout = $widget.find '.blackout'
  $widget.find('.color.active').removeClass('active')
  $shades = $widget.find('.shades')
  $shades.removeClass('visible') # start css animation
  $blackout.removeClass('visible')
  setTimeout ->
    # by now the animation probably finished
    $shades.remove()    
  , 1000

activateColor = ($active) ->
  cancelColor()
  $widget = $ '.color-widget'
  $blackout = $widget.find('.blackout')
  
  name = $active.data 'name'
  $column = $active.parents('.column')

  $shades = $ '<div class="shades"></div>'
  for hex in colors[name]
    $color = $ '<button class="color"></button>'
    $color.attr('data-hex', hex)
    $color.css('background-color', hex)
    $shades.append $color
  
  $column.after($shades)
  
  $active.addClass 'active'
  $blackout.addClass 'visible'
  
  setTimeout ->
    $shades.addClass 'visible'
  , 0
  

  
buildWidget = ->
  $widget = $ '.color-widget'
  
  names = Object.keys(colors)
  columns = []
  for i in [0..3]
    $column = $ '<div class="column visible"></div>'
    $widget.append $column
    columns[i] = $column

  columnNumber = -1
  nextColumn = ->
    columnNumber += 1
    columnNumber = 0 if columnNumber == 4
    columnNumber

  for name, index in names
    # first add the back/close/cancel button
    # in the top right corner
    if index == 3
      $back = $ '<button class="back"><div class="icon">&#10226;</div></button>'
      columns[nextColumn()].append $back
    # (then) add the color
    $color = $ '<button class="color"></button>'
    hex = colors[name][5]
    $color.attr('data-name', name)
    $color.attr('data-hex', hex)
    $color.css('background-color', hex)
    columns[nextColumn()].append $color
  
  $blackout = $ '<div class="blackout"></div>'
  $widget.append $blackout
  
  $widget.find('.blackout').click (e) ->
    e.stopPropagation()
    cancelColor()
    
  $widget.find('.back').click (e) ->
    e.stopPropagation()
    
  $widget.find('.color').click (e) ->
    e.stopPropagation()
    $active = $(e.currentTarget)
    if $active.hasClass 'active'
      cancelColor()
    else
	    activateColor $active
    
# ---

colors =
  Red: [
    '#fde0dc'
    '#f9bdbb'
    '#f69988'
    '#f36c60'
    '#e84e40'
    '#e51c23'
    '#dd191d'
    '#d01716'
    '#c41411'
    '#b0120a'
    '#ff7997'
    '#ff5177'
    '#ff2d6f'
    '#e00032'
  ]

  Pink: [
    '#fce4ec'
    '#f8bbd0'
    '#f48fb1'
    '#f06292'
    '#ec407a'
    '#e91e63'
    '#d81b60'
    '#c2185b'
    '#ad1457'
    '#880e4f'
    '#ff80ab'
    '#ff4081'
    '#f50057'
    '#c51162'
  ]

  Purple: [
    '#f3e5f5'
    '#e1bee7'
    '#ce93d8'
    '#ba68c8'
    '#ab47bc'
    '#9c27b0'
    '#8e24aa'
    '#7b1fa2'
    '#6a1b9a'
    '#4a148c'
    '#ea80fc'
    '#e040fb'
    '#d500f9'
    '#aa00ff'
  ]

  'Deep Purple': [
    '#ede7f6'
    '#d1c4e9'
    '#b39ddb'
    '#9575cd'
    '#7e57c2'
    '#673ab7'
    '#5e35b1'
    '#512da8'
    '#4527a0'
    '#311b92'
    '#b388ff'
    '#7c4dff'
    '#651fff'
    '#6200ea'
  ]

  Indigo: [
    '#e8eaf6'
    '#c5cae9'
    '#9fa8da'
    '#7986cb'
    '#5c6bc0'
    '#3f51b5'
    '#3949ab'
    '#303f9f'
    '#283593'
    '#1a237e'
    '#8c9eff'
    '#536dfe'
    '#3d5afe'
    '#304ffe'
  ]

  Blue: [
    '#e7e9fd'
    '#d0d9ff'
    '#afbfff'
    '#91a7ff'
    '#738ffe'
    '#5677fc'
    '#4e6cef'
    '#455ede'
    '#3b50ce'
    '#2a36b1'
    '#a6baff'
    '#6889ff'
    '#4d73ff'
    '#4d69ff'
  ]

  'Light Blue': [
    '#e1f5fe'
    '#b3e5fc'
    '#81d4fa'
    '#4fc3f7'
    '#29b6f6'
    '#03a9f4'
    '#039be5'
    '#0288d1'
    '#0277bd'
    '#01579b'
    '#80d8ff'
    '#40c4ff'
    '#00b0ff'
    '#0091ea'
  ]

  Cyan: [
    '#e0f7fa'
    '#b2ebf2'
    '#80deea'
    '#4dd0e1'
    '#26c6da'
    '#00bcd4'
    '#00acc1'
    '#0097a7'
    '#00838f'
    '#006064'
    '#84ffff'
    '#18ffff'
    '#00e5ff'
    '#00b8d4'
  ]

  Teal: [
    '#e0f2f1'
    '#b2dfdb'
    '#80cbc4'
    '#4db6ac'
    '#26a69a'
    '#009688'
    '#00897b'
    '#00796b'
    '#00695c'
    '#004d40'
    '#a7ffeb'
    '#64ffda'
    '#1de9b6'
    '#00bfa5'
  ]

  Green: [
    '#d0f8ce'
    '#a3e9a4'
    '#72d572'
    '#42bd41'
    '#2baf2b'
    '#259b24'
    '#0a8f08'
    '#0a7e07'
    '#056f00'
    '#0d5302'
    '#a2f78d'
    '#5af158'
    '#14e715'
    '#12c700'
  ]

  'Light Green': [
    '#f1f8e9'
    '#dcedc8'
    '#c5e1a5'
    '#aed581'
    '#9ccc65'
    '#8bc34a'
    '#7cb342'
    '#689f38'
    '#558b2f'
    '#33691e'
    '#ccff90'
    '#b2ff59'
    '#76ff03'
    '#64dd17'
  ]

  Lime: [
    '#f9fbe7'
    '#f0f4c3'
    '#e6ee9c'
    '#dce775'
    '#d4e157'
    '#cddc39'
    '#c0ca33'
    '#afb42b'
    '#9e9d24'
    '#827717'
    '#f4ff81'
    '#eeff41'
    '#c6ff00'
    '#aeea00'
  ]

  Yellow: [
    '#fffde7'
    '#fff9c4'
    '#fff59d'
    '#fff176'
    '#ffee58'
    '#ffeb3b'
    '#fdd835'
    '#fbc02d'
    '#f9a825'
    '#f57f17'
    '#ffff8d'
    '#ffff00'
    '#ffea00'
    '#ffd600'
  ]

  Amber: [
    '#fff8e1'
    '#ffecb3'
    '#ffe082'
    '#ffd54f'
    '#ffca28'
    '#ffc107'
    '#ffb300'
    '#ffa000'
    '#ff8f00'
    '#ff6f00'
    '#ffe57f'
    '#ffd740'
    '#ffc400'
    '#ffab00'
  ]

  Orange: [
    '#fff3e0'
    '#ffe0b2'
    '#ffcc80'
    '#ffb74d'
    '#ffa726'
    '#ff9800'
    '#fb8c00'
    '#f57c00'
    '#ef6c00'
    '#e65100'
    '#ffd180'
    '#ffab40'
    '#ff9100'
    '#ff6d00'
  ]

  'Deep Orange': [
    '#fbe9e7'
    '#ffccbc'
    '#ffab91'
    '#ff8a65'
    '#ff7043'
    '#ff5722'
    '#f4511e'
    '#e64a19'
    '#d84315'
    '#bf360c'
    '#ff9e80'
    '#ff6e40'
    '#ff3d00'
    '#dd2c00'
  ]

  Brown: [
    '#efebe9'
    '#d7ccc8'
    '#bcaaa4'
    '#a1887f'
    '#8d6e63'
    '#795548'
    '#6d4c41'
    '#5d4037'
    '#4e342e'
    '#3e2723'
  ]

  Grey: [
    '#fafafa'
    '#f5f5f5'
    '#eeeeee'
    '#e0e0e0'
    '#bdbdbd'
    '#9e9e9e'
    '#757575'
    '#616161'
    '#424242'
    '#212121'
    '#000000'
    '#ffffff'
  ]

  'Blue Grey': [
    '#eceff1'
    '#cfd8dc'
    '#b0bec5'
    '#90a4ae'
    '#78909c'
    '#607d8b'
    '#546e7a'
    '#455a64'
    '#37474f'
    '#263238'
  ]

$ ->
  buildWidget()

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console