From 6ce94151bda012ab19a2d624ce8c79d511703340 Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Tue, 8 Dec 2015 20:25:35 -0600
Subject: [PATCH] - fixed toggle focus label colors so they were not
distracting - fixed select osx styling
---
scss/_checkboxes.scss | 3 ++-
scss/_forms.scss | 52 ++++++++++------------------------------
scss/_mixins.scss | 2 +-
scss/_radios.scss | 4 +++-
scss/_switch.scss | 2 +-
scss/_variables.scss | 15 +++++-------
scss/mixins/_forms.scss | 25 +++++++++++++++++++
scss/mixins/_inputs.scss | 10 --------
8 files changed, 51 insertions(+), 62 deletions(-)
create mode 100644 scss/mixins/_forms.scss
delete mode 100644 scss/mixins/_inputs.scss
diff --git a/scss/_checkboxes.scss b/scss/_checkboxes.scss
index 97c81dcb..84301777 100644
--- a/scss/_checkboxes.scss
+++ b/scss/_checkboxes.scss
@@ -4,9 +4,10 @@ label.checkbox-inline,
.checkbox label,
.checkbox-inline label {
padding-left: 0; // Reset for Bootstrap rule
- color: $mdb-checkbox-label-color;
cursor: pointer;
+ @include mdb-label-color-toggle-focus();
+
// Hide native checkbox
input[type=checkbox] {
position: absolute;
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 30ada79f..09153298 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -1,9 +1,3 @@
-// label variations
-.label {
- border-radius: $border-radius-small;
- //@include variations(unquote(""), background-color, $grey);
-}
-
// must be broken out for reuse - webkit selector breaks firefox
@mixin label-static($label-top, $static-font-size, $static-line-height) {
label.control-label {
@@ -20,7 +14,6 @@
// @include material-placeholder {
// font-size: $placeholder-font-size;
// line-height: $line-height;
- // color: $mdb-input-placeholder-color;
// font-weight: 400;
// }
//
@@ -35,7 +28,6 @@
label {
//font-size: $placeholder-font-size;
//line-height: $line-height;
- //color: $mdb-input-placeholder-color;
//font-weight: 400;
}
@@ -43,8 +35,6 @@
label.control-label {
//font-size: $static-font-size;
//line-height: $static-line-height;
- //color: $mdb-input-placeholder-color;
- //font-weight: 400;
//margin: 16px 0 0 0; // std and lg
}
@@ -264,21 +254,22 @@
}
}
- .help-block {
- //display: block;
- }
+ //.help-block {
+ // display: block;
+ //}
}
- textarea {
- //resize: none;
- }
+ //textarea {
+ // resize: none;
+ //}
+}
- select {
- //appearance: none; // Fix for OS X
-
- ~ .mdb-form-control-decorator::after {
- //display: none;
- }
+select {
+ &,
+ &.form-control {
+ // Use vendor prefixes as `appearance` isn't part of the CSS spec. OSX doesn't obey the border-radius: 0 without this.
+ -moz-appearance: none;
+ -webkit-appearance: none;
}
}
@@ -294,23 +285,6 @@
// lg floating size/location
@include mdb-form-group-size-variant(unquote(".mdb-form-group.mdb-form-group-lg"), $font-size-lg, $mdb-label-top-margin-lg, $mdb-input-padding-y-lg, $line-height-lg, $mdb-label-as-placeholder-shim-lg);
-select.form-control {
- //border: 0;
- //box-shadow: none;
- //border-radius: 0;
-
- .mdb-form-group.is-focused & {
- //box-shadow: none;
- //border-color: $mdb-input-underline-color;
- }
-
- &[multiple] {
- &,
- .mdb-form-group.is-focused & {
- //height: 85px;
- }
- }
-}
// Input files - hide actual input - requires specific markup in the sample.
//.mdb-form-group input[type=file] {
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 971959ef..6f7590ac 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -1,4 +1,4 @@
@import "mixins/utilities";
@import "mixins/shadows";
@import "mixins/variations";
-@import "mixins/inputs";
+@import "mixins/forms";
diff --git a/scss/_radios.scss b/scss/_radios.scss
index c8b96bfa..de5dfc35 100644
--- a/scss/_radios.scss
+++ b/scss/_radios.scss
@@ -19,7 +19,9 @@ label.radio-inline,
.radio-inline label {
position: relative;
padding-left: 45px;
- color: $mdb-radio-label-color;
+
+ @include mdb-label-color-toggle-focus();
+
cursor: pointer;
span {
diff --git a/scss/_switch.scss b/scss/_switch.scss
index b9e6cdec..a1ed89db 100644
--- a/scss/_switch.scss
+++ b/scss/_switch.scss
@@ -4,8 +4,8 @@
user-select: none;
}
label {
- color: $mdb-switch-label-color;
cursor: pointer;
+ @include mdb-label-color-toggle-focus();
// Hide original checkbox
input[type=checkbox] {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2f8383cc..5d1191b2 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -46,7 +46,9 @@ $contrast-factor: 40% !default;
// inputs
//$mdb-input-placeholder-color: #BDBDBD !default;
-$mdb-label-color: rgba($black, 0.26) !default; // synced
+$mdb-label-color: rgba($black, 0.26) !default;
+$mdb-label-color-toggle-focus: rgba($black, .54) !default;
+
//$mdb-input-underline-color: #d2d2d2 !default;
$mdb-label-static-size-ratio: 75 / 100 !default;
@@ -79,9 +81,8 @@ $background-disabled: #eaeaea !default;
$mdb-checkbox-size: 20px !default;
$mdb-checkbox-animation-ripple: 500ms !default;
$mdb-checkbox-animation-check: 0.3s !default;
-$mdb-checkbox-checked-color: #4caf50 !default;
-$mdb-checkbox-label-color: rgba($black, .54) !default;
-$mdb-checkbox-border-color: $mdb-checkbox-label-color !default;
+$mdb-checkbox-checked-color: $brand-primary; // #4caf50 !default;
+$mdb-checkbox-border-color: $mdb-label-color-toggle-focus !default;
// Popovers and Popups
$mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
@@ -90,12 +91,8 @@ $mdb-popover-color: #ececec !default;
// Dropdown Menu
$mdb-dropdown-font-size: 16px !default;
-// Toggle
-$mdb-switch-label-color: $mdb-checkbox-label-color !default;
-
// Radio:
-$mdb-radio-label-color: $mdb-checkbox-label-color !default;
-$mdb-radio-color-off: $mdb-checkbox-border-color !default;
+$mdb-radio-color-off: $mdb-label-color-toggle-focus !default;
$mdb-radio-color-on: $brand-primary !default;
// Buttons:
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
new file mode 100644
index 00000000..6374b913
--- /dev/null
+++ b/scss/mixins/_forms.scss
@@ -0,0 +1,25 @@
+@mixin mdb-label-color-toggle-focus() {
+ // override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
+ .mdb-form-group.is-focused & {
+ color: $mdb-label-color;
+
+ // on focus just darken the specific labels, do not turn them to the brand-primary
+ &:hover,
+ &:focus {
+ color: $mdb-label-color-toggle-focus;
+ }
+ }
+}
+
+//// Placeholder text
+//@mixin material-placeholder() {
+// &::placeholder {
+// @content;
+// }
+// // Firefox
+// //&::-moz-placeholder {@content; } // Firefox
+// //&:-ms-input-placeholder {@content; } // Internet Explorer 10+
+// //&::-webkit-input-placeholder {@content; } // Safari and Chrome
+//}
+
+
diff --git a/scss/mixins/_inputs.scss b/scss/mixins/_inputs.scss
deleted file mode 100644
index 1aa5155d..00000000
--- a/scss/mixins/_inputs.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// Placeholder text
-@mixin material-placeholder() {
- &::placeholder {
- @content;
- }
- // Firefox
- //&::-moz-placeholder {@content; } // Firefox
- //&:-ms-input-placeholder {@content; } // Internet Explorer 10+
- //&::-webkit-input-placeholder {@content; } // Safari and Chrome
-}