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

alerts component

This commit is contained in:
Matthias Kretschmann 2015-12-21 13:26:54 +01:00
parent 14e23061b5
commit 7013177db7
10 changed files with 165 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
_src/_assets/images/icon-fail.svg Normal file
View File

@ -0,0 +1,14 @@
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="60px" height="60px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#231F20;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<g>
<line class="st0" x1="1" y1="1" x2="59" y2="59"/>
<line class="st0" x1="59" y1="1" x2="1" y2="59"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 631 B

13
_src/_assets/images/icon-success.svg Normal file
View File

@ -0,0 +1,13 @@
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="60px" height="60px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#231F20;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<g>
<polyline class="st0" points="59,1 17.4,59 1,42.6 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 585 B

1
_src/_assets/styles/bigchain.scss
View File

@ -22,6 +22,7 @@
@import 'bigchain/_icons';
@import 'bigchain/_grid';
@import 'bigchain/_sections';
@import 'bigchain/_alerts';
@import 'bigchain/_footer';
// Content types

57
_src/_assets/styles/bigchain/_alerts.scss Normal file
View File

@ -0,0 +1,57 @@
//
// Alerts
// ---
// bigchain.io
//
// Base
.alert {
@extend .small;
padding: $alert-padding;
margin-bottom: $spacer;
border: 1px solid transparent;
border-radius: $border-radius;
text-align: left;
// Improve alignment and spacing of inner content
> p + p {
margin-top: 5px;
}
> p:last-child { margin-bottom: 0 }
}
.alert__icon {
display: block;
width: 100%;
height: 2rem;
stroke-width: 3;
margin: 0 auto $spacer auto;
border-bottom: 1px solid transparent;
padding-bottom: $spacer;
}
.alert__title {
}
.alert__link {
}
//
// Alternate styles
//
.alert-success {
@include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
}
.alert-info {
@include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
}
.alert-warning {
@include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
}
.alert-danger {
@include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
}

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

@ -6,16 +6,16 @@
.btn {
display: inline-block;
font-family: $btn-font-family;
font-weight: $btn-font-weight;
text-transform: uppercase;
font-family: $input-font;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: 1px solid transparent;
@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-sm, $line-height, $btn-border-radius);
transition: all .2s ease-in-out;
&,

1
_src/_assets/styles/bigchain/_mixins.scss
View File

@ -5,3 +5,4 @@
//
@import "_mixins/_buttons";
@import "_mixins/_alerts";

15
_src/_assets/styles/bigchain/_mixins/_alerts.scss Normal file
View File

@ -0,0 +1,15 @@
// Alerts
@mixin alert-variant($background, $border, $text-color) {
background-color: $background;
border-color: $border;
color: $text-color;
hr { border-top-color: darken($border, 5%); }
.alert__icon {
stroke: $text-color;
border-bottom-color: rgba($text-color, .3);
}
.alert__link { color: darken($text-color, 10%); }
}

11
_src/_assets/styles/bigchain/_sections.scss
View File

@ -81,19 +81,24 @@
background: $brand-main-blue; // fallback
background: linear-gradient(to bottom right, $brand-main-blue 0%, lighten($brand-main-blue, 10%) 100%);
* { color: #fff }
.section-title,
.section-description { color: #fff }
}
.background--dark {
background: $brand-main-blue-dark; // fallback
background: linear-gradient(to bottom right, $brand-main-blue-dark 0%, lighten($brand-main-blue-dark, 10%) 100%);
* { color: #fff }
.section-title,
.section-description { color: #fff }
}
.background--gray {
background: $brand-main-gray; // fallback
background: linear-gradient(to bottom right, $brand-main-gray 0%, lighten($brand-main-gray, 10%) 100%);
* { color: #fff }
.section-title,
.section-description,
.form-control,
.form-label { color: #fff }
}

4
_src/_assets/styles/bigchain/_typography.scss
View File

@ -97,7 +97,7 @@ h6, .h6 { font-size: $font-size-h6; }
// Body text
//
p {
margin: 0 0 ($spacer / 2);
margin: 0 0 $spacer;
}
@ -122,7 +122,7 @@ small,
strong,
.strong,
.bold {
font-weight: $font-weight-normal;
font-weight: $font-weight-bold;
}
// Alignment

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

@ -23,10 +23,10 @@ $gray-lighter: #eceeef !default;
$gray-lightest: #f7f7f9 !default;
$brand-primary: $brand-main-blue !default;
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
$brand-success: #388250 !default;
$brand-info: #3E91CE !default;
$brand-warning: #8E8E24 !default;
$brand-danger: #8F3B39 !default;
//
@ -110,9 +110,11 @@ $component-active-bg: $brand-primary !default;
//
// Buttons
//
$btn-font-family: $font-family-avenir;
$btn-font-weight: $font-weight-normal !default;
$btn-padding-x: 1.5rem !default;
$btn-padding-y: .375rem !default;
$btn-font-weight: $font-weight-normal !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
@ -154,6 +156,9 @@ $btn-border-radius-sm: $border-radius-sm !default;
//
// Forms
//
$input-font: $font-family-avenir !default;
$input-font-weight: $font-weight-normal !default;
$input-padding-x: .5rem !default;
$input-padding-y: 0 !default;
@ -168,5 +173,45 @@ $input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default;
$input-font: $font-family-avenir !default;
$input-font-weight: $font-weight-normal !default;
//
// Form states and alerts
//
$state-success-text: $brand-success !default;
$state-success-bg: lighten($brand-success, 40%) !default;
$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default;
$state-info-text: $brand-info !default;
$state-info-bg: lighten($brand-info, 30%) !default;
$state-info-border: darken(adjust-hue($state-info-bg, -10), 5%) !default;
$state-warning-text: $brand-warning !default;
$state-warning-bg: lighten($brand-warning, 40%) !default;
$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default;
$state-danger-text: $brand-danger !default;
$state-danger-bg: lighten($brand-danger, 40%) !default;
$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;
//
// Alerts
//
$alert-padding: $spacer !default;
$alert-border-radius: $border-radius !default;
$alert-success-bg: $state-success-bg !default;
$alert-success-text: $state-success-text !default;
$alert-success-border: $state-success-border !default;
$alert-info-bg: $state-info-bg !default;
$alert-info-text: $state-info-text !default;
$alert-info-border: $state-info-border !default;
$alert-warning-bg: $state-warning-bg !default;
$alert-warning-text: $state-warning-text !default;
$alert-warning-border: $state-warning-border !default;
$alert-danger-bg: $state-danger-bg !default;
$alert-danger-text: $state-danger-text !default;
$alert-danger-border: $state-danger-border !default;