@harjs/react-ui 1.1.4 → 1.1.6

package/dist/assets/css/core/variants/filled.css

@@ -1,428 +0,0 @@
-/* #region BLUE */
-.filled:not(.disabled) {
-  &.blue {
-    background-color: var(--blue-500) !important;
-    color: var(--white) !important;
-    
-    &.active {
-      animation: clicked-blue ease-in-out 750ms 0s 1 normal both;
-    }
-  }
-}
-
-input.filled:not(.disabled) {
-  &.blue { 
-    background-color: var(--blue-500);
-
-    &:hover {
-      background-color: var(--blue-300);
-    }
-    &:focus,&.focused {
-      background-color: transparent;
-      border-color: var(--blue-300);
-      box-shadow: 0 0 0 3.5px var(--blue-100);
-    }
-  }
-}
-
-button.filled:not(.disabled) {
-  &.blue { 
-    background-color: var(--blue-500);
-
-    &:hover {
-      background-color: var(--blue-300);
-    }
-  }
-}
-/* #endregion */
-/* BLUE */
-
-/* #region PURPLE */
-.filled:not(.disabled) {
-  &.purple {
-    background-color: var(--purple-500) !important;
-    color: var(--white) !important;
-    
-    &.active {
-      animation: clicked-purple ease-in-out 750ms 0s 1 normal both;
-    }
-  }
-}
-
-input.filled:not(.disabled) {
-  &.purple { 
-    background-color: var(--purple-500);
-
-    &:hover {
-      background-color: var(--purple-300);
-    }
-    &:focus,&.focused {
-      background-color: transparent;
-      border-color: var(--purple-300);
-      box-shadow: 0 0 0 3.5px var(--purple-100);
-    }
-  }
-}
-
-button.filled:not(.disabled) {
-  &.purple { 
-    background-color: var(--purple-500);
-
-    &:hover {
-      background-color: var(--purple-300);
-    }
-  }
-}
-/* #endregion */
-/* PURPLE */
-
-/* #region PINK */
-.filled:not(.disabled) {
-  &.pink {
-    background-color: var(--pink-500) !important;
-    color: var(--white) !important;
-    
-    &.active {
-      animation: clicked-pink ease-in-out 750ms 0s 1 normal both;
-    }
-  }
-}
-
-input.filled:not(.disabled) {
-  &.pink { 
-    background-color: var(--pink-500);
-
-    &:hover {
-      background-color: var(--pink-300);
-    }
-    &:focus,&.focused {
-      background-color: transparent;
-      border-color: var(--pink-300);
-      box-shadow: 0 0 0 3.5px var(--pink-100);
-    }
-  }
-}
-
-button.filled:not(.disabled) {
-  &.pink { 
-    background-color: var(--pink-500);
-
-    &:hover {
-      background-color: var(--pink-300);
-    }
-  }
-}
-/* #endregion */
-/* PINK */
-
-/* #region RED */
-.filled:not(.disabled) {
-  &.red {
-    background-color: var(--red-500) !important;
-    color: var(--white) !important;
-    
-    &.active {
-      animation: clicked-red ease-in-out 750ms 0s 1 normal both;
-    }
-  }
-}
-
-input.filled:not(.disabled) {
-  &.red { 
-    background-color: var(--red-500);
-
-    &:hover {
-      background-color: var(--red-300);
-    }
-    &:focus,&.focused {
-      background-color: transparent;
-      border-color: var(--red-300);
-      box-shadow: 0 0 0 3.5px var(--red-100);
-    }
-  }
-}
-
-button.filled:not(.disabled) {
-  &.red { 
-    background-color: var(--red-500);
-
-    &:hover {
-      background-color: var(--red-300);
-    }
-  }
-}
-/* #endregion */
-/* RED */
-
-/* #region ORANGE */
-.filled:not(.disabled) {
-  &.orange {
-    background-color: var(--orange-500) !important;
-    color: var(--white) !important;
-    
-    &.active {
-      animation: clicked-orange ease-in-out 750ms 0s 1 normal both;
-    }
-  }
-}
-
-input.filled:not(.disabled) {
-  &.orange { 
-    background-color: var(--orange-500);
-
-    &:hover {
-      background-color: var(--orange-300);
-    }
-    &:focus,&.focused {
-      background-color: transparent;
-      border-color: var(--orange-300);
-      box-shadow: 0 0 0 3.5px var(--orange-100);
-    }
-  }
-}
-
-button.filled:not(.disabled) {
-  &.orange { 
-    background-color: var(--orange-500);
-
-    &:hover {
-      background-color: var(--orange-300);
-    }
-  }
-}
-/* #endregion */
-/* ORANGE */
-
-/* #region YELLOW */
-.filled:not(.disabled) {
-  &.yellow {
-    background-color: var(--yellow-500) !important;
-    color: var(--black) !important;
-    
-    &.active {
-      animation: clicked-yellow ease-in-out 750ms 0s 1 normal both;
-    }
-  }
-}
-
-input.filled:not(.disabled) {
-  &.yellow { 
-    background-color: var(--yellow-500);
-
-    &:hover {
-      background-color: var(--yellow-300);
-    }
-    &:focus,&.focused {
-      background-color: transparent;
-      border-color: var(--yellow-300);
-      box-shadow: 0 0 0 3.5px var(--yellow-100);
-    }
-  }
-}
-
-button.filled:not(.disabled) {
-  &.yellow { 
-    background-color: var(--yellow-500);
-
-    &:hover {
-      background-color: var(--yellow-300);
-    }
-  }
-}
-/* #endregion */
-/* YELLOW */
-
-/* #region GREEN */
-.filled:not(.disabled) {
-  &.green {
-    background-color: var(--green-500) !important;
-    color: var(--white) !important;
-    
-    &.active {
-      animation: clicked-green ease-in-out 750ms 0s 1 normal both;
-    }
-  }
-}
-
-input.filled:not(.disabled) {
-  &.green { 
-    background-color: var(--green-500);
-
-    &:hover {
-      background-color: var(--green-300);
-    }
-    &:focus,&.focused {
-      background-color: transparent;
-      border-color: var(--green-300);
-      box-shadow: 0 0 0 3.5px var(--green-100);
-    }
-  }
-}
-
-button.filled:not(.disabled) {
-  &.green { 
-    background-color: var(--green-500);
-
-    &:hover {
-      background-color: var(--green-300);
-    }
-  }
-}
-/* #endregion */
-/* GREEN */
-
-/* #region TEAL */
-.filled:not(.disabled) {
-  &.teal {
-    background-color: var(--teal-500) !important;
-    color: var(--white) !important;
-    
-    &.active {
-      animation: clicked-teal ease-in-out 750ms 0s 1 normal both;
-    }
-  }
-}
-
-input.filled:not(.disabled) {
-  &.teal { 
-    background-color: var(--teal-500);
-
-    &:hover {
-      background-color: var(--teal-300);
-    }
-    &:focus,&.focused {
-      background-color: transparent;
-      border-color: var(--teal-300);
-      box-shadow: 0 0 0 3.5px var(--teal-100);
-    }
-  }
-}
-
-button.filled:not(.disabled) {
-  &.teal { 
-    background-color: var(--teal-500);
-
-    &:hover {
-      background-color: var(--teal-300);
-    }
-  }
-}
-/* #endregion */
-/* TEAL */
-
-/* #region CYAN */
-.filled:not(.disabled) {
-  &.cyan {
-    background-color: var(--cyan-500) !important;
-    color: var(--white) !important;
-    
-    &.active {
-      animation: clicked-cyan ease-in-out 750ms 0s 1 normal both;
-    }
-  }
-}
-
-input.filled:not(.disabled) {
-  &.cyan { 
-    background-color: var(--cyan-500);
-
-    &:hover {
-      background-color: var(--cyan-300);
-    }
-    &:focus,&.focused {
-      background-color: transparent;
-      border-color: var(--cyan-300);
-      box-shadow: 0 0 0 3.5px var(--cyan-100);
-    }
-  }
-}
-
-button.filled:not(.disabled) {
-  &.cyan { 
-    background-color: var(--cyan-500);
-
-    &:hover {
-      background-color: var(--cyan-300);
-    }
-  }
-}
-/* #endregion */
-/* CYAN */
-
-/* #region GRAY */
-.filled:not(.disabled) {
-  &.gray {
-    background-color: var(--gray-500) !important;
-    color: var(--black) !important;
-    
-    &.active {
-      animation: clicked-gray ease-in-out 750ms 0s 1 normal both;
-    }
-  }
-}
-
-input.filled:not(.disabled) {
-  &.gray { 
-    background-color: var(--gray-500);
-
-    &:hover {
-      background-color: var(--gray-300);
-    }
-    &:focus,&.focused {
-      background-color: transparent;
-      border-color: var(--gray-300);
-      box-shadow: 0 0 0 3.5px var(--gray-100);
-    }
-  }
-}
-
-button.filled:not(.disabled) {
-  &.gray { 
-    background-color: var(--gray-500);
-
-    &:hover {
-      background-color: var(--gray-300);
-    }
-  }
-}
-/* #endregion */
-/* GRAY */
-
-/* #region LIGHT */
-.filled:not(.disabled) {
-  &.light {
-    background-color: var(--light-500) !important;
-    color: var(--gray-500) !important;
-    
-    &.active {
-      animation: clicked-light ease-in-out 750ms 0s 1 normal both;
-    }
-  }
-}
-
-input.filled:not(.disabled) {
-  &.light { 
-    background-color: var(--light-500);
-
-    &:hover {
-      background-color: var(--light-300);
-    }
-    &:focus,&.focused {
-      background-color: transparent;
-      border-color: var(--light-300);
-      box-shadow: 0 0 0 3.5px var(--light-100);
-    }
-  }
-}
-
-button.filled:not(.disabled) {
-  &.light { 
-    background-color: var(--light-500);
-
-    &:hover {
-      background-color: var(--light-300);
-    }
-  }
-}
-/* #endregion */
-/* LIGHT */