diff --git a/_src/_assets/images/icon-fail.svg b/_src/_assets/images/icon-fail.svg new file mode 100644 index 0000000..fa8d854 --- /dev/null +++ b/_src/_assets/images/icon-fail.svg @@ -0,0 +1,14 @@ + + + + + + + + + + diff --git a/_src/_assets/images/icon-success.svg b/_src/_assets/images/icon-success.svg new file mode 100644 index 0000000..068446f --- /dev/null +++ b/_src/_assets/images/icon-success.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss index 33da73e..e565c14 100644 --- a/_src/_assets/styles/bigchain.scss +++ b/_src/_assets/styles/bigchain.scss @@ -22,6 +22,7 @@ @import 'bigchain/_icons'; @import 'bigchain/_grid'; @import 'bigchain/_sections'; +@import 'bigchain/_alerts'; @import 'bigchain/_footer'; // Content types diff --git a/_src/_assets/styles/bigchain/_alerts.scss b/_src/_assets/styles/bigchain/_alerts.scss new file mode 100644 index 0000000..628aaca --- /dev/null +++ b/_src/_assets/styles/bigchain/_alerts.scss @@ -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); +} diff --git a/_src/_assets/styles/bigchain/_buttons.scss b/_src/_assets/styles/bigchain/_buttons.scss index f7111f8..b91f4ce 100644 --- a/_src/_assets/styles/bigchain/_buttons.scss +++ b/_src/_assets/styles/bigchain/_buttons.scss @@ -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; &, diff --git a/_src/_assets/styles/bigchain/_mixins.scss b/_src/_assets/styles/bigchain/_mixins.scss index cc3e2e0..d008724 100644 --- a/_src/_assets/styles/bigchain/_mixins.scss +++ b/_src/_assets/styles/bigchain/_mixins.scss @@ -5,3 +5,4 @@ // @import "_mixins/_buttons"; +@import "_mixins/_alerts"; diff --git a/_src/_assets/styles/bigchain/_mixins/_alerts.scss b/_src/_assets/styles/bigchain/_mixins/_alerts.scss new file mode 100644 index 0000000..838c851 --- /dev/null +++ b/_src/_assets/styles/bigchain/_mixins/_alerts.scss @@ -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%); } +} diff --git a/_src/_assets/styles/bigchain/_sections.scss b/_src/_assets/styles/bigchain/_sections.scss index 61413f9..b35f76d 100644 --- a/_src/_assets/styles/bigchain/_sections.scss +++ b/_src/_assets/styles/bigchain/_sections.scss @@ -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 } } diff --git a/_src/_assets/styles/bigchain/_typography.scss b/_src/_assets/styles/bigchain/_typography.scss index 11ca342..2edd6ec 100644 --- a/_src/_assets/styles/bigchain/_typography.scss +++ b/_src/_assets/styles/bigchain/_typography.scss @@ -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 diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss index 5465a66..f274e24 100644 --- a/_src/_assets/styles/bigchain/_variables.scss +++ b/_src/_assets/styles/bigchain/_variables.scss @@ -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;