mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-23 18:14:04 +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>
<h3>Flat buttons <small>default - no class needed</small></h3>
<h3><small>flat - default - no class needed</small></h3>
<p class="bs-component">
<a href="javascript:void(0)" class="btn"><code>btn</code> only</a>
<a href="javascript:void(0)" class="btn active"><code>.active</code></a>
@ -519,7 +519,7 @@
</p>
<h3>Raised buttons <small><code>.btn-raised</code></small></h3>
<h3><small><code>.btn-raised</code></small></h3>
<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 btn-default">Default</a>
@ -531,14 +531,51 @@
<a href="javascript:void(0)" class="btn btn-raised btn-link">Link</a>
</p>
</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>
<div style="margin-bottom: 15px;">
<div class="btn-toolbar bs-component" style="margin: 0;">
<div class="btn-group">
<a href="javascript:void(0)" class="btn btn-default">Default</a>
<a href="bootstrap-elements.html" data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<a href="javascript:void(0)" class="btn">btn only</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">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
@ -549,8 +586,8 @@
</div>
<div class="btn-group">
<a href="javascript:void(0)" class="btn btn-primary">Primary</a>
<a href="bootstrap-elements.html" data-target="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></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 btn-raised 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>
@ -609,62 +646,45 @@
</div>
</div>
</div>
<h3>Button sizes</h3>
<h3><small><code>btn-lg.btn-block.btn-raised</code></small></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">
<p class="bs-component">
<a href="javascript:void(0)" class="btn btn-default btn-lg btn-block">Block level button</a>
<a href="javascript:void(0)" class="btn btn-default btn-lg btn-block btn-raised">Block level button</a>
</p>
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group btn-group-justified">
<a href="javascript:void(0)" class="btn btn-default">Left</a>
<a href="javascript:void(0)" class="btn btn-default">Middle</a>
<a href="javascript:void(0)" class="btn btn-default">Right</a>
<h3><small><code>btn-group.btn-group-justified.btn-group-raised</code></small></h3>
<div class="btn-group btn-group-justified btn-group-raised">
<a href="javascript:void(0)" class="btn ">Left</a>
<a href="javascript:void(0)" class="btn ">Middle</a>
<a href="javascript:void(0)" class="btn ">Right</a>
</div>
</div>
<div class="bs-component" style="margin-bottom: 15px;">
<h3><small><code>btn-toolbar</code></small></h3>
<div class="btn-toolbar">
<div class="btn-group">
<a href="javascript:void(0)" class="btn btn-default">1</a>
<a href="javascript:void(0)" class="btn btn-default">2</a>
<a href="javascript:void(0)" class="btn btn-default">3</a>
<a href="javascript:void(0)" class="btn btn-default">4</a>
<a href="javascript:void(0)" class="btn">1</a>
<a href="javascript:void(0)" class="btn">2</a>
<a href="javascript:void(0)" class="btn">3</a>
<a href="javascript:void(0)" class="btn">4</a>
</div>
<div class="btn-group">
<a href="javascript:void(0)" class="btn btn-default">5</a>
<a href="javascript:void(0)" class="btn btn-default">6</a>
<a href="javascript:void(0)" class="btn btn-default">7</a>
<a href="javascript:void(0)" class="btn btn-raised">5</a>
<a href="javascript:void(0)" class="btn btn-raised">6</a>
<a href="javascript:void(0)" class="btn btn-raised">7</a>
</div>
<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">
<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
<span class="caret"></span>
</a>
@ -679,14 +699,16 @@
</div>
<div class="bs-component">
<h3><small><code>.btn-group-vertical</code></small></h3>
<div class="btn-group-vertical">
<a href="javascript:void(0)" class="btn btn-default">Button</a>
<a href="javascript:void(0)" class="btn btn-default">Button</a>
<a href="javascript:void(0)" class="btn btn-default">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-raised">Button</a>
<a href="javascript:void(0)" class="btn btn-raised">Button</a>
<a href="javascript:void(0)" class="btn btn-raised">Button</a>
</div>
</div>
</div>
</div>
</div>

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

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

105
less/_buttons.less
View File

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

2
less/_cards.less
View File

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

3
less/_checkboxes.less
View File

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

2
less/_dialogs.less
View File

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

2
less/_inputs.less
View File

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

2
less/_navbar.less
View File

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

2
less/_popups.less
View File

@ -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();
}

11
less/_variables.less
View File

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

2
less/_welljumbo.less
View File

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

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

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

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

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

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

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