fix(bootstrap): button group, modal and input (#1540)

akveo · May 30, 2019 · 2a177c0 · 2a177c0
1 parent 0a2354b
commit 2a177c0
Show file tree

Hide file tree

Showing 10 changed files with 224 additions and 145 deletions.
diff --git a/src/framework/bootstrap/styles/_button-group.scss b/src/framework/bootstrap/styles/_button-group.scss
@@ -36,27 +36,27 @@
 }
 
 @mixin dropdown-primary-separator() {
- @include dropdown-separator(nb-theme(btn-primary-active-bg));
+ @include dropdown-separator(nb-theme(button-filled-primary-active-background-color));
 }
 
 @mixin dropdown-success-separator() {
- @include dropdown-separator(nb-theme(btn-success-active-bg));
+ @include dropdown-separator(nb-theme(button-filled-success-active-background-color));
 }
 
 @mixin dropdown-warning-separator() {
- @include dropdown-separator(nb-theme(btn-warning-active-bg));
+ @include dropdown-separator(nb-theme(button-filled-warning-active-background-color));
 }
 
 @mixin dropdown-info-separator() {
- @include dropdown-separator(nb-theme(btn-info-active-bg));
+ @include dropdown-separator(nb-theme(button-filled-info-active-background-color));
 }
 
 @mixin dropdown-danger-separator() {
- @include dropdown-separator(nb-theme(btn-danger-active-bg));
+ @include dropdown-separator(nb-theme(button-filled-danger-active-background-color));
 }
 
 @mixin dropdown-secondary-separator() {
- @include dropdown-separator(nb-theme(btn-secondary-active-bg));
+ @include dropdown-separator(nb-theme(button-filled-primary-active-background-color));
 }
 
 
@@ -88,31 +88,48 @@
  }
  }
 
+ @each $status in nb-get-statuses() {
+ .btn-group:not(.btn-divided-group) {
+ .btn.btn-outline-#{$status}.active {
+ background-color: nb-theme(button-filled-#{$status}-active-background-color);
+ border-color: nb-theme(button-filled-#{$status}-active-border-color);
+ color: nb-theme(button-filled-#{$status}-text-color);
+ }
+
+ .btn.btn-outline-#{$status}:hover,
+ .btn.btn-outline-#{$status}.hover {
+ background-color: nb-theme(button-filled-#{$status}-hover-background-color);
+ border-color: nb-theme(button-filled-#{$status}-hover-border-color);
+ color: nb-theme(button-filled-#{$status}-text-color);
+ }
+ }
+ }
+
  .btn-group:not(.btn-divided-group) > .btn:not(.dropdown-toggle) {
  &:first-child {
  @include nb-ltr() {
- border-top-left-radius: nb-theme(btn-border-radius);
- border-bottom-left-radius: nb-theme(btn-border-radius);
+ border-top-left-radius: nb-theme(button-rectangle-border-radius);
+ border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  };
  @include nb-rtl() {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
- border-top-right-radius: nb-theme(btn-border-radius);
- border-bottom-right-radius: nb-theme(btn-border-radius);
+ border-top-right-radius: nb-theme(button-rectangle-border-radius);
+ border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
  };
  }
  &:last-child {
  @include nb-ltr() {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
- border-top-right-radius: nb-theme(btn-border-radius);
- border-bottom-right-radius: nb-theme(btn-border-radius);
+ border-top-right-radius: nb-theme(button-rectangle-border-radius);
+ border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
  };
  @include nb-rtl() {
- border-top-left-radius: nb-theme(btn-border-radius);
- border-bottom-left-radius: nb-theme(btn-border-radius);
+ border-top-left-radius: nb-theme(button-rectangle-border-radius);
+ border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  };
@@ -122,43 +139,43 @@
  .btn-group.dropdown {
  & > .btn:first-of-type.dropdown-toggle {
  @include nb-ltr() {
- border-top-left-radius: nb-theme(btn-border-radius);
+ border-top-left-radius: nb-theme(button-rectangle-border-radius);
  border-top-right-radius: 0;
  };
  @include nb-rtl() {
  border-top-left-radius: 0;
- border-top-right-radius: nb-theme(btn-border-radius);
+ border-top-right-radius: nb-theme(button-rectangle-border-radius);
  };
  }
  & > .btn:last-of-type.dropdown-toggle {
  @include nb-ltr() {
  border-top-left-radius: 0;
- border-top-right-radius: nb-theme(btn-border-radius);
+ border-top-right-radius: nb-theme(button-rectangle-border-radius);
  };
  @include nb-rtl() {
- border-top-left-radius: nb-theme(btn-border-radius);
+ border-top-left-radius: nb-theme(button-rectangle-border-radius);
  border-top-right-radius: 0;
  };
  }
 
  &:not(.show) {
  & > .btn:first-of-type.dropdown-toggle {
  @include nb-ltr() {
- border-bottom-left-radius: nb-theme(btn-border-radius);
+ border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
  border-bottom-right-radius: 0;
  };
  @include nb-rtl() {
  border-bottom-left-radius: 0;
- border-bottom-right-radius: nb-theme(btn-border-radius);
+ border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
  };
  }
  & > .btn:last-of-type.dropdown-toggle {
  @include nb-ltr() {
  border-bottom-left-radius: 0;
- border-bottom-right-radius: nb-theme(btn-border-radius);
+ border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
  };
  @include nb-rtl() {
- border-bottom-left-radius: nb-theme(btn-border-radius);
+ border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
  border-bottom-right-radius: 0;
  };
  }
@@ -173,43 +190,43 @@
  .btn-group.dropup {
  & > .btn:first-of-type.dropdown-toggle {
  @include nb-ltr() {
- border-bottom-left-radius: nb-theme(btn-border-radius);
+ border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
  border-bottom-right-radius: 0;
  };
  @include nb-rtl() {
  border-bottom-left-radius: 0;
- border-bottom-right-radius: nb-theme(btn-border-radius);
+ border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
  };
  }
  & > .btn:last-of-type.dropdown-toggle {
  @include nb-ltr() {
  border-bottom-left-radius: 0;
- border-bottom-right-radius: nb-theme(btn-border-radius);
+ border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
  };
  @include nb-rtl() {
- border-bottom-left-radius: nb-theme(btn-border-radius);
+ border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
  border-bottom-right-radius: 0;
  };
  }
 
  &:not(.show) {
  & > .btn:first-of-type.dropdown-toggle {
  @include nb-ltr() {
- border-top-left-radius: nb-theme(btn-border-radius);
+ border-top-left-radius: nb-theme(button-rectangle-border-radius);
  border-top-right-radius: 0;
  };
  @include nb-rtl() {
  border-top-left-radius: 0;
- border-top-right-radius: nb-theme(btn-border-radius);
+ border-top-right-radius: nb-theme(button-rectangle-border-radius);
  };
  }
  & > .btn:last-of-type.dropdown-toggle {
  @include nb-ltr() {
  border-top-left-radius: 0;
- border-top-right-radius: nb-theme(btn-border-radius);
+ border-top-right-radius: nb-theme(button-rectangle-border-radius);
  };
  @include nb-rtl() {
- border-top-left-radius: nb-theme(btn-border-radius);
+ border-top-left-radius: nb-theme(button-rectangle-border-radius);
  border-top-right-radius: 0;
  };
  }
@@ -227,74 +244,52 @@
  }
 
  .btn-divided-group {
- .btn {
- background-color: nb-theme(btn-group-bg);
- color: nb-theme(btn-group-fg);
- }
-
- .btn:active,
- .btn.active {
- &.btn-primary,
- &.btn-outline-primary {
- background-color: nb-theme(btn-primary-bg);
+ @each $status in nb-get-statuses() {
+ .btn-#{$status} {
+ background-color: nb-theme(button-filled-#{$status}-background-color);
+ border-color: nb-theme(button-filled-#{$status}-border-color);
+ color: nb-theme(button-filled-#{$status}-text-color);
  }
-
- &.btn-success,
- &.btn-outline-success {
- background-color: nb-theme(btn-success-bg);
- }
-
- &.btn-warning,
- &.btn-outline-warning {
- background-color: nb-theme(btn-warning-bg);
+ .btn-outline-#{$status} {
+ background-color: nb-theme(button-outline-background-color);
+ border-color: nb-theme(button-outline-#{$status}-border-color);
+ color: nb-theme(button-outline-#{$status}-text-color);
  }
 
- &.btn-info,
- &.btn-outline-info {
- background-color: nb-theme(btn-info-bg);
+ .btn:active,
+ .btn.active {
+ &.btn-#{$status},
+ &.btn-outline-#{$status} {
+ background-color: nb-theme(button-filled-#{$status}-active-background-color);
+ border-color: nb-theme(button-filled-#{$status}-active-border-color);
+ color: nb-theme(button-filled-#{$status}-text-color);
+ }
  }
 
- &.btn-danger,
- &.btn-outline-danger {
- background-color: nb-theme(btn-danger-bg);
+ .btn:hover,
+ .btn.hover {
+ &.btn-#{$status},
+ &.btn-outline-#{$status} {
+ background-color: nb-theme(button-filled-#{$status}-hover-background-color);
+ border-color: nb-theme(button-filled-#{$status}-hover-border-color);
+ color: nb-theme(button-filled-#{$status}-text-color);
+ }
  }
+ }
 
+ .btn:active,
+ .btn.active {
  &.btn-secondary,
  &.btn-outline-secondary {
- border-color: nb-theme(btn-secondary-border);
+ background-color: nb-theme(button-filled-primary-active-background-color);
  }
  }
 
  .btn:hover,
  .btn.hover {
- &.btn-primary,
- &.btn-outline-primary {
- @include btn-primary-hover();
- }
-
- &.btn-success,
- &.btn-outline-success {
- @include btn-success-hover();
- }
-
- &.btn-warning,
- &.btn-outline-warning {
- @include btn-warning-hover();
- }
-
- &.btn-info,
- &.btn-outline-info {
- @include btn-info-hover();
- }
-
- &.btn-danger,
- &.btn-outline-danger {
- @include btn-danger-hover();
- }
-
  &.btn-secondary,
  &.btn-outline-secondary {
- @include btn-secondary-hover();
+ background-color: nb-theme(button-filled-primary-hover-background-color);
  }
  }
  }
@@ -306,7 +301,7 @@
 
  .btn:not(.active):not(:hover) + .btn:not(.active):not(:hover) {
  &::before {
- background-color: nb-theme(separator);
+ background-color: nb-theme(divider-color);
  }
  }
  }
@@ -315,15 +310,15 @@
  .btn:not(:first-child) {
  @include nb-ltr(margin-left, 0.5rem);
  @include nb-rtl(margin-right, 0.5rem);
- border-radius: nb-theme(btn-border-radius);
+ border-radius: nb-theme(button-rectangle-border-radius);
  }
 
  .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
- border-radius: nb-theme(btn-border-radius);
+ border-radius: nb-theme(button-rectangle-border-radius);
  }
 
  .btn:not(:last-child):not(.dropdown-toggle) {
- border-radius: nb-theme(btn-border-radius);
+ border-radius: nb-theme(button-rectangle-border-radius);
  }
  }
 

diff --git a/src/framework/bootstrap/styles/_default-form-control.scss b/src/framework/bootstrap/styles/_default-form-control.scss
@@ -23,25 +23,57 @@
 }
 
 @mixin form-control-success() {
- &, &:focus {
+ & {
  border-color: nb-theme(input-success-border-color);
  }
+
+ &:focus {
+ border-color: nb-theme(input-success-focus-border-color);
+ }
+
+ &:hover {
+ border-color: nb-theme(input-success-hover-border-color);
+ }
 }
 
 @mixin form-control-info() {
- &, &:focus {
+ & {
  border-color: nb-theme(input-info-border-color);
  }
+
+ &:focus {
+ border-color: nb-theme(input-info-focus-border-color);
+ }
+
+ &:hover {
+ border-color: nb-theme(input-info-hover-border-color);
+ }
 }
 
 @mixin form-control-danger() {
- &, &:focus {
+ & {
  border-color: nb-theme(input-danger-border-color);
  }
+
+ &:focus {
+ border-color: nb-theme(input-danger-focus-border-color);
+ }
+
+ &:hover {
+ border-color: nb-theme(input-danger-hover-border-color);
+ }
 }
 
 @mixin form-control-warning() {
- &, &:focus {
+ & {
  border-color: nb-theme(input-warning-border-color);
  }
+
+ &:focus {
+ border-color: nb-theme(input-warning-focus-border-color);
+ }
+
+ &:hover {
+ border-color: nb-theme(input-warning-hover-border-color);
+ }
 }