From eac9d1e79677e410fa104a7272af5529efbb90c6 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Tue, 24 Nov 2015 14:13:29 -0600 Subject: [PATCH] #745 btn-group and variations reworked, only fab left to review --- bootstrap-elements.html | 118 ++++++++++++++++----------- less/_bootstrap-material-design.less | 2 + less/_buttons.less | 105 ++++++++---------------- less/_cards.less | 2 +- less/_checkboxes.less | 3 +- less/_dialogs.less | 2 +- less/_inputs.less | 2 +- less/_navbar.less | 2 +- less/_popups.less | 2 +- less/_variables.less | 11 +-- less/_welljumbo.less | 2 +- less/plugins/_plugin-nouislider.less | 2 +- less/plugins/_plugin-selectize.less | 2 +- less/plugins/_plugin-snackbarjs.less | 2 +- 14 files changed, 124 insertions(+), 133 deletions(-) diff --git a/bootstrap-elements.html b/bootstrap-elements.html index 71ad05bb..cffc7ba5 100644 --- a/bootstrap-elements.html +++ b/bootstrap-elements.html @@ -505,7 +505,7 @@
-

Flat buttons default - no class needed

+

flat - default - no class needed

btn only .active @@ -519,7 +519,7 @@

-

Raised buttons .btn-raised

+

.btn-raised

.active Default @@ -531,14 +531,51 @@ Link

+ +

Button sizes

+ +

+ Large button + Default button + Small button + Mini button +

+ +

Floating action buttons

+

+ grade + grade + grade + grade + grade + grade +

+ + +
+

Group variations with .btn-raised

Button groups

-
+
- Default - + btn only + + +
+ + + +
+ Default raised +
- Primary - + Primary raised +
- -

Button sizes

- + + + +

btn-lg.btn-block.btn-raised

- Large button - Default button - Small button - Mini button -

- -

Floating action buttons

-

- grade - grade - grade - grade - grade - grade -

- -
-
- -

- Block level button + Block level button

-
- Left - Middle - Right +

btn-group.btn-group-justified.btn-group-raised

+
+ Left + Middle + Right
+

btn-toolbar

- 1 - 2 - 3 - 4 + 1 + 2 + 3 + 4
- 5 - 6 - 7 + 5 + 6 + 7
- 8 + 8
- + Dropdown @@ -679,14 +699,16 @@
+

.btn-group-vertical

- Button - Button - Button - Button + Button + Button + Button + Button
+
diff --git a/less/_bootstrap-material-design.less b/less/_bootstrap-material-design.less index fc54f42f..5be04228 100644 --- a/less/_bootstrap-material-design.less +++ b/less/_bootstrap-material-design.less @@ -115,5 +115,7 @@ legend { } +@import "_themes.less"; + // External plugins @import "_plugins.less"; diff --git a/less/_buttons.less b/less/_buttons.less index f63ac3b8..c4d75346 100644 --- a/less/_buttons.less +++ b/less/_buttons.less @@ -25,7 +25,7 @@ .btn, .input-group-btn .btn { border: none; - border-radius: @mdl-btn-border-radus; + border-radius: @border-radius-base; position: relative; padding: 8px 30px; margin: 10px 1px; @@ -42,7 +42,6 @@ border: 0; } - //--- // btn-flat background: transparent; @@ -95,33 +94,6 @@ } } - //&:not(.btn-link):not(.btn-flat) { - // background-color: @mdb-btn-background-color; - // color: @mdb-text-color-primary; - // - // &:not(.btn-fab) { - // &:hover { - // .shadow-z-1(); - // } - // &:active { - // .shadow-z-1-hover(); - // } - // } - //} - - //transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); - //outline: none !important; - - //.btn-flat:not(.btn-link){ - // color: @mdb-text-color-primary; - //} - - //// BTN flat hover effect - //// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content - //.generic-variations(~".btn-flat:hover:not(.btn-link)", @mdb-btn-background-color, { - // background-color: fade(@variation-color, 20%); - //}); - // Size variations &.btn-sm { padding: 5px 20px; @@ -204,46 +176,41 @@ .theme-dark & { color: fade(#FFFFFF, 30%); } + + background: transparent; } } -// This is needed to style buttons which has not a variation suffix (they must be stiled as btn-default) -//.btn-link, -//.btn:not([class*="btn-"]), -//.btn-default { -// color: @mdb-text-color-primary; -// &:hover { -// color: @mdb-text-color-primary; -// } -//} -//.btn:not([class*="btn-"]), .btn-default, .btn-flat:not(.btn-link) { -// &:hover, &.active { -// background-color: rgba(255,255,255,0.5); -// } -//} -//.open > .dropdown-toggle.btn { -// .variations(~"", background-color, @mdb-btn-background-color); -//} -//.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group { -// margin-left: 0; -//} -//.btn-group, .btn-group-vertical { -// position: relative; -// border-radius: 2px; -// margin: 10px 1px; -// -// .btn-shadow(); -// &.open .dropdown-toggle { -// box-shadow: none; -// } -// &.btn-group-raised { -// .btn-shadow(); -// } -// .btn, .btn:active, .btn-group { -// box-shadow: none !important; -// margin: 0; -// } -//} -//.btn-group-flat { -// box-shadow: none !important; -//} +// btn-group variations +.btn-group, +.btn-group-vertical { + + position: relative; + //border-radius: 2px; + margin: 10px 1px; + + &.open { + .dropdown-toggle { + //box-shadow: none; + } + + & > .dropdown-toggle.btn { + .variations(~".btn", ~"", background-color, @mdb-btn-background-color); + } + } + + .dropdown-menu { + border-radius: 0 0 @border-radius-base @border-radius-base; + } + + &.btn-group-raised { + .shadow-2dp(); + } + + & .btn+.btn, + .btn, + .btn:active, + .btn-group { + margin: 0; + } +} diff --git a/less/_cards.less b/less/_cards.less index 52813af1..b4209000 100644 --- a/less/_cards.less +++ b/less/_cards.less @@ -19,7 +19,7 @@ /**************************************************************************/ - border-radius: 2px; + border-radius: @border-radius-base; color: @mdb-card-body-text; background: @mdb-card-body-background; diff --git a/less/_checkboxes.less b/less/_checkboxes.less index f0f41a96..17b1a970 100644 --- a/less/_checkboxes.less +++ b/less/_checkboxes.less @@ -46,8 +46,7 @@ display: inline-block; width: @mdb-checkbox-size; height: @mdb-checkbox-size; - border: 2px solid @mdb-checkbox-border-color; - border-radius: 2px; + border: @border-radius-base solid @mdb-checkbox-border-color; overflow: hidden; z-index: 1; } diff --git a/less/_dialogs.less b/less/_dialogs.less index 2d2071b5..30680e7b 100644 --- a/less/_dialogs.less +++ b/less/_dialogs.less @@ -4,7 +4,7 @@ // -------------------------------------------------- .modal-content { .shadow-z-5(); - border-radius: 2px; + border-radius: @border-radius-base; border: none; // Modal header // Top section of the modal w/ title and dismiss diff --git a/less/_inputs.less b/less/_inputs.less index 6e90dd4b..cbc08a25 100644 --- a/less/_inputs.less +++ b/less/_inputs.less @@ -2,7 +2,7 @@ // label variations .label { - border-radius: 1px; + border-radius: @border-radius-small; .variations(~".label", ~"", background-color, @grey); } diff --git a/less/_navbar.less b/less/_navbar.less index 764b46a7..e8efe92d 100755 --- a/less/_navbar.less +++ b/less/_navbar.less @@ -196,7 +196,7 @@ }); } .dropdown-menu { - border-radius: @mdb-dropdown-radius; + border-radius: @border-radius-base; li > a { font-size: @mdb-dropdown-font-size; padding: 13px 16px; diff --git a/less/_popups.less b/less/_popups.less index 0b7f71b9..3d0be734 100644 --- a/less/_popups.less +++ b/less/_popups.less @@ -3,7 +3,7 @@ line-height: 1em; background: @mdb-popover-background; border: none; - border-radius: @mdb-border-radius; + border-radius: @border-radius-base; .shadow-z-1(); } diff --git a/less/_variables.less b/less/_variables.less index e50b1c57..88a8fcc8 100644 --- a/less/_variables.less +++ b/less/_variables.less @@ -25,6 +25,9 @@ @brand-warning: @deep-orange; @brand-info: @light-blue; +@border-radius-base: 2px; +@border-radius-small: 1px; + // Typography @font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif; @headings-font-weight: 300; @@ -54,7 +57,6 @@ @mdb-radio-default: @mdb-text-color-primary; -@mdb-border-radius: 2px; // -------------------- // inputs @@ -94,9 +96,9 @@ @mdb-input-padding-xs-vertical: 2px; // 1 @mdb-input-padding-xs-horizontal: 0px; // 5 -@mdb-input-border-radius-base: 4px; -@mdb-input-border-radius-large: 6px; -@mdb-input-border-radius-small: 3px; +@mdb-input-border-radius-base: 0; +@mdb-input-border-radius-large: 0; +@mdb-input-border-radius-small: 0; //** Default `.form-control` height @@ -130,7 +132,6 @@ @mdb-popover-color: #ececec; // Dropdown Menu -@mdb-dropdown-radius: 2px; @mdb-dropdown-font-size: 16px; // Toggle diff --git a/less/_welljumbo.less b/less/_welljumbo.less index 6cf81415..16bb9372 100644 --- a/less/_welljumbo.less +++ b/less/_welljumbo.less @@ -15,7 +15,7 @@ body { padding: 19px; margin-bottom: 20px; .shadow-z-2(); - border-radius: 2px; + border-radius: @border-radius-base; border: 0; p { font-weight: 300; diff --git a/less/plugins/_plugin-nouislider.less b/less/plugins/_plugin-nouislider.less index 0c1dccee..3dcce4c4 100644 --- a/less/plugins/_plugin-nouislider.less +++ b/less/plugins/_plugin-nouislider.less @@ -76,7 +76,7 @@ } } .noUi-target { - border-radius: 2px; + border-radius: @border-radius-base; } .noUi-horizontal { height: 2px; diff --git a/less/plugins/_plugin-selectize.less b/less/plugins/_plugin-selectize.less index a212dad9..91f6edf8 100644 --- a/less/plugins/_plugin-selectize.less +++ b/less/plugins/_plugin-selectize.less @@ -68,7 +68,7 @@ height: auto; background-color: #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - border-radius: 2px; + border-radius: @border-radius-base; padding: 0; margin-top: 3px; .active { diff --git a/less/plugins/_plugin-snackbarjs.less b/less/plugins/_plugin-snackbarjs.less index 320bb43d..417284fa 100644 --- a/less/plugins/_plugin-snackbarjs.less +++ b/less/plugins/_plugin-snackbarjs.less @@ -6,7 +6,7 @@ background-color: #323232; color: @mdb-text-color-light; font-size: 14px; - border-radius: 2px; + border-radius: @border-radius-base; .shadow-z-1; // Animation