diff --git a/.scss-lint.yml b/.scss-lint.yml deleted file mode 100644 index ad2d037..0000000 --- a/.scss-lint.yml +++ /dev/null @@ -1,45 +0,0 @@ -# -# https://github.com/airbnb/css/blob/master/.scss-lint.yml -# -severity: error - -linters: - - BorderZero: - enabled: true - convention: zero - - BemDepth: - enabled: true - - DeclarationOrder: - enabled: false - - ExtendDirective: - enabled: true - - LeadingZero: - enabled: false - - NameFormat: - enabled: true - - PrivateNamingConvention: - enabled: true - prefix: _ - - PropertySortOrder: - enabled: false - - QualifyingElement: - enabled: false - - SelectorFormat: - enabled: true - convention: hyphenated_BEM - class_convention: ^(?!js-).* - class_convention_explanation: should not be written in the form js-* - - Indentation: - enabled: true - width: 4 diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000..d355f41 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,7 @@ +{ + "extends": "stylelint-config-bigchaindb", + rules: { + "selector-no-type": null, + "selector-no-qualifying-type": null + } +} diff --git a/README.md b/README.md index 0c68c7f..dac04fe 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,7 @@ > The fabulous cat of blockchain websites. [![Build Status](https://travis-ci.com/ascribe/bigchain-website.svg?token=3psqw6c8KMDqfdGQ2x6d&branch=master)](https://travis-ci.com/ascribe/bigchain-website) +[![css bigchaindb](https://img.shields.io/badge/css-bigchaindb-39BA91.svg)](https://github.com/bigchaindb/stylelint-config-bigchaindb) @@ -25,6 +26,7 @@ * [Production build & live deployment](#production-build--live-deployment) * [Coding conventions](#coding-conventions) * [(S)CSS](#scss) + * [JavaScript](#javascript) * [Authors](#authors) ## Development @@ -137,13 +139,19 @@ gulp deploy --live ### (S)CSS -Follows [Airbnb CSS / Sass Styleguide](https://github.com/airbnb/css). Lint with [scss-lint](https://github.com/brigade/scss-lint). +Follows [stylelint-config-bigchaindb](https://github.com/bigchaindb/stylelint-config-bigchaindb) which itself extends [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard). -Rule exceptions: +Lint with [stylelint](https://stylelint.io) in your editor or run: -- indentation: 4 spaces -- use single quotes -- allow single line rule sets +```bash +npm test +``` + +### JavaScript + +It's a wild mess right now between old school vanilla js, jQuery and some ES2015 features. Don't bother with the old stuff unless dependency updates break it. + +New js should follow [eslint-config-ascribe](https://github.com/ascribe/javascript). Linting in this repo is not setup for it yet. ## Authors diff --git a/_ci/build.sh b/_ci/build.sh index ba86a7e..a5f325e 100755 --- a/_ci/build.sh +++ b/_ci/build.sh @@ -2,6 +2,21 @@ set -e; +echo "$(tput setaf 136)" +echo "=============================================" +echo " Starting tests " +echo "=============================================" +echo "$(tput sgr0)" # reset + +npm test + +echo "$(tput setaf 64)" # green +echo "---------------------------------------------" +echo " ✓ done testing" +echo "---------------------------------------------" +echo "$(tput sgr0)" # reset + + echo "$(tput setaf 136)" echo "=============================================" echo " Starting build " diff --git a/_src/_assets/styles/_ipdb.scss b/_src/_assets/styles/_ipdb.scss index 973a36f..74b46f2 100644 --- a/_src/_assets/styles/_ipdb.scss +++ b/_src/_assets/styles/_ipdb.scss @@ -44,202 +44,203 @@ @keyframes shake { 2% { - transform: scaleX(-1) translate(0px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(0, 0) rotate(.5deg); } 4% { - transform: scaleX(-1) translate(1px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 0) rotate(.5deg); } 6% { - transform: scaleX(-1) translate(0px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(0, 0) rotate(.5deg); } 8% { - transform: scaleX(-1) translate(0px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(0, 0) rotate(.5deg); } 10% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 12% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 14% { - transform: scaleX(-1) translate(1px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 0) rotate(.5deg); } 16% { - transform: scaleX(-1) translate(0px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(0, 1px) rotate(.5deg); } 18% { - transform: scaleX(-1) translate(1px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 0) rotate(.5deg); } 20% { - transform: scaleX(-1) translate(0px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(0, 1px) rotate(.5deg); } 22% { - transform: scaleX(-1) translate(0px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(0, 1px) rotate(.5deg); } 24% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 26% { - transform: scaleX(-1) translate(1px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 0) rotate(.5deg); } 28% { - transform: scaleX(-1) translate(0px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(0, 0) rotate(.5deg); } 30% { - transform: scaleX(-1) translate(1px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 0) rotate(.5deg); } 32% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 34% { - transform: scaleX(-1) translate(1px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 0) rotate(.5deg); } 36% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 38% { - transform: scaleX(-1) translate(0px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(0, 0) rotate(.5deg); } 40% { - transform: scaleX(-1) translate(0px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(0, 1px) rotate(.5deg); } 42% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 44% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 46% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 48% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 50% { - transform: scaleX(-1) translate(0px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(0, 1px) rotate(.5deg); } 52% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 54% { - transform: scaleX(-1) translate(1px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 0) rotate(.5deg); } 56% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 58% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 60% { - transform: scaleX(-1) translate(0px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(0, 0) rotate(.5deg); } 62% { - transform: scaleX(-1) translate(1px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 0) rotate(.5deg); } 64% { - transform: scaleX(-1) translate(0px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(0, 1px) rotate(.5deg); } 66% { - transform: scaleX(-1) translate(1px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 0) rotate(.5deg); } 68% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 70% { - transform: scaleX(-1) translate(0px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(0, 1px) rotate(.5deg); } 72% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 74% { - transform: scaleX(-1) translate(0px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(0, 1px) rotate(.5deg); } 76% { - transform: scaleX(-1) translate(0px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(0, 1px) rotate(.5deg); } 78% { - transform: scaleX(-1) translate(1px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 0) rotate(.5deg); } 80% { - transform: scaleX(-1) translate(1px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 0) rotate(.5deg); } 82% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 84% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 86% { - transform: scaleX(-1) translate(0px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(0, 1px) rotate(.5deg); } 88% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 90% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 92% { - transform: scaleX(-1) translate(0px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(0, 0) rotate(.5deg); } 94% { - transform: scaleX(-1) translate(0px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(0, 0) rotate(.5deg); } 96% { - transform: scaleX(-1) translate(1px, 1px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 1px) rotate(.5deg); } 98% { - transform: scaleX(-1) translate(1px, 0px) rotate(.5deg) + transform: scaleX(-1) translate(1px, 0) rotate(.5deg); } - 0%, 100% { - transform: scaleX(-1) translate(0, 0) rotate(0) + 0%, + 100% { + transform: scaleX(-1) translate(0, 0) rotate(0); } } diff --git a/_src/_assets/styles/_page-404.scss b/_src/_assets/styles/_page-404.scss index b3c08cb..8e3730b 100644 --- a/_src/_assets/styles/_page-404.scss +++ b/_src/_assets/styles/_page-404.scss @@ -1,19 +1,19 @@ .page-404 { + @include color-overlay; position: relative; background-image: url('/assets/img/fail-cat.gif'); background-size: cover; background-position: center center; - @include color-overlay; - &::before { + &:before { z-index: -1; } .header { background: none; - &::before { display: none; } + &:before { display: none; } } .header__title { @@ -21,7 +21,7 @@ padding-bottom: 0; // the bottom line - &::after { + &:after { content: ''; height: 1px; width: 5rem; @@ -52,6 +52,6 @@ } .menu--footer { - a { color: #fff } + a { color: #fff; } } } diff --git a/_src/_assets/styles/_page-about.scss b/_src/_assets/styles/_page-about.scss index d99625e..e69de29 100644 --- a/_src/_assets/styles/_page-about.scss +++ b/_src/_assets/styles/_page-about.scss @@ -1,7 +0,0 @@ - -.grid--team { - // manually center last column - .grid__col:last-child { - //margin: auto; - } -} diff --git a/_src/_assets/styles/_page-community.scss b/_src/_assets/styles/_page-community.scss index 65c61f7..0f1956e 100644 --- a/_src/_assets/styles/_page-community.scss +++ b/_src/_assets/styles/_page-community.scss @@ -102,9 +102,11 @@ #arm { transform-origin: right; } + #head { transform-origin: center; } + #eye { transform-origin: center; } @@ -122,12 +124,15 @@ #eye { &.paused { animation: none; } } + #arm { animation: wrigley-wink 1s ease-in-out; } + #head { animation: wrigley-head-nod 1s ease-in-out; } + #eye { &.is-ready { animation: wrigley-blink .3s ease-in-out forwards; @@ -135,19 +140,26 @@ } } } - } @keyframes wrigley-wink { 0% { transform: rotate(0); } - 25%, 50% { transform: rotate(-20deg); } - 30%, 100% { transform: rotate(0); } + + 25%, + 50% { transform: rotate(-20deg); } + + 30%, + 100% { transform: rotate(0); } } @keyframes wrigley-head-nod { 0% { transform: rotate(0); } - 25%, 50% { transform: rotate(-2deg); } - 30%, 100% { transform: rotate(0); } + + 25%, + 50% { transform: rotate(-2deg); } + + 30%, + 100% { transform: rotate(0); } } @keyframes wrigley-blink { diff --git a/_src/_assets/styles/_page-contact.scss b/_src/_assets/styles/_page-contact.scss index 24b3185..525bd1c 100644 --- a/_src/_assets/styles/_page-contact.scss +++ b/_src/_assets/styles/_page-contact.scss @@ -7,6 +7,6 @@ .contactlist { p { margin-bottom: 0; } - .p-adr { margin-bottom: $spacer; } + .p-adr { margin-bottom: $spacer; } .social { margin-top: $spacer; } } diff --git a/_src/_assets/styles/_page-enterprise.scss b/_src/_assets/styles/_page-enterprise.scss index d3698d1..3f39c08 100644 --- a/_src/_assets/styles/_page-enterprise.scss +++ b/_src/_assets/styles/_page-enterprise.scss @@ -13,7 +13,7 @@ margin-bottom: $spacer; // the bottom line - &::after { + &:after { content: ''; height: 2px; width: 3rem; @@ -109,7 +109,7 @@ .feature__title { // the bottom line - &::after { + &:after { background: rgba($gray-light, .4); } } @@ -126,7 +126,7 @@ } .testimonial__quote { - &::before { + &:before { margin-left: -1.3rem; } } @@ -149,6 +149,7 @@ justify-content: space-between; } } + .grid__col { @media ($screen-sm) { flex-basis: 48%; diff --git a/_src/_assets/styles/_page-front.scss b/_src/_assets/styles/_page-front.scss index 3a6830c..d8c236a 100644 --- a/_src/_assets/styles/_page-front.scss +++ b/_src/_assets/styles/_page-front.scss @@ -6,7 +6,7 @@ .page-front { .section--partners { - @extend .background--darker + @extend .background--darker; } } diff --git a/_src/_assets/styles/_page-styleguide.scss b/_src/_assets/styles/_page-styleguide.scss index fcd917d..c8debe6 100644 --- a/_src/_assets/styles/_page-styleguide.scss +++ b/_src/_assets/styles/_page-styleguide.scss @@ -1,6 +1,6 @@ .page-styleguide { - .highlight { margin-bottom: ($spacer * 2) } + .highlight { margin-bottom: ($spacer * 2); } .typeface { font-size: 7vw; @@ -35,7 +35,7 @@ &:hover { background: #444 !important; - .color-meta { opacity: 1 } + .color-meta { opacity: 1; } } } diff --git a/_src/_assets/styles/_page-usecases.scss b/_src/_assets/styles/_page-usecases.scss index 53c4163..bac3ceb 100644 --- a/_src/_assets/styles/_page-usecases.scss +++ b/_src/_assets/styles/_page-usecases.scss @@ -30,7 +30,6 @@ // Industry section // .section--industry { - .section-header { margin-bottom: $spacer * 2; @@ -51,7 +50,7 @@ margin-top: 0; margin-bottom: $spacer * 2; - &::after { + &:after { margin-left: 0; } } diff --git a/_src/_assets/styles/_sections.scss b/_src/_assets/styles/_sections.scss index f5444c0..ee7c9d6 100644 --- a/_src/_assets/styles/_sections.scss +++ b/_src/_assets/styles/_sections.scss @@ -44,7 +44,7 @@ margin-bottom: ($spacer * 2); // the bottom line - &::after { + &:after { content: ''; height: 2px; width: 3rem; @@ -86,7 +86,6 @@ // Specific sections // @import '_sections/section-cta-whitepaper'; -@import '_sections/section-cta-features'; @import '_sections/section-cta-community'; @import '_sections/section-cta-enterprise'; @import '_sections/section-partners'; diff --git a/_src/_assets/styles/_sections/_section-blog.scss b/_src/_assets/styles/_sections/_section-blog.scss index 86e4562..5d99b4b 100644 --- a/_src/_assets/styles/_sections/_section-blog.scss +++ b/_src/_assets/styles/_sections/_section-blog.scss @@ -1,7 +1,3 @@ -.section--blog { - -} - .article { @include color-overlay; @include transition; diff --git a/_src/_assets/styles/_sections/_section-cta-features.scss b/_src/_assets/styles/_sections/_section-cta-features.scss deleted file mode 100644 index d337249..0000000 --- a/_src/_assets/styles/_sections/_section-cta-features.scss +++ /dev/null @@ -1,3 +0,0 @@ -.section-cta--features { - -} diff --git a/_src/_assets/styles/_sections/_section-cta.scss b/_src/_assets/styles/_sections/_section-cta.scss deleted file mode 100644 index e5987fa..0000000 --- a/_src/_assets/styles/_sections/_section-cta.scss +++ /dev/null @@ -1,3 +0,0 @@ -.section-cta { - -} diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss index 2f4ce5c..d47c537 100644 --- a/_src/_assets/styles/bigchain.scss +++ b/_src/_assets/styles/bigchain.scss @@ -60,5 +60,4 @@ @import 'page-cla'; @import 'page-partners'; @import 'page-enterprise'; - @import 'ipdb'; diff --git a/_src/_assets/styles/bigchain/_buttons.scss b/_src/_assets/styles/bigchain/_buttons.scss index c834824..4ad256e 100644 --- a/_src/_assets/styles/bigchain/_buttons.scss +++ b/_src/_assets/styles/bigchain/_buttons.scss @@ -16,6 +16,7 @@ user-select: none; border: 0; box-shadow: none; + @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius); &:hover, @@ -34,7 +35,7 @@ &.disabled, &:disabled { - opacity: 0.45; + opacity: .45; box-shadow: none; cursor: not-allowed; pointer-events: none; @@ -95,7 +96,7 @@ fieldset[disabled] a.btn { // // Make a button look and behave like a link .btn-link { - font-weight: normal; + font-weight: $font-weight-normal; color: $link-color; border-radius: 0; @@ -165,9 +166,9 @@ fieldset[disabled] a.btn { // Specificity overrides -input[type="submit"], -input[type="reset"], -input[type="button"] { +input[type='submit'], +input[type='reset'], +input[type='button'] { &.btn-block { width: 100%; } diff --git a/_src/_assets/styles/bigchain/_code.scss b/_src/_assets/styles/bigchain/_code.scss index ce736c1..6a638c8 100644 --- a/_src/_assets/styles/bigchain/_code.scss +++ b/_src/_assets/styles/bigchain/_code.scss @@ -31,7 +31,7 @@ kbd { kbd { padding: 0; font-size: 100%; - font-weight: bold; + font-weight: $font-weight-bold; box-shadow: none; } } diff --git a/_src/_assets/styles/bigchain/_content-page.scss b/_src/_assets/styles/bigchain/_content-page.scss index 468b82a..6443082 100644 --- a/_src/_assets/styles/bigchain/_content-page.scss +++ b/_src/_assets/styles/bigchain/_content-page.scss @@ -1,8 +1,3 @@ - -.content--page { - -} - .content--page--markdown { padding-top: ($spacer * 2); padding-bottom: ($spacer * 2); @@ -12,7 +7,8 @@ padding-bottom: ($spacer * 5); } - > h1, h2 { + > h1, + h2 { &:not(#heading-1):not(#heading-2) { border-bottom: 1px solid $brand-main-blue-light; padding-bottom: $spacer; @@ -20,40 +16,40 @@ text-align: center; } - .header-link { - box-shadow: none; - transition-timing-function: $timing-bounce; - display: inline-block; - padding: 0 .25rem; - opacity: 0; - transform: translate3d(20px,0,0) scale(0); - - &, - .header-icon { - @extend .transition; - } - - &:hover, - &:focus { - background: none; - - .header-icon { - color: lighten($brand-primary, 10%); - } - } - - .header-icon { - font-style: normal; - font-size: 2rem; - color: $brand-primary; - } - } - &:hover { .header-link { opacity: 1; - transform: translate3d(0,0,0) scale(.8); + transform: translate3d(0, 0, 0) scale(.8); } } } + + .header-link { + box-shadow: none; + transition-timing-function: $timing-bounce; + display: inline-block; + padding: 0 .25rem; + opacity: 0; + transform: translate3d(20px, 0, 0) scale(0); + + &, + .header-icon { + @extend .transition; + } + + &:hover, + &:focus { + background: none; + + .header-icon { + color: lighten($brand-primary, 10%); + } + } + + .header-icon { + font-style: normal; + font-size: 2rem; + color: $brand-primary; + } + } } diff --git a/_src/_assets/styles/bigchain/_forms.scss b/_src/_assets/styles/bigchain/_forms.scss index 8b6a1a6..3f2b008 100644 --- a/_src/_assets/styles/bigchain/_forms.scss +++ b/_src/_assets/styles/bigchain/_forms.scss @@ -54,6 +54,7 @@ // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. opacity: 1; } + &:disabled { cursor: disabled; } @@ -66,12 +67,46 @@ + .form-label, + .select2-container--bigchaindb + .form-label { &:after { - content: "*"; @extend .required; + content: '*'; } } } + // the active state + &:focus ~ .form-label, + &:valid:not(.is-empty) ~ .form-label, + &:invalid:not(.is-empty) ~ .form-label, + //&.parsley-error ~ .form-label, + &.parsley-success ~ .form-label { + transform: translate3d(0, -($spacer + $input-padding-x), 0) scale(.7); + color: $input-border-focus; + } + + + // + // Form Validation States + // + + // Success style + &:valid:not(.is-empty):not(select), + &.parsley-success { + &, + &:focus { + border-color: $brand-success; + } + } + + // Error style + &:invalid:not(.is-empty), + &.parsley-error { + &, + &:focus { + border-color: $brand-danger; + color: $brand-danger; + } + } + .background--photo & { border-bottom-color: rgba(#fff, .5); } @@ -123,18 +158,6 @@ } } -.form-control { - // the active state - &:focus ~ .form-label, - &:valid:not(.is-empty) ~ .form-label, - &:invalid:not(.is-empty) ~ .form-label, - //&.parsley-error ~ .form-label, - &.parsley-success ~ .form-label { - transform: translate3d(0, -($spacer + $input-padding-x), 0) scale(.7); - color: $input-border-focus; - } -} - // // Form groups @@ -153,7 +176,6 @@ } - // // Text areas // @@ -197,21 +219,26 @@ select.form-control { position: static; } } + + &.disabled { + label { + cursor: not-allowed; + } + } } -.radio input[type="radio"], -.radio-inline input[type="radio"], -.checkbox input[type="checkbox"], -.checkbox-inline input[type="checkbox"] { +.radio input[type='radio'], +.radio-inline input[type='radio'], +.checkbox input[type='checkbox'], +.checkbox-inline input[type='checkbox'] { position: absolute; - margin-bottom: -0.25rem; + margin-bottom: -.25rem; margin-left: -1.75rem; - margin-right: 0.25rem; + margin-right: .25rem; // reset styling, then style - -webkit-appearance:button; + appearance: button; background: none; - width: 1.3rem; height: 1.3rem; border-radius: $border-radius; @@ -228,8 +255,8 @@ select.form-control { } } -.radio input[type="radio"], -.radio-inline input[type="radio"] { +.radio input[type='radio'], +.radio-inline input[type='radio'] { border-radius: 50%; } @@ -248,69 +275,30 @@ select.form-control { margin-bottom: 0; vertical-align: middle; cursor: pointer; + + &.disabled { + cursor: not-allowed; + } } + .radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { margin-top: 0; - margin-left: 0.75rem; + margin-left: .75rem; } // Apply same disabled cursor tweak as for inputs // Some special care is needed because