mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-27 12:04:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

#745 btn-group and variations reworked, only fab left to review

Browse Source
This commit is contained in:
Kevin Ross 2015-11-24 14:13:29 -06:00
parent edae99d6a6
commit eac9d1e796
14 changed files with 124 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
bootstrap-elements.html
View File

@ -505,7 +505,7 @@
<fieldset disabled> <fieldset disabled>
<h3>Flat buttons <small>default - no class needed</small></h3> <h3><small>flat - default - no class needed</small></h3>
<p class="bs-component"> <p class="bs-component">
<a href="javascript:void(0)" class="btn"><code>btn</code> only</a> <a href="javascript:void(0)" class="btn"><code>btn</code> only</a>
<a href="javascript:void(0)" class="btn active"><code>.active</code></a> <a href="javascript:void(0)" class="btn active"><code>.active</code></a>
@ -519,7 +519,7 @@
</p> </p>
<h3>Raised buttons <small><code>.btn-raised</code></small></h3> <h3><small><code>.btn-raised</code></small></h3>
<p class="bs-component"> <p class="bs-component">
<a href="javascript:void(0)" class="btn btn-raised active"><code>.active</code></a> <a href="javascript:void(0)" class="btn btn-raised active"><code>.active</code></a>
<a href="javascript:void(0)" class="btn btn-raised btn-default">Default</a> <a href="javascript:void(0)" class="btn btn-raised btn-default">Default</a>
@ -531,14 +531,51 @@
<a href="javascript:void(0)" class="btn btn-raised btn-link">Link</a> <a href="javascript:void(0)" class="btn btn-raised btn-link">Link</a>
</p> </p>
</fieldset> </fieldset>
<h3>Button sizes</h3>
<p class="bs-component">
<a href="javascript:void(0)" class="btn btn-primary btn-lg">Large button</a>
<a href="javascript:void(0)" class="btn btn-primary">Default button</a>
<a href="javascript:void(0)" class="btn btn-primary btn-sm">Small button</a>
<a href="javascript:void(0)" class="btn btn-primary btn-xs">Mini button</a>
</p>
<h3>Floating action buttons</h3>
<p class="bs-component">
<a href="javascript:void(0)" class="btn btn-default btn-fab btn-raised "><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-primary btn-fab btn-raised "><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-success btn-fab btn-raised "><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-info btn-fab btn-raised "><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-warning btn-fab btn-raised "><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-danger btn-fab btn-raised "><i class="material-icons">grade</i></a>
</p>
</div>
<div class="col-md-6">
<h2>Group variations with <small><code>.btn-raised</code></small></h2>
<h3>Button groups</h3> <h3>Button groups</h3>
<div style="margin-bottom: 15px;"> <div style="margin-bottom: 15px;">
<div class="btn-toolbar bs-component" style="margin: 0;"> <div class="btn-toolbar bs-component" style="margin: 0;">
<div class="btn-group"> <div class="btn-group">
<a href="javascript:void(0)" class="btn btn-default">Default</a> <a href="javascript:void(0)" class="btn">btn only</a>
<a href="bootstrap-elements.html" data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <a href="bootstrap-elements.html" data-target="#" class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<a href="javascript:void(0)" class="btn btn-default btn-raised">Default raised</a>
<a href="bootstrap-elements.html" data-target="#" class="btn btn-default btn-raised dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li> <li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li> <li><a href="javascript:void(0)">Another action</a></li>
@ -549,8 +586,8 @@
</div> </div>
<div class="btn-group"> <div class="btn-group">
<a href="javascript:void(0)" class="btn btn-primary">Primary</a> <a href="javascript:void(0)" class="btn btn-primary btn-raised">Primary raised</a>
<a href="bootstrap-elements.html" data-target="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <a href="bootstrap-elements.html" data-target="#" class="btn btn-primary btn-raised dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li> <li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li> <li><a href="javascript:void(0)">Another action</a></li>
@ -609,62 +646,45 @@
</div> </div>
</div> </div>
</div> </div>
<h3>Button sizes</h3>
<h3><small><code>btn-lg.btn-block.btn-raised</code></small></h3>
<p class="bs-component"> <p class="bs-component">
<a href="javascript:void(0)" class="btn btn-primary btn-lg">Large button</a> <a href="javascript:void(0)" class="btn btn-default btn-lg btn-block btn-raised">Block level button</a>
<a href="javascript:void(0)" class="btn btn-primary">Default button</a>
<a href="javascript:void(0)" class="btn btn-primary btn-sm">Small button</a>
<a href="javascript:void(0)" class="btn btn-primary btn-xs">Mini button</a>
</p>
<h3>Floating action buttons</h3>
<p class="bs-component">
<a href="javascript:void(0)" class="btn btn-default btn-fab btn-raised "><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-primary btn-fab btn-raised "><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-success btn-fab btn-raised "><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-info btn-fab btn-raised "><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-warning btn-fab btn-raised "><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-danger btn-fab btn-raised "><i class="material-icons">grade</i></a>
</p>
</div>
<div class="col-md-6">
<p class="bs-component">
<a href="javascript:void(0)" class="btn btn-default btn-lg btn-block">Block level button</a>
</p> </p>
<div class="bs-component" style="margin-bottom: 15px;"> <div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group btn-group-justified"> <h3><small><code>btn-group.btn-group-justified.btn-group-raised</code></small></h3>
<a href="javascript:void(0)" class="btn btn-default">Left</a> <div class="btn-group btn-group-justified btn-group-raised">
<a href="javascript:void(0)" class="btn btn-default">Middle</a> <a href="javascript:void(0)" class="btn ">Left</a>
<a href="javascript:void(0)" class="btn btn-default">Right</a> <a href="javascript:void(0)" class="btn ">Middle</a>
<a href="javascript:void(0)" class="btn ">Right</a>
</div> </div>
</div> </div>
<div class="bs-component" style="margin-bottom: 15px;"> <div class="bs-component" style="margin-bottom: 15px;">
<h3><small><code>btn-toolbar</code></small></h3>
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="btn-group"> <div class="btn-group">
<a href="javascript:void(0)" class="btn btn-default">1</a> <a href="javascript:void(0)" class="btn">1</a>
<a href="javascript:void(0)" class="btn btn-default">2</a> <a href="javascript:void(0)" class="btn">2</a>
<a href="javascript:void(0)" class="btn btn-default">3</a> <a href="javascript:void(0)" class="btn">3</a>
<a href="javascript:void(0)" class="btn btn-default">4</a> <a href="javascript:void(0)" class="btn">4</a>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<a href="javascript:void(0)" class="btn btn-default">5</a> <a href="javascript:void(0)" class="btn btn-raised">5</a>
<a href="javascript:void(0)" class="btn btn-default">6</a> <a href="javascript:void(0)" class="btn btn-raised">6</a>
<a href="javascript:void(0)" class="btn btn-default">7</a> <a href="javascript:void(0)" class="btn btn-raised">7</a>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<a href="javascript:void(0)" class="btn btn-default">8</a> <a href="javascript:void(0)" class="btn btn-raised">8</a>
<div class="btn-group"> <div class="btn-group">
<a href="bootstrap-elements.html" data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <a href="bootstrap-elements.html" data-target="#" class="btn btn-raised dropdown-toggle" data-toggle="dropdown">
Dropdown Dropdown
<span class="caret"></span> <span class="caret"></span>
</a> </a>
@ -679,14 +699,16 @@
</div> </div>
<div class="bs-component"> <div class="bs-component">
<h3><small><code>.btn-group-vertical</code></small></h3>
<div class="btn-group-vertical"> <div class="btn-group-vertical">
<a href="javascript:void(0)" class="btn btn-default">Button</a> <a href="javascript:void(0)" class="btn btn-raised">Button</a>
<a href="javascript:void(0)" class="btn btn-default">Button</a> <a href="javascript:void(0)" class="btn btn-raised">Button</a>
<a href="javascript:void(0)" class="btn btn-default">Button</a> <a href="javascript:void(0)" class="btn btn-raised">Button</a>
<a href="javascript:void(0)" class="btn btn-default">Button</a> <a href="javascript:void(0)" class="btn btn-raised">Button</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

2
less/_bootstrap-material-design.less
View File

@ -115,5 +115,7 @@ legend {
} }
@import "_themes.less";
// External plugins // External plugins
@import "_plugins.less"; @import "_plugins.less";

105
less/_buttons.less
View File

@ -25,7 +25,7 @@
.btn, .btn,
.input-group-btn .btn { .input-group-btn .btn {
border: none; border: none;
border-radius: @mdl-btn-border-radus; border-radius: @border-radius-base;
position: relative; position: relative;
padding: 8px 30px; padding: 8px 30px;
margin: 10px 1px; margin: 10px 1px;
@ -42,7 +42,6 @@
border: 0; border: 0;
} }
//--- //---
// btn-flat // btn-flat
background: transparent; 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 // Size variations
&.btn-sm { &.btn-sm {
padding: 5px 20px; padding: 5px 20px;
@ -204,46 +176,41 @@
.theme-dark & { .theme-dark & {
color: fade(#FFFFFF, 30%); 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-group variations
//.btn-link, .btn-group,
//.btn:not([class*="btn-"]), .btn-group-vertical {
//.btn-default {
// color: @mdb-text-color-primary; position: relative;
// &:hover { //border-radius: 2px;
// color: @mdb-text-color-primary; margin: 10px 1px;
// }
//} &.open {
//.btn:not([class*="btn-"]), .btn-default, .btn-flat:not(.btn-link) { .dropdown-toggle {
// &:hover, &.active { //box-shadow: none;
// background-color: rgba(255,255,255,0.5); }
// }
//} & > .dropdown-toggle.btn {
//.open > .dropdown-toggle.btn { .variations(~".btn", ~"", background-color, @mdb-btn-background-color);
// .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; .dropdown-menu {
//} border-radius: 0 0 @border-radius-base @border-radius-base;
//.btn-group, .btn-group-vertical { }
// position: relative;
// border-radius: 2px; &.btn-group-raised {
// margin: 10px 1px; .shadow-2dp();
// }
// .btn-shadow();
// &.open .dropdown-toggle { & .btn+.btn,
// box-shadow: none; .btn,
// } .btn:active,
// &.btn-group-raised { .btn-group {
// .btn-shadow(); margin: 0;
// } }
// .btn, .btn:active, .btn-group { }
// box-shadow: none !important;
// margin: 0;
// }
//}
//.btn-group-flat {
// box-shadow: none !important;
//}

2
less/_cards.less
View File

@ -19,7 +19,7 @@
/**************************************************************************/ /**************************************************************************/
border-radius: 2px; border-radius: @border-radius-base;
color: @mdb-card-body-text; color: @mdb-card-body-text;
background: @mdb-card-body-background; background: @mdb-card-body-background;

3
less/_checkboxes.less
View File

@ -46,8 +46,7 @@
display: inline-block; display: inline-block;
width: @mdb-checkbox-size; width: @mdb-checkbox-size;
height: @mdb-checkbox-size; height: @mdb-checkbox-size;
border: 2px solid @mdb-checkbox-border-color; border: @border-radius-base solid @mdb-checkbox-border-color;
border-radius: 2px;
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
} }

2
less/_dialogs.less
View File

@ -4,7 +4,7 @@
// -------------------------------------------------- // --------------------------------------------------
.modal-content { .modal-content {
.shadow-z-5(); .shadow-z-5();
border-radius: 2px; border-radius: @border-radius-base;
border: none; border: none;
// Modal header // Modal header
// Top section of the modal w/ title and dismiss // Top section of the modal w/ title and dismiss

2
less/_inputs.less
View File

@ -2,7 +2,7 @@
// label variations // label variations
.label { .label {
border-radius: 1px; border-radius: @border-radius-small;
.variations(~".label", ~"", background-color, @grey); .variations(~".label", ~"", background-color, @grey);
} }

2
less/_navbar.less
View File

@ -196,7 +196,7 @@
}); });
} }
.dropdown-menu { .dropdown-menu {
border-radius: @mdb-dropdown-radius; border-radius: @border-radius-base;
li > a { li > a {
font-size: @mdb-dropdown-font-size; font-size: @mdb-dropdown-font-size;
padding: 13px 16px; padding: 13px 16px;

2
less/_popups.less
View File

@ -3,7 +3,7 @@
line-height: 1em; line-height: 1em;
background: @mdb-popover-background; background: @mdb-popover-background;
border: none; border: none;
border-radius: @mdb-border-radius; border-radius: @border-radius-base;
.shadow-z-1(); .shadow-z-1();
} }

11
less/_variables.less
View File

@ -25,6 +25,9 @@
@brand-warning: @deep-orange; @brand-warning: @deep-orange;
@brand-info: @light-blue; @brand-info: @light-blue;
@border-radius-base: 2px;
@border-radius-small: 1px;
// Typography // Typography
@font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif; @font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif;
@headings-font-weight: 300; @headings-font-weight: 300;
@ -54,7 +57,6 @@
@mdb-radio-default: @mdb-text-color-primary; @mdb-radio-default: @mdb-text-color-primary;
@mdb-border-radius: 2px;
// -------------------- // --------------------
// inputs // inputs
@ -94,9 +96,9 @@
@mdb-input-padding-xs-vertical: 2px; // 1 @mdb-input-padding-xs-vertical: 2px; // 1
@mdb-input-padding-xs-horizontal: 0px; // 5 @mdb-input-padding-xs-horizontal: 0px; // 5
@mdb-input-border-radius-base: 4px; @mdb-input-border-radius-base: 0;
@mdb-input-border-radius-large: 6px; @mdb-input-border-radius-large: 0;
@mdb-input-border-radius-small: 3px; @mdb-input-border-radius-small: 0;
//** Default `.form-control` height //** Default `.form-control` height
@ -130,7 +132,6 @@
@mdb-popover-color: #ececec; @mdb-popover-color: #ececec;
// Dropdown Menu // Dropdown Menu
@mdb-dropdown-radius: 2px;
@mdb-dropdown-font-size: 16px; @mdb-dropdown-font-size: 16px;
// Toggle // Toggle

2
less/_welljumbo.less
View File

@ -15,7 +15,7 @@ body {
padding: 19px; padding: 19px;
margin-bottom: 20px; margin-bottom: 20px;
.shadow-z-2(); .shadow-z-2();
border-radius: 2px; border-radius: @border-radius-base;
border: 0; border: 0;
p { p {
font-weight: 300; font-weight: 300;

2
less/plugins/_plugin-nouislider.less
View File

@ -76,7 +76,7 @@
} }
} }
.noUi-target { .noUi-target {
border-radius: 2px; border-radius: @border-radius-base;
} }
.noUi-horizontal { .noUi-horizontal {
height: 2px; height: 2px;

2
less/plugins/_plugin-selectize.less
View File

@ -68,7 +68,7 @@
height: auto; height: auto;
background-color: #FFF; background-color: #FFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 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; padding: 0;
margin-top: 3px; margin-top: 3px;
.active { .active {

2
less/plugins/_plugin-snackbarjs.less
View File

@ -6,7 +6,7 @@
background-color: #323232; background-color: #323232;
color: @mdb-text-color-light; color: @mdb-text-color-light;
font-size: 14px; font-size: 14px;
border-radius: 2px; border-radius: @border-radius-base;
.shadow-z-1; .shadow-z-1;
// Animation // Animation