logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

color_input.scss (1670B)

    

  1. .color-input {
  2.   display: inline-flex;
  4.   &-field.input {
  5.     display: inline-flex;
  6.     flex: 0 0 0;
  7.     max-width: 9em;
  8.     align-items: stretch;
  9.     padding: 0.2em 8px;
  11.     input {
  12.       color: var(--text);
  13.       background: none;
  14.       border: none;
  15.       padding: 0;
  16.       margin: 0;
  18.       &.textColor {
  19.         flex: 1 0 3em;
  20.         min-width: 3em;
  21.         padding: 0;
  22.       }
  23.     }
  25.     .nativeColor {
  26.       cursor: pointer;
  27.       flex: 0 0 auto;
  29.       input {
  30.         appearance: none;
  31.         max-width: 0;
  32.         min-width: 0;
  33.         max-height: 0;
  34.         /* stylelint-disable-next-line declaration-no-important */
  35.         opacity: 0 !important;
  36.       }
  37.     }
  39.     .computedIndicator,
  40.     .validIndicator,
  41.     .invalidIndicator,
  42.     .transparentIndicator {
  43.       flex: 0 0 2em;
  44.       margin: 0 0.5em;
  45.       min-width: 2em;
  46.       align-self: stretch;
  47.       min-height: 1.5em;
  48.       border-radius: var(--roundness);
  49.     }
  51.     .invalidIndicator {
  52.       background: transparent;
  53.       box-sizing: border-box;
  54.       border: 2px solid var(--cRed);
  55.     }
  57.     .transparentIndicator {
  58.       // forgot to install counter-strike source, ooops
  59.       background-color: #f0f;
  60.       position: relative;
  62.       &::before,
  63.       &::after {
  64.         display: block;
  65.         content: "";
  66.         background-color: #000;
  67.         position: absolute;
  68.         height: 50%;
  69.         width: 50%;
  70.       }
  72.       &::after {
  73.         top: 0;
  74.         left: 0;
  75.         border-top-left-radius: var(--roundness);
  76.       }
  78.       &::before {
  79.         bottom: 0;
  80.         right: 0;
  81.         border-bottom-right-radius: var(--roundness);
  82.       }
  83.     }
  84.   }
  86.   .label {
  87.     flex: 1 1 auto;
  88.   }
  89. }