@eleventheye/asui 2.2.3 → 2.3.0

package/dist/asbutton/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asbutton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAiB,MAAM,wBAAwB,CAAC;AAEjF,eAAO,MAAM,cAAc;WAAuB,OAAO;UAAQ,eAAe;YAsH/E,CAAC;AAEF,eAAO,MAAM,aAAa;WAAuB,eAAe;YAG/D,CAAC;AAEF,eAAO,MAAM,cAAc,6NAG1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asbutton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAiB,MAAM,wBAAwB,CAAC;AAEjF,eAAO,MAAM,cAAc;WAAuB,OAAO;UAAQ,eAAe;YAwJ/E,CAAC;AAEF,eAAO,MAAM,aAAa;WAAuB,eAAe;YAG/D,CAAC;AAEF,eAAO,MAAM,cAAc,6NAG1B,CAAC"}

package/dist/asbutton/styles.js

@@ -20,6 +20,7 @@ exports.ASButtonStyled = styled_components_1.default.div `
   background: ${({ theme }) => theme.button.buttonGradientDown};
   text-transform: uppercase;
   text-align: center;
+  -webkit-tap-highlight-color: transparent;
 
   // button height = 50px
   &.ASLarge {
@@ -58,7 +59,6 @@ exports.ASButtonStyled = styled_components_1.default.div `
   &.ASLarge,
   &.ASMedium,
   &.ASSmall {
-    &:hover,
     &.Selected,
     &:active {
       &::after {
@@ -66,17 +66,11 @@ exports.ASButtonStyled = styled_components_1.default.div `
         text-shadow: ${({ theme }) => theme.button.buttonTextShadow};
       }
     }
-    &:hover {
-      &::after {
-        box-shadow: ${({ theme }) => theme.button.buttonShadowHover};
-      }
-    }
   }
 
   &.ASSmall,
   &.ASMedium,
   &.ASLarge {
-    &:hover,
     &.Selected,
     &:active {
       &::after {
@@ -85,7 +79,6 @@ exports.ASButtonStyled = styled_components_1.default.div `
     }
   }
 
-  &:hover,
   &:active,
   &.Selected {
     &:not([aria-disabled='true']) {
@@ -95,9 +88,52 @@ exports.ASButtonStyled = styled_components_1.default.div `
       text-shadow: none;
     }
   }
-  &:hover:not(:active):not(.Selected):not([aria-disabled='true']) {
-    box-shadow: ${({ theme, size }) => theme.button[`buttonShadowHover${size}`]};
+  @media (hover) {
+    &.ASSmall,
+    &.ASMedium,
+    &.ASLarge {
+      &:hover {
+        &::after {
+          color: ${({ theme }) => theme.button.buttonColorHover};
+          text-shadow: ${({ theme }) => theme.button.buttonTextShadow};
+        }
+      }
+      &:hover {
+        &::after {
+          box-shadow: ${({ theme }) => theme.button.buttonShadowHover};
+        }
+      }
+      &:hover {
+        &::after {
+          transform: translate(-50%, -50%) scale(0.95);
+        }
+      }
+    }
+    &:hover {
+      &:not([aria-disabled='true']) {
+        user-select: none;
+        background: ${({ theme }) => theme.button.buttonGradientUp};
+        color: transparent;
+        text-shadow: none;
+      }
+    }
+    &:hover:not(:active):not(.Selected):not([aria-disabled='true']) {
+      box-shadow: ${({ theme, size }) => theme.button[`buttonShadowHover${size}`]};
+    }
+
+    &:hover:is([aria-disabled='true']),
+    &:hover:not(:active):not(.Selected):is([aria-disabled='true']) {
+      cursor: default;
+      background: ${({ theme }) => theme.button.buttonBgDisabled};
+      color: transparent;
+      text-shadow: none;
+      &::after {
+        color: ${({ theme }) => theme.button.buttonColorDisabled};
+        text-shadow: none;
+      }
+    }
   }
+
   &:active,
   &.Selected {
     &:not([aria-disabled='true']) {
@@ -109,10 +145,8 @@ exports.ASButtonStyled = styled_components_1.default.div `
   &.ASSmall:is([aria-disabled='true']),
   &.ASMedium:is([aria-disabled='true']),
   &.ASLarge:is([aria-disabled='true']),
-  &:hover:is([aria-disabled='true']),
   &:active:is([aria-disabled='true']),
-  &.Selected:is([aria-disabled='true']),
-  &:hover:not(:active):not(.Selected):is([aria-disabled='true']) {
+  &.Selected:is([aria-disabled='true']) {
     cursor: default;
     background: ${({ theme }) => theme.button.buttonBgDisabled};
     color: transparent;

package/dist/asdropdown/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asdropdown/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,0PAyE5B,CAAC;AAEF,eAAO,MAAM,gBAAgB;WAA0B,OAAO;YAoC7D,CAAC;AAEF,eAAO,MAAM,gBAAgB;WAA0B,OAAO;YAI7D,CAAC;AAEF,eAAO,MAAM,iBAAiB;WAA4B,OAAO;YAIhE,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/asdropdown/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,UAAU,qBAAqB;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,0PA4E5B,CAAC;AAEF,eAAO,MAAM,gBAAgB;WAA0B,OAAO;YAoB7D,CAAC;AAEF,eAAO,MAAM,gBAAgB;WAA0B,OAAO;YAI7D,CAAC;AAEF,eAAO,MAAM,iBAAiB;WAA4B,OAAO;YAIhE,CAAC"}

package/dist/asdropdown/styles.js

@@ -7,6 +7,7 @@ exports.ASDropdownStyled = styled_components_1.default.div `
   position: relative;
   display: inline-block;
   width: 100%;
+  -webkit-tap-highlight-color: transparent;
 
   &.ASSmall {
     select {
@@ -56,14 +57,16 @@ exports.ASDropdownStyled = styled_components_1.default.div `
     clip-path: polygon(25% 0, 0 25%, 50% 67%, 100% 25%, 75% 0, 50% 24%);
   }
 
-  & select:hover {
-    background: ${({ theme }) => theme.dropdown.dropdownGradientDown};
-    background-color: ${({ theme }) => theme.dropdown.dropdownBg};
-    text-shadow: ${({ theme }) => theme.dropdown.dropdownTextShadowHover};
-  }
+  @media (hover) {
+    & select:hover {
+      background: ${({ theme }) => theme.dropdown.dropdownGradientDown};
+      background-color: ${({ theme }) => theme.dropdown.dropdownBg};
+      text-shadow: ${({ theme }) => theme.dropdown.dropdownTextShadowHover};
+    }
 
-  &:hover::after {
-    background-color: ${({ theme }) => theme.dropdown.dropdownColorHover};
+    &:hover::after {
+      background-color: ${({ theme }) => theme.dropdown.dropdownColorHover};
+    }
   }
 
   & select:disabled {
@@ -94,22 +97,6 @@ exports.ASDropdownSelect = styled_components_1.default.select `
   -webkit-appearance: none;
   -moz-appearance: none;
 
-  [popover] {
-    // top: 25px !important;
-
-    &:popover-open {
-      position: absolute;
-      margin-top: 50px;
-      width: 200px;
-      height: 100px;
-      position: absolute;
-      inset: unset;
-      bottom: 5px;
-      right: 5px;
-      margin: 0;
-    }
-  }
-
   &::-ms-expand {
     display: none;
   }

package/dist/astextfield/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/astextfield/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,eAAO,MAAM,yBAAyB;WAAuB,OAAO;YAiHnE,CAAC;AAEF,eAAO,MAAM,gBAAgB;WAAyB,OAAO;YA4C5D,CAAC;AAEF,eAAO,MAAM,oBAAoB;WAAuB,OAAO;YAO9D,CAAC;AAEF,eAAO,MAAM,qBAAqB;WAAuB,OAAO;YAG/D,CAAC;AAgBF,eAAO,MAAM,oBAAoB,gQAEhC,CAAC;AACF,eAAO,MAAM,aAAa,gQAEzB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/astextfield/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,eAAO,MAAM,yBAAyB;WAAuB,OAAO;YAmHnE,CAAC;AAEF,eAAO,MAAM,gBAAgB;WAAyB,OAAO;YAkD5D,CAAC;AAEF,eAAO,MAAM,oBAAoB;WAAuB,OAAO;YAS9D,CAAC;AAEF,eAAO,MAAM,qBAAqB;WAAuB,OAAO;YAG/D,CAAC;AAkBF,eAAO,MAAM,oBAAoB,gQAEhC,CAAC;AACF,eAAO,MAAM,aAAa,gQAEzB,CAAC"}

package/dist/astextfield/styles.js

@@ -19,7 +19,7 @@ exports.ASTextFieldInputContainer = styled_components_1.default.div `
   color: ${(props) => props.theme.textfield.color};
   outline: 1px solid ${(props) => props.theme.textfield.borderColor};
   border-radius: 35px;
-
+  -webkit-tap-highlight-color: transparent;
   padding: 0 12px;
 
   .ASTextFieldClearIcon {
@@ -28,8 +28,10 @@ exports.ASTextFieldInputContainer = styled_components_1.default.div `
     user-select: none;
     scale: 0.9;
 
-    &:hover {
-      scale: 1;
+    @media (hover) {
+      &:hover {
+        scale: 1;
+      }
     }
 
     &:active {
@@ -139,7 +141,13 @@ exports.ASTextFieldInput = styled_components_1.default.input `
   padding-inline: 6px;
   color: ${(props) => props.theme.textfield.inputColor};
 
-  &:hover,
+  @media (hover) {
+    &:hover {
+      border-color: ${(props) => props.theme.textfield.inputFocusBorderColor};
+      box-shadow: inset 0 1px 7px 1px ${(props) => props.theme.textfield.inputFocusBoxShadow};
+    }
+  }
+
   &:active,
   &:focus {
     border-color: ${(props) => props.theme.textfield.inputFocusBorderColor};
@@ -167,8 +175,10 @@ exports.ASTextFieldClickIcon = styled_components_1.default.div `
   cursor: pointer;
   user-select: none;
 
-  &:hover {
-    text-shadow: 1px 1px 3px ${(props) => props.theme.textfield.iconTextShadow};
+  @media (hover) {
+    &:hover {
+      text-shadow: 1px 1px 3px ${(props) => props.theme.textfield.iconTextShadow};
+    }
   }
 `;
 exports.ASTextFieldSearchIcon = styled_components_1.default.div `
@@ -180,10 +190,12 @@ const IconStyle = (0, styled_components_1.css) `
   user-select: none;
   scale: 1.2;
   transition: scale 0.3s ease-in-out;
-  &:hover {
-    scale: 1.4;
-  }
 
+  @media (hover) {
+    &:hover {
+      scale: 1.4;
+    }
+  }
   &:active {
     scale: 1.2;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eleventheye/asui",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "private": false,
   "description": "AS UI React Library by eleventheye (another one!)",
   "keywords": [