winbox-ui-next/es/color-picker/src/styles/index.cssr.js

We Design Vue 2.0: A Vue.js 3 UI Library

import { c, cB, cE, cM } from "../../_utils/cssr/index.js";
import { fadeInScaleUpTransition } from "../../_styles/transitions/fade-in-scale-up.cssr.js";
var style = c([
  cB("color-picker-panel", `

  `, [
    fadeInScaleUpTransition(),
    cB("input", `
      text-align: center;
    `)
  ]),
  cB("color-picker-checkboard", `
    background: white; 
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  `, [
    c("&::after", `
      background-image: linear-gradient(45deg, #DDD 25%, #0000 25%), linear-gradient(-45deg, #DDD 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #DDD 75%), linear-gradient(-45deg, #0000 75%, #DDD 75%);
      background-size: 12px 12px;
      background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
      background-repeat: repeat;
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    `)
  ]),
  cB("color-picker-slider", `
    margin-bottom: 8px;
    position: relative;
    box-sizing: border-box;
  `, [
    cE("image", `
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    `),
    c("&::after", `
      content: "";
      position: absolute;
      border-radius: inherit;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .24);
      pointer-events: none;
    `)
  ]),
  cB("color-picker-handle", `
    z-index: 1;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .45);
    position: absolute;
    background-color: white;
    overflow: hidden;
  `, [
    cE("fill", `
      box-sizing: border-box;
      border: 2px solid white;
    `)
  ]),
  cB("color-picker-pallete", `
    height: 180px;
    position: relative;
    margin-bottom: 8px;
    cursor: crosshair;
  `, [
    cE("layer", `
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    `, [
      cM("shadowed", `
        box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .24);
      `)
    ])
  ]),
  cB("color-picker-preview", `
    display: flex;
  `, [
    cE("sliders", `
      flex: 1 0 auto;
    `),
    cE("preview", `
      position: relative;
      height: 30px;
      width: 30px;
      margin: 0 0 8px 6px;
      border-radius: 50%;
      box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset;
      overflow: hidden;
    `),
    cE("fill", `
      display: block;
      width: 30px;
      height: 30px;
    `),
    cE("input", `
      position: absolute;
      top: 0;
      left: 0;
      width: 30px;
      height: 30px;
      opacity: 0;
      z-index: 1;
    `)
  ]),
  cB("color-picker-input", `
    display: flex;
    align-items: center;
  `, [
    cB("input", `
      flex-grow: 1;
      flex-basis: 0;
    `),
    cE("mode", `
      text-align: center;
    `)
  ]),
  cB("color-picker-control", `
    padding: 12px;
  `),
  cB("color-picker-action", `
    display: flex;
    margin-top: -4px;
    border-top: 1px solid var(--n-divider-color);
    padding: 8px 12px;
    justify-content: flex-end;
  `, [cB("button", "margin-left: 8px;")]),
  cB("color-picker-trigger", `
    border: var(--n-border);
    height: 100%;
    box-sizing: border-box;
    border-radius: var(--n-border-radius);
    transition: border-color .3s var(--n-bezier);
    cursor: pointer;
  `, [
    cE("value", `
      white-space: nowrap;
      position: relative;
    `),
    cE("fill", `
      border-radius: var(--n-border-radius);
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      left: 4px;
      right: 4px;
      top: 4px;
      bottom: 4px;
    `),
    cM("disabled", "cursor: not-allowed"),
    cB("color-picker-checkboard", `
    `, [
      c("&::after", `
        --n-block-size: calc((var(--n-height) - 8px) / 3);
        background-size: calc(var(--n-block-size) * 2) calc(var(--n-block-size) * 2);
        background-position: 0 0, 0 var(--n-block-size), var(--n-block-size) calc(-1 * var(--n-block-size)), calc(-1 * var(--n-block-size)) 0px;  
      `)
    ])
  ]),
  cB("color-picker-swatches", `
    display: grid;
    grid-gap: 8px;
    flex-wrap: wrap;
    position: relative;
    grid-template-columns: repeat(auto-fill, 18px);
    margin-top: 10px;
  `, [
    cB("color-picker-swatch", `
      width: 18px;
      height: 18px;
      background-image: linear-gradient(45deg, #DDD 25%, #0000 25%), linear-gradient(-45deg, #DDD 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #DDD 75%), linear-gradient(-45deg, #0000 75%, #DDD 75%);
      background-size: 8px 8px;
      background-position: 0px 0, 0px 4px, 4px -4px, -4px 0px;
      background-repeat: repeat;
    `, [
      cE("fill", `
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 3px;
        box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset;
        cursor: pointer;
      `),
      c("&:focus", `
        outline: none;
      `, [
        cE("fill", [
          c("&::after", `
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: inherit;
            filter: blur(2px);
            content: "";
          `)
        ])
      ])
    ])
  ])
]);
export { style as default };