V2 panel fix (#148)

* fix panel blank spacing * fixed toggle color on dark background
TykTechnologies · Aug 7, 2020 · d6d06cc · d6d06cc
1 parent 4f09585
commit d6d06cc
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 18 deletions.
diff --git a/lib/index.css b/lib/index.css
diff --git a/lib/index.js.map b/lib/index.js.map
diff --git a/lib/sass/components/Panel/sass/Panel.scss b/lib/sass/components/Panel/sass/Panel.scss
@@ -6,7 +6,7 @@
 .tyk-panel {
   background: white;
   border-radius: $panel-border-radius;
-  margin-bottom: map-get($spacing, 'md');
+  margin-bottom: 20px;
   font-family: $font-family-medium;
   position: relative;
 
@@ -23,7 +23,7 @@
 
     > .tyk-icon,
     > .tyk-tooltip__wrapper {
-      margin-left: map-get($spacing, 'xs');
+      margin-left: 5px;
     }
   }
 
@@ -35,15 +35,15 @@
 
   &--blank {
     &.tyk-panel--collapsed {
-      margin-bottom: map-get($spacing, 'md');
+      margin-bottom: 20px;
 
       .tyk-panel__header {
         margin-bottom: 0;
       }
     }
 
     .tyk-panel__header {
-      margin-bottom: -map-get($spacing, 'md');
+      margin-bottom: -20px;
       padding: $padding-y-blank-panel-header $padding-x-panel-header;
       @include panel-variant(
         white,
@@ -169,7 +169,7 @@
   .collapsable__arrow-left {
     font-size: text-scale('sm');
     position: absolute;
-    padding: 8px 0px map-get($spacing, 'sm') map-get($spacing, 'md');
+    padding: 8px 0px map-get($spacing, 'sm') 20px;
     left: 0px;
     top: calc(50% - 21px);
   }
@@ -183,6 +183,6 @@
   padding: map-get($spacing, 'lg');
 
   >:not(:first-child) {
-    margin-left: map-get($spacing, 'xs');
+    margin-left: 5px;
   }
 }
diff --git a/lib/sass/components/Toggle/sass/Toggle.scss b/lib/sass/components/Toggle/sass/Toggle.scss
@@ -298,6 +298,10 @@
     color: $toggle-list-text-color-on-dark;
   }
 
+  &--on-dark &__item-notch--single {
+    background: theme-color('background', 'light');
+  }
+
   &--sm label {
     @include button-size(
       calc(#{$padding-y-button-sm} + 2px),

diff --git a/lib/sass/components/Toggle/sass/variables.scss b/lib/sass/components/Toggle/sass/variables.scss
@@ -1,7 +1,7 @@
 $toggle-font-family: $font-family-bold !default;
 $toggle-list-background-color: theme-color('background', 'light') !default;
 $toggle-list-text-color: white !default;
-$toggle-list-background-color-on-dark: theme-color('background', 'light') !default;
+$toggle-list-background-color-on-dark: white !default;
 $toggle-list-text-color-on-dark: $text-color !default;
 $toggle-top: 4px !default;
 $toggle-bottom: 4px !default;

diff --git a/lib/tyk-ui.css b/lib/tyk-ui.css
diff --git a/src/components/Panel/sass/Panel.scss b/src/components/Panel/sass/Panel.scss
@@ -6,7 +6,7 @@
 .tyk-panel {
   background: white;
   border-radius: $panel-border-radius;
-  margin-bottom: map-get($spacing, 'md');
+  margin-bottom: 20px;
   font-family: $font-family-medium;
   position: relative;
 
@@ -23,7 +23,7 @@
 
     > .tyk-icon,
     > .tyk-tooltip__wrapper {
-      margin-left: map-get($spacing, 'xs');
+      margin-left: 5px;
     }
   }
 
@@ -35,15 +35,15 @@
 
   &--blank {
     &.tyk-panel--collapsed {
-      margin-bottom: map-get($spacing, 'md');
+      margin-bottom: 20px;
 
       .tyk-panel__header {
         margin-bottom: 0;
       }
     }
 
     .tyk-panel__header {
-      margin-bottom: -map-get($spacing, 'md');
+      margin-bottom: -20px;
       padding: $padding-y-blank-panel-header $padding-x-panel-header;
       @include panel-variant(
         white,
@@ -169,7 +169,7 @@
   .collapsable__arrow-left {
     font-size: text-scale('sm');
     position: absolute;
-    padding: 8px 0px map-get($spacing, 'sm') map-get($spacing, 'md');
+    padding: 8px 0px map-get($spacing, 'sm') 20px;
     left: 0px;
     top: calc(50% - 21px);
   }
@@ -183,6 +183,6 @@
   padding: map-get($spacing, 'lg');
 
   >:not(:first-child) {
-    margin-left: map-get($spacing, 'xs');
+    margin-left: 5px;
   }
 }
diff --git a/src/components/Toggle/sass/Toggle.scss b/src/components/Toggle/sass/Toggle.scss
@@ -298,6 +298,10 @@
     color: $toggle-list-text-color-on-dark;
   }
 
+  &--on-dark &__item-notch--single {
+    background: theme-color('background', 'light');
+  }
+
   &--sm label {
     @include button-size(
       calc(#{$padding-y-button-sm} + 2px),

diff --git a/src/components/Toggle/sass/variables.scss b/src/components/Toggle/sass/variables.scss
@@ -1,7 +1,7 @@
 $toggle-font-family: $font-family-bold !default;
 $toggle-list-background-color: theme-color('background', 'light') !default;
 $toggle-list-text-color: white !default;
-$toggle-list-background-color-on-dark: theme-color('background', 'light') !default;
+$toggle-list-background-color-on-dark: white !default;
 $toggle-list-text-color-on-dark: $text-color !default;
 $toggle-top: 4px !default;
 $toggle-bottom: 4px !default;

diff --git a/tyk-ui-styleguide b/tyk-ui-styleguide