Same filename and directory in other branches
  1. 8.x-2.x css/color_field_formatter_swatch_options.css 1 comment
div.color_field__swatch input[type=checkbox],
div.color_field__swatch input[type=radio] {
  display: none;
}
div.color_field__swatch input[type=checkbox]:checked + label span,
div.color_field__swatch input[type=radio]:checked + label span {
  transform: scale(1.25);
  border: 1px solid #373737;
}
div.color_field__swatch label {
  display: inline-block;
  cursor: pointer;
}
div.color_field__swatch label:hover span {
  transform: scale(1.35);
}
div.color_field__swatch label span {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease-in-out;
}
div.color_field__swatch span.color_field__swatch--circle {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
div.color_field__swatch span.color_field__swatch--parallelogram {
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  transform: skew(20deg);
}

File

css/color_field_formatter_swatch_options.css

View source 
  1. div.color_field__swatch input[type=checkbox],

  2. div.color_field__swatch input[type=radio] {

  3.   display: none;

  4. }

  5. div.color_field__swatch input[type=checkbox]:checked + label span,

  6. div.color_field__swatch input[type=radio]:checked + label span {

  7.   transform: scale(1.25);

  8.   border: 1px solid #373737;

  9. }

  10. div.color_field__swatch label {

  11.   display: inline-block;

  12.   cursor: pointer;

  13. }

  14. div.color_field__swatch label:hover span {

  15.   transform: scale(1.35);

  16. }

  17. div.color_field__swatch label span {

  18.   display: block;

  19.   width: 100%;

  20.   height: 100%;

  21.   transition: transform 0.2s ease-in-out;

  22. }

  23. div.color_field__swatch span.color_field__swatch--circle {

  24.   -moz-border-radius: 50%;

  25.   -webkit-border-radius: 50%;

  26.   border-radius: 50%;

  27. }

  28. div.color_field__swatch span.color_field__swatch--parallelogram {

  29.   -webkit-transform: skew(20deg);

  30.   -moz-transform: skew(20deg);

  31.   -o-transform: skew(20deg);

  32.   transform: skew(20deg);

  33. }