mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-02 12:54:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added icon buttons - look like smaller than fab-sm, and are intended for use in things such as navs, perhaps an input group.

Browse Source
This commit is contained in:
Kevin Ross 2016-01-07 16:17:34 -06:00
parent a7fae9fdfa
commit 97aeda22aa
5 changed files with 137 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
docs/material-design/buttons.md
View File

@ -64,6 +64,13 @@ group: material-design
</fieldset>
{% endexample %}
### Sizes
{% example html %}
<button type="button" class="btn btn-raised btn-lg">Large button</button>
<button type="button" class="btn btn-raised">Default button</button>
<button type="button" class="btn btn-raised btn-sm">Small button</button>
{% endexample %}
## Floating Action
{% example html %}
@ -138,9 +145,70 @@ Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing e
{% endexample %}
## Sizes
## Icon
{% example html %}
<button type="button" class="btn btn-raised btn-lg">Large button</button>
<button type="button" class="btn btn-raised">Default button</button>
<button type="button" class="btn btn-raised btn-sm">Small button</button>
<button type="button" class="btn btn-primary mdb-btn-icon">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-secondary mdb-btn-icon">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-success mdb-btn-icon">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-info mdb-btn-icon">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-warning mdb-btn-icon">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-danger mdb-btn-icon">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-danger mdb-btn-icon active">
<i class="material-icons">grade</i>
</button>
{% endexample %}
### Disabled
{% example html %}
<fieldset disabled>
<button type="button" class="btn btn-primary mdb-btn-icon">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-secondary mdb-btn-icon">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-success mdb-btn-icon">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-info mdb-btn-icon">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-warning mdb-btn-icon">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-danger mdb-btn-icon">
<i class="material-icons">grade</i>
</button>
</fieldset>
{% endexample %}
### Sizes
Using `mdb-btn-icon-sm` on the button, or using `btn-group-sm` on the enclosing element of a `mdb-btn-icon` renders a small variation.
{% example html %}
<button type="button" class="btn mdb-btn-icon">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn mdb-btn-icon mdb-btn-icon-sm">
<i class="material-icons">grade</i>
</button>
<span class="btn-group-sm">
<button type="button" class="btn mdb-btn-icon">
<i class="material-icons">grade</i>
</button>
</span>
{% endexample %}

1
scss/_bootstrap.scss
View File

@ -27,7 +27,6 @@
@import "../bower_components/bootstrap/scss/card";
@import "../bower_components/bootstrap/scss/breadcrumb";
@import "../bower_components/bootstrap/scss/pagination";
@import "../bower_components/bootstrap/scss/pager";
@import "../bower_components/bootstrap/scss/labels";
@import "../bower_components/bootstrap/scss/jumbotron";
@import "../bower_components/bootstrap/scss/alert";

72
scss/_buttons.scss
View File

@ -70,17 +70,34 @@
}
// https://www.google.com/design/spec/components/buttons-floating-action-button.html
&.mdb-btn-fab,
&.mdb-btn-icon {
padding: 0;
overflow: hidden;
font-size: $mdb-btn-fab-font-size;
line-height: normal;
border-radius: 50%;
.btn-group-sm & {
padding: 0; // need specificity
}
.material-icons {
position: absolute;
top: 50%;
left: 50%;
width: $mdb-btn-fab-font-size;
line-height: $mdb-btn-fab-font-size;
transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
}
}
&.mdb-btn-fab {
// see above for color variations
width: $mdb-btn-fab-size;
min-width: $mdb-btn-fab-size;
height: $mdb-btn-fab-size;
padding: 0;
margin: auto;
overflow: hidden;
font-size: $mdb-btn-fab-font-size;
line-height: normal;
border-radius: 50%;
box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light;
.ripple-container {
@ -89,23 +106,42 @@
&.mdb-btn-fab-sm,
.btn-group-sm & {
width: $mdb-btn-fab-size-mini;
min-width: $mdb-btn-fab-size-mini;
height: $mdb-btn-fab-size-mini;
width: $mdb-btn-fab-size-sm;
min-width: $mdb-btn-fab-size-sm;
height: $mdb-btn-fab-size-sm;
&.material-icons {
top: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
left: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
//.material-icons {
// top: ($mdb-btn-icon-size-sm - $mdb-btn-fab-font-size) / 2;
// left: ($mdb-btn-icon-size-sm - $mdb-btn-fab-font-size) / 2;
//}
}
}
i.material-icons {
position: absolute;
top: 50%;
left: 50%;
width: $mdb-btn-fab-font-size;
line-height: $mdb-btn-fab-font-size;
transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
// Icon buttons
&.mdb-btn-icon {
width: $mdb-btn-icon-size;
min-width: $mdb-btn-icon-size;
height: $mdb-btn-icon-size;
margin-right: 0;
margin-left: 0;
color: inherit;
&.mdb-btn-icon-sm,
.btn-group-sm & {
width: $mdb-btn-icon-size-sm;
min-width: $mdb-btn-icon-size-sm;
height: $mdb-btn-icon-size-sm;
.material-icons {
//$position: ($mdb-btn-icon-size-sm - $mdb-btn-icon-font-size-sm) / 2;
//top: $position;
//left: $position;
width: $mdb-btn-icon-font-size-sm;
font-size: $mdb-btn-icon-font-size-sm;
line-height: 1;
transform: translate(-($mdb-btn-icon-font-size-sm / 2), -($mdb-btn-icon-font-size-sm / 2));
}
}
}

6
scss/variables/_colors.scss
View File

@ -323,7 +323,7 @@ $grey-100: #f5f5f5 !default;
$grey-200: #eee !default;
$grey-300: #e0e0e0 !default;
$grey-400: #bdbdbd !default;
$grey-500: #9e9e9e; //$rgb-grey-500: "158, 158, 158" !default;
$grey-500: #9e9e9e;
$grey-600: #757575 !default;
$grey-700: #616161 !default;
$grey-800: #424242 !default;
@ -352,5 +352,5 @@ $blue-grey-a700: #455a64 !default;
$blue-grey: $blue-grey-500 !default;
$black: #000; //$rgb-black: "0,0,0"; $hsl-black: "0, 0%, 0%";
$white: #fff; //$rgb-white: "255,255,255"; $hsl-white: "0, 0%, 100%";
$black: #000;
$white: #fff;

12
scss/variables/bootstrap/_buttons.scss
View File

@ -17,12 +17,14 @@ $mdb-inverse-btn-focus-bg: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15%
$mdb-inverse-btn-active-bg: rgba(#ccc, .25) !default; // spec: dark Pressed: 25% #CCCCCC
$mdb-inverse-btn-disabled: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white
$mdb-btn-fab-size: 56px !default;
$mdb-btn-fab-size-mini: 40px !default;
$mdb-btn-fab-font-size: 24px !default;
$mdb-btn-fab-size: 3.5rem !default; // 56px
$mdb-btn-fab-size-sm: 2.5rem !default; // 40px
$mdb-btn-fab-font-size: 1.5rem !default; // 24px
$mdb-btn-icon-size: 32px !default;
$mdb-btn-icon-size-mini: 24px !default;
// icons
$mdb-btn-icon-size: 2rem !default; // 32px
$mdb-btn-icon-size-sm: (.75 * $mdb-btn-icon-size) !default; // ~24px
$mdb-btn-icon-font-size-sm: (.75 * $mdb-btn-fab-font-size) !default;
// Buttons