gradient-generator-ui/dist/gradient-generator.css.map

Library to create a gradient generator in vanilla-js with interactive user interface in html

{"version":3,"sources":["webpack://GradientGenerator/./src/scss/gradientControl.scss","webpack://GradientGenerator/./src/scss/gradientContainer.scss","webpack://GradientGenerator/./src/scss/generatorManager.scss"],"names":[],"mappings":"AAAA,YACE,YACA,cACA,WACA,oBAKA,6DAEE,oBACA,eAEA,kBACA,qBAEA,2BAMF,+BACE,iBACA,cAEA,8BACA,eACA,kBACA,gBAEA,2BACA,mBACA,SAMF,8BACE,WACA,YAGA,4DACE,UAGF,oDACE,YAOJ,iCACE,iBACA,cAEA,WACA,YACA,SAEA,gBACA,oBACA,aAGE,wBACA,gBAwBF,uHAzBE,wBACA,gBA4BF,uDAnBE,WACA,YAEA,mBACA,2BACA,8BAEA,oBACA,eAcF,gEA3BE,WACA,YA+BF,sGArCE,wBACA,gBAwCF,mDA/BE,WACA,YAEA,mBACA,2BACA,8BAEA,oBACA,eA0BF,mDAvCE,WACA,YA2CF,wFAjDE,wBACA,gBAoDF,4CAhDE,WACA,YAkDF,4CA9CE,WACA,YAEA,mBACA,2BACA,8BAEA,oBACA,eA2CJ,yBACE,8BACE,WAGA,uDACE,WAEF,mDACE,WAEF,4CACE,YASN,6DAEE,WACA,aAGA,uDACE,WACA,aAEF,mDACE,WACA,aAEF,4CACE,WACA,aAKJ,yEAEE,UAGA,6DACE,UAEF,yDACE,UAEF,kDACE,UAKJ,yEAGE,UACA,uBAEF,uCACE,aAEA,6DACE,UACA,uBAEF,yDACE,UACA,uBAEF,kDACE,UACA,uBCjNN,cAME,iBACA,cAEA,aACA,kBAEA,kBACA,sBAEA,gBAdA,8BAEE,sBCHJ,QACE,iBAEA,eACE,YACA,gBACA,iBAEA,iBACA,WAEA,aACA,mBAEA,kBACA,WACA,MACA,OACA,WACA,Y","file":"gradient-generator.css","sourcesContent":[".gg-control {\n  height: 100%;\n  grid-column: 1;\n  grid-row: 1;\n  pointer-events: none;\n\n  /* ----------------------------------- */\n  /*      Styles to colors controls      */\n  /* ----------------------------------- */\n  .gg-control-delete,\n  .gg-control-value {\n    pointer-events: auto;\n    cursor: pointer;\n\n    position: absolute;\n    left: var(--pos-left);\n\n    transform: translateX(-50%);\n  }\n\n  /* ----------------------------------- */\n  /*   Styles to delete button control   */\n  /* ----------------------------------- */\n  .gg-control-delete {\n    --gb-color: #fff;\n    --color: #000;\n\n    border: 1px solid var(--color);\n    cursor: pointer;\n    border-radius: 50%;\n    padding: 3px 7px;\n\n    background: var(--gb-color);\n    color: var(--color);\n    top: 10px;\n  }\n\n  /* ----------------------------------- */\n  /*    Styles to color value control    */\n  /* ----------------------------------- */\n  .gg-control-value {\n    width: 25px;\n    bottom: 10px;\n\n    // Experimental only with chrome\n    &::-webkit-color-swatch-wrapper {\n      padding: 0;\n    }\n\n    &::-webkit-color-swatch {\n      border: none;\n    }\n  }\n\n  /* ----------------------------------- */\n  /*      Styles to position control     */\n  /* ----------------------------------- */\n  .gg-control-position {\n    --gb-color: #fff;\n    --color: #000;\n\n    width: 100%;\n    height: 100%;\n    margin: 0;\n\n    background: none;\n    pointer-events: none;\n    outline: none;\n\n    @mixin aparence-none {\n      -webkit-appearance: none;\n      appearance: none;\n    }\n\n    @mixin track-style {\n      width: 100%;\n      height: 100%;\n    }\n\n    @mixin thumb-style {\n      width: 10px;\n      height: 100%;\n\n      border-radius: 10px;\n      background: var(--gb-color);\n      border: 1px solid var(--color);\n\n      pointer-events: auto;\n      cursor: pointer;\n    }\n\n    // Aparences\n    @include aparence-none;\n\n    // Suport to chrome and others\n    &::-webkit-slider-thumb,\n    &::-webkit-slider-runnable-track {\n      @include aparence-none;\n    }\n    &::-webkit-slider-thumb {\n      @include thumb-style;\n    }\n    &::-webkit-slider-runnable-track {\n      @include track-style;\n    }\n\n    // Mozilla Firefox\n    &::-moz-range-thumb,\n    &::-moz-range-track {\n      @include aparence-none;\n    }\n    &::-moz-range-thumb {\n      @include thumb-style;\n    }\n    &::-moz-range-track {\n      @include track-style;\n    }\n\n    // Suppoert to IE\n    &::-ms-track,\n    &::-ms-thumb {\n      @include aparence-none;\n    }\n    &::-ms-track {\n      @include track-style;\n    }\n    &::-ms-thumb {\n      @include thumb-style;\n    }\n  }\n\n  @media (min-width: 586px) {\n    .gg-control-value {\n      width: 15px;\n    }\n    .gg-control-position {\n      &::-webkit-slider-thumb {\n        width: 15px;\n      }\n      &::-moz-range-thumb {\n        width: 15px;\n      }\n      &::-ms-thumb {\n        width: 15px;\n      }\n    }\n  }\n\n  /* ----------------------------------- */\n  /*         Styles to interactive       */\n  /* ----------------------------------- */\n  // NORMAL\n  .gg-control-delete,\n  .gg-control-value {\n    opacity: 0.4;\n    outline: none;\n  }\n  .gg-control-position {\n    &::-webkit-slider-thumb {\n      opacity: 0.4;\n      outline: none;\n    }\n    &::-moz-range-thumb {\n      opacity: 0.4;\n      outline: none;\n    }\n    &::-ms-thumb {\n      opacity: 0.4;\n      outline: none;\n    }\n  }\n\n  // HOVER\n  .gg-control-delete:hover,\n  .gg-control-value:hover {\n    opacity: 1;\n  }\n  .gg-control-position:hover {\n    &::-webkit-slider-thumb {\n      opacity: 1;\n    }\n    &::-moz-range-thumb {\n      opacity: 1;\n    }\n    &::-ms-thumb {\n      opacity: 1;\n    }\n  }\n\n  // FOCUS\n  .gg-control-delete:focus,\n  .gg-control-value:focus {\n    /* outline: 1px auto #101010; */\n    opacity: 1;\n    filter: brightness(0.9);\n  }\n  .gg-control-position:focus {\n    outline: none;\n\n    &::-webkit-slider-thumb {\n      opacity: 1;\n      filter: brightness(0.9);\n    }\n    &::-moz-range-thumb {\n      opacity: 1;\n      filter: brightness(0.9);\n    }\n    &::-ms-thumb {\n      opacity: 1;\n      filter: brightness(0.9);\n    }\n  }\n}\n",".gg-container {\n  &,\n  * {\n    box-sizing: border-box;\n  }\n\n  min-height: 150px;\n  padding: 3em 0;\n\n  display: grid;\n  position: relative;\n\n  border-radius: 4px;\n  border: 1px solid #aaa;\n\n  overflow: hidden;\n}\n",".gg-add {\n  cursor: crosshair;\n\n  &::after {\n    content: '+';\n    font-size: 100px;\n    font-weight: bold;\n\n    background: #0007;\n    color: white;\n\n    display: grid;\n    place-items: center;\n\n    position: absolute;\n    z-index: 10;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n}\n"],"sourceRoot":""}