feat: expose a few more sass variables add background-clip

Author: jquense

packages/react-widgets/src/scss/calendar.scss

@@ -28,6 +28,14 @@ $cell-color: $btn-color !default;
 $cell-border-color: null !default;
 $cell-border-radius: $btn-border-radius !default;
 
+$cell-hover-bg: $btn-hover-bg !default;
+$cell-hover-border-color: $btn-hover-border-color !default;
+$cell-hover-color: $btn-hover-color !default;
+
+$cell-active-bg: $btn-active-bg !default;
+$cell-active-border-color: $btn-active-border-color !default;
+$cell-active-color: $btn-active-color !default;
+
 $cell-select-color: list.$selected-color !default;
 $cell-select-border-color: list.$selected-border-color !default;
 $cell-select-bg: list.$selected-bg !default;
@@ -67,17 +75,10 @@ $cell-select-bg: list.$selected-bg !default;
 
   .rw-cell,
   .rw-calendar-btn {
-    line-height: 2em;
-    border-radius: $btn-border-radius;
+    background-clip: $widget-background-clip;
 
     @include mixins.focus();
 
-    &:hover {
-      background-color: $btn-hover-bg;
-    }
-    &:active {
-      background-color: $btn-active-bg;
-    }
     // TODO: normal button disabled
     &:disabled,
     &.rw-state-disabled {
@@ -87,7 +88,16 @@ $cell-select-bg: list.$selected-bg !default;
   }
 
   .rw-calendar-btn {
+    line-height: 2em;
+    border-radius: $btn-border-radius;
     border-color: $btn-border-color;
+
+    &:hover {
+      background-color: $btn-hover-bg;
+    }
+    &:active {
+      background-color: $btn-active-bg;
+    }
   }
 
   .rw-calendar-btn-left,
@@ -162,6 +172,13 @@ $cell-select-bg: list.$selected-bg !default;
     padding: $cell-padding;
     outline: none;
 
+    &:hover {
+      background-color: $cell-hover-bg;
+    }
+    &:active {
+      background-color: $cell-active-bg;
+    }
+
     &.rw-state-selected {
       background-color: $cell-select-bg;
       border-color: $cell-select-border-color;
@@ -191,6 +208,7 @@ $cell-select-bg: list.$selected-bg !default;
 
   .rw-calendar-transition-next {
     -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
 
     .rw-calendar-transition-top & {
       @include _translate(0, -100%);
@@ -212,6 +230,7 @@ $cell-select-bg: list.$selected-bg !default;
 
   .rw-calendar-transition-prev {
     -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
     position: absolute;
     left: 0;
     top: 0;

packages/react-widgets/src/scss/list.scss

@@ -48,6 +48,7 @@ $optgroup-font-weight: bold !default;
     color: $color;
     cursor: pointer;
     border: 1px solid transparent;
+    background-clip: $widget-background-clip;
 
     &:hover,
     [data-intent='keyboard'] &.rw-state-focus:not(.rw-state-selected) {

packages/react-widgets/src/scss/popup.scss

@@ -50,6 +50,7 @@ $zindex-focused: $zindex + 1 !default;
     border-radius: $border-radius;
     box-shadow: $box-shadow;
     border: $border 1px solid;
+    background-clip: $widget-background-clip;
     background: $bg;
 
     & .rw-list {

packages/react-widgets/src/scss/variables.scss

@@ -43,6 +43,8 @@ $widget-focus-color: rgba(0, 123, 255, 0.25) !default;
 $widget-focus-box-shadow: 0 0 0 $widget-focus-width $widget-focus-color !default;
 $widget-focus-transition: box-shadow 0.15s ease-in-out !default;
 
+$widget-background-clip: border-box;
+
 //
 // Buttons
 //

packages/react-widgets/src/scss/widget.scss

@@ -29,6 +29,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  background-clip: $widget-background-clip;
   cursor: pointer;
 
   &:focus {
@@ -182,6 +183,7 @@ fieldset[disabled] .rw-widget {
   color: $input-color;
   background-color: $input-bg;
   box-shadow: $input-box-shadow;
+  background-clip: $widget-background-clip;
 
   // Listbox is also the rw-widget
   &.rw-state-disabled,
@@ -206,28 +208,11 @@ fieldset[disabled] .rw-widget {
 .rw-detect-autofill {
   @include mixins.btn-input-reset;
   @include mixins.input-base;
-
-  // &:autofill,
-  // &:-webkit-autofill {
-  //   border-radius: 30px;
-  //   animation-name: react-widgets-autofill-start;
-
-  //   // Make the backgound color become yellow _really slowly_
-  //   transition: background-color 50000s ease-in-out 0s;
-  // }
-
-  // &:not(:autofill),
-  // &:not(:-webkit-autofill) {
-  //   animation-name: react-widgets-autofill-cancel;
-  // }
 }
 
 .rw-detect-autofill:-webkit-autofill {
-  // height: 50px;
   animation-name: react-widgets-autofill-start;
   animation-duration: 0.01ms;
-  // animation-delay: 0.01ms;
-  // transition: background-color 50000s ease-in-out 0s;
 }
 
 .rw-detect-autofill:not(:-webkit-autofill) {