mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-11-04 01:47:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

- fixed toggle focus label colors so they were not distracting

Browse Source 
- fixed select osx styling
This commit is contained in:
Kevin Ross 2015-12-08 20:25:35 -06:00
parent 1f8874a1d3
commit 6ce94151bd
8 changed files with 51 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
scss/_checkboxes.scss
View File

@ -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;

52
scss/_forms.scss
View File

@ -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] {

2
scss/_mixins.scss
View File

@ -1,4 +1,4 @@
@import "mixins/utilities";
@import "mixins/shadows";
@import "mixins/variations";
@import "mixins/inputs";
@import "mixins/forms";

4
scss/_radios.scss
View File

@ -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 {

2
scss/_switch.scss
View File

@ -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] {

15
scss/_variables.scss
View File

@ -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:

25
scss/mixins/_forms.scss Normal file
View File

@ -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
//}

10
scss/mixins/_inputs.scss
View File

@ -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
}