logo

pleroma-fe

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

color_input.scss (1986B)

    

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