bigchaindb
/
site
mirror of https://github.com/bigchaindb/site.git
1
0
Fork 0
Code Releases Activity

bring all the buttons to the yard

This commit is contained in:
Matthias Kretschmann 2015-12-22 17:19:41 +01:00
parent 9b8e9ebb51
commit 88c4937c52
4 changed files with 63 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
_src/_assets/styles/bigchain/_buttons.scss
View File

@ -15,22 +15,21 @@
vertical-align: middle;
cursor: pointer;
user-select: none;
border: 1px solid transparent;
border: none;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
min-width: 8rem;
&,
&:active,
&.active {
&:focus,
&.focus {
}
&:hover,
&:focus {
box-shadow: 0 1px 3px rgba($brand-main-blue-dark, .15);
transform: translateY(-1px);
}
&:active,
&.active {
background-image: none;
outline: 0;
transform: translateY(0);
box-shadow: 0 1px 3px rgba($brand-main-blue-dark, .05);
}
&.disabled,
&:disabled {
@ -50,22 +49,22 @@ fieldset[disabled] a.btn {
// Alternate buttons
//
.btn-primary {
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@include button-variant($btn-primary-color, $btn-primary-bg);
}
.btn-secondary {
@include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
@include button-variant($btn-secondary-color, $btn-secondary-bg);
}
.btn-info {
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
@include button-variant($btn-info-color, $btn-info-bg);
}
.btn-success {
@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
@include button-variant($btn-success-color, $btn-success-bg);
}
.btn-warning {
@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
@include button-variant($btn-warning-color, $btn-warning-bg);
}
.btn-danger {
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
@include button-variant($btn-danger-color, $btn-danger-bg);
}
// Remove all backgrounds
@ -73,7 +72,7 @@ fieldset[disabled] a.btn {
@include button-outline-variant($btn-primary-bg);
}
.btn-secondary-outline {
@include button-outline-variant($btn-secondary-border);
@include button-outline-variant($btn-secondary);
}
.btn-info-outline {
@include button-outline-variant($btn-info-bg);
@ -104,9 +103,12 @@ fieldset[disabled] a.btn {
box-shadow: none;
}
&,
&:hover,
&:focus,
&:active {
border-color: transparent;
box-shadow: none;
}
&:disabled {
}
@ -116,15 +118,17 @@ fieldset[disabled] a.btn {
// Button Sizes
//
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
}
.btn-sm {
// line-height: ensure proper height of button next to small input
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
}
.btn-xs {
// line-height: ensure proper height of button next to small input
@include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-xs, $line-height-xs, $btn-border-radius-xs);
}
//
// Block button

4
_src/_assets/styles/bigchain/_mixins/_buttons.scss
View File

@ -1,12 +1,10 @@
//
// Button variants
//
@mixin button-variant($color, $background, $border) {
@mixin button-variant($color, $background) {
$active-background: darken($background, 5%);
$active-border: darken($border, 12%);
color: $color !important;
background: $background;
border-color: $border;
&:hover,
&:focus {

19
_src/_assets/styles/bigchain/_variables.scss
View File

@ -47,7 +47,7 @@ $font-size-root-lg: 18px !default;
$font-size-base: 1rem !default;
$font-size-lg: 1.25rem !default;
$font-size-sm: 0.875rem !default;
$font-size-xs: 0.75rem !default;
$font-size-xs: 0.65rem !default;
$font-size-h1: 3rem !default;
$font-size-h2: 2.5rem !default;
@ -92,10 +92,12 @@ $screen-lg: 'min-width: #{$screen-lg-min}';
$spacer: 1rem !default;
$line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default;
$line-height-xs: 1.5 !default;
$border-radius: .15rem !default;
$border-radius-lg: .2rem !default;
$border-radius-sm: .1rem !default;
$border-radius-xs: .05rem !default;
$component-active-color: #fff !default;
$component-active-bg: $brand-primary !default;
@ -132,11 +134,12 @@ $btn-padding-y: .375rem !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: $btn-primary-bg !default;
$btn-primary-border: $brand-primary !default;
$btn-secondary-color: $gray-dark !default;
$btn-secondary-bg: #fff !default;
$btn-secondary-border: #fff !default;
$btn-secondary-bg: $gray-lightest !default;
$btn-secondary: $gray-light !default;
$btn-info-color: #fff !default;
$btn-info-bg: $brand-info !default;
@ -156,16 +159,20 @@ $btn-danger-border: $btn-danger-bg !default;
$btn-link-disabled-color: $gray-light !default;
$btn-padding-x-sm: .75rem !default;
$btn-padding-x-xs: .75rem !default;
$btn-padding-y-xs: .15rem !default;
$btn-padding-x-sm: 1.25rem !default;
$btn-padding-y-sm: .25rem !default;
$btn-padding-x-lg: 1.25rem !default;
$btn-padding-x-lg: 1.75rem !default;
$btn-padding-y-lg: .75rem !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-lg: $border-radius-lg !default;
$btn-border-radius-sm: $border-radius-sm !default;
$btn-border-radius-xs: $border-radius-xs !default;
//

27
_src/styleguide.md
View File

@ -138,6 +138,15 @@ Donec *ullamcorper nulla* non metus auctor fringilla. Duis mollis, est non commo
<a class="btn btn-primary btn-lg">Button</a>
```
<a class="btn btn-secondary">Button</a> <a class="btn btn-secondary btn-xs">Button</a> <a class="btn btn-secondary btn-sm">Button</a> <a class="btn btn-secondary btn-lg">Button</a>
```html
<a class="btn btn-secondary">Button</a>
<a class="btn btn-secondary btn-xs">Button</a>
<a class="btn btn-secondary btn-sm">Button</a>
<a class="btn btn-secondary btn-lg">Button</a>
```
<a class="btn btn-primary-outline">Button</a> <a class="btn btn-primary-outline btn-xs">Button</a> <a class="btn btn-primary-outline btn-sm">Button</a> <a class="btn btn-primary-outline btn-lg">Button</a>
```html
@ -147,6 +156,24 @@ Donec *ullamcorper nulla* non metus auctor fringilla. Duis mollis, est non commo
<a class="btn btn-primary-outline btn-lg">Button</a>
```
<a class="btn btn-secondary-outline">Button</a> <a class="btn btn-secondary-outline btn-xs">Button</a> <a class="btn btn-secondary-outline btn-sm">Button</a> <a class="btn btn-secondary-outline btn-lg">Button</a>
```html
<a class="btn btn-secondary-outline">Button</a>
<a class="btn btn-secondary-outline btn-xs">Button</a>
<a class="btn btn-secondary-outline btn-sm">Button</a>
<a class="btn btn-secondary-outline btn-lg">Button</a>
```
<a class="btn btn-link">Button</a> <a class="btn btn-link btn-xs">Button</a> <a class="btn btn-link btn-sm">Button</a> <a class="btn btn-link btn-lg">Button</a>
```html
<a class="btn btn-link">Button</a>
<a class="btn btn-link btn-xs">Button</a>
<a class="btn btn-link btn-sm">Button</a>
<a class="btn btn-link btn-lg">Button</a>
```
### Forms