bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2025-02-14 21:10:28 +01:00
Code Releases Activity

bring all the buttons to the yard

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

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

@ -1,12 +1,10 @@
// //
// Button variants // Button variants
// //
@mixin button-variant($color, $background, $border) { @mixin button-variant($color, $background) {
$active-background: darken($background, 5%); $active-background: darken($background, 5%);
$active-border: darken($border, 12%);
color: $color !important; color: $color !important;
background: $background; background: $background;
border-color: $border;
&:hover, &:hover,
&:focus { &: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-base: 1rem !default;
$font-size-lg: 1.25rem !default; $font-size-lg: 1.25rem !default;
$font-size-sm: 0.875rem !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-h1: 3rem !default;
$font-size-h2: 2.5rem !default; $font-size-h2: 2.5rem !default;
@ -92,10 +92,12 @@ $screen-lg: 'min-width: #{$screen-lg-min}';
$spacer: 1rem !default; $spacer: 1rem !default;
$line-height-lg: (4 / 3) !default; $line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default; $line-height-sm: 1.5 !default;
$line-height-xs: 1.5 !default;
$border-radius: .15rem !default; $border-radius: .15rem !default;
$border-radius-lg: .2rem !default; $border-radius-lg: .2rem !default;
$border-radius-sm: .1rem !default; $border-radius-sm: .1rem !default;
$border-radius-xs: .05rem !default;
$component-active-color: #fff !default; $component-active-color: #fff !default;
$component-active-bg: $brand-primary !default; $component-active-bg: $brand-primary !default;
@ -132,11 +134,12 @@ $btn-padding-y: .375rem !default;
$btn-primary-color: #fff !default; $btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !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-color: $gray-dark !default;
$btn-secondary-bg: #fff !default; $btn-secondary-bg: $gray-lightest !default;
$btn-secondary-border: #fff !default;
$btn-secondary: $gray-light !default;
$btn-info-color: #fff !default; $btn-info-color: #fff !default;
$btn-info-bg: $brand-info !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-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-y-sm: .25rem !default;
$btn-padding-x-lg: 1.25rem !default; $btn-padding-x-lg: 1.75rem !default;
$btn-padding-y-lg: .75rem !default; $btn-padding-y-lg: .75rem !default;
// Allows for customizing button radius independently from global border radius // Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default; $btn-border-radius: $border-radius !default;
$btn-border-radius-lg: $border-radius-lg !default; $btn-border-radius-lg: $border-radius-lg !default;
$btn-border-radius-sm: $border-radius-sm !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-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> <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 ```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-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 ### Forms