From f597e2fe949a1e18eb778b9a5bd102de88570555 Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 18 May 2017 14:03:27 +0200 Subject: Initial commit. --- src/sass/bootstrap4/_alert.scss | 65 ++ src/sass/bootstrap4/_animation.scss | 27 + src/sass/bootstrap4/_breadcrumb.scss | 23 + src/sass/bootstrap4/_button-group.scss | 224 +++++++ src/sass/bootstrap4/_buttons.scss | 173 ++++++ src/sass/bootstrap4/_card.scss | 292 +++++++++ src/sass/bootstrap4/_carousel.scss | 252 ++++++++ src/sass/bootstrap4/_close.scss | 28 + src/sass/bootstrap4/_code.scss | 58 ++ src/sass/bootstrap4/_custom-forms.scss | 226 +++++++ src/sass/bootstrap4/_dropdown.scss | 193 ++++++ src/sass/bootstrap4/_forms.scss | 452 ++++++++++++++ src/sass/bootstrap4/_grid.scss | 76 +++ src/sass/bootstrap4/_images.scss | 53 ++ src/sass/bootstrap4/_input-group.scss | 189 ++++++ src/sass/bootstrap4/_jumbotron.scss | 20 + src/sass/bootstrap4/_labels.scss | 77 +++ src/sass/bootstrap4/_list-group.scss | 140 +++++ src/sass/bootstrap4/_media.scss | 90 +++ src/sass/bootstrap4/_mixins.scss | 55 ++ src/sass/bootstrap4/_modal.scss | 146 +++++ src/sass/bootstrap4/_nav.scss | 162 +++++ src/sass/bootstrap4/_navbar.scss | 230 +++++++ src/sass/bootstrap4/_normalize.scss | 428 +++++++++++++ src/sass/bootstrap4/_pager.scss | 57 ++ src/sass/bootstrap4/_pagination.scss | 73 +++ src/sass/bootstrap4/_popover.scss | 140 +++++ src/sass/bootstrap4/_print.scss | 88 +++ src/sass/bootstrap4/_progress.scss | 156 +++++ src/sass/bootstrap4/_reboot.scss | 347 +++++++++++ src/sass/bootstrap4/_responsive-embed.scss | 39 ++ src/sass/bootstrap4/_tables.scss | 193 ++++++ src/sass/bootstrap4/_tooltip.scss | 85 +++ src/sass/bootstrap4/_type.scss | 157 +++++ src/sass/bootstrap4/_utilities-background.scss | 24 + src/sass/bootstrap4/_utilities-responsive.scss | 49 ++ src/sass/bootstrap4/_utilities-spacing.scss | 39 ++ src/sass/bootstrap4/_utilities.scss | 95 +++ src/sass/bootstrap4/_variables.scss | 666 +++++++++++++++++++++ src/sass/bootstrap4/bootstrap-flex.scss | 8 + src/sass/bootstrap4/bootstrap-grid.scss | 62 ++ src/sass/bootstrap4/bootstrap-reboot.scss | 10 + src/sass/bootstrap4/bootstrap.scss | 56 ++ src/sass/bootstrap4/mixins/_alert.scss | 14 + .../bootstrap4/mixins/_background-variant.scss | 13 + src/sass/bootstrap4/mixins/_border-radius.scss | 35 ++ src/sass/bootstrap4/mixins/_breakpoints.scss | 86 +++ src/sass/bootstrap4/mixins/_buttons.scss | 100 ++++ src/sass/bootstrap4/mixins/_cards.scss | 38 ++ src/sass/bootstrap4/mixins/_center-block.scss | 7 + src/sass/bootstrap4/mixins/_clearfix.scss | 7 + src/sass/bootstrap4/mixins/_forms.scss | 89 +++ src/sass/bootstrap4/mixins/_gradients.scss | 43 ++ src/sass/bootstrap4/mixins/_grid-framework.scss | 44 ++ src/sass/bootstrap4/mixins/_grid.scss | 75 +++ src/sass/bootstrap4/mixins/_hover.scss | 59 ++ src/sass/bootstrap4/mixins/_image.scss | 34 ++ src/sass/bootstrap4/mixins/_label.scss | 11 + src/sass/bootstrap4/mixins/_list-group.scss | 30 + src/sass/bootstrap4/mixins/_lists.scss | 7 + src/sass/bootstrap4/mixins/_nav-divider.scss | 10 + src/sass/bootstrap4/mixins/_navbar-align.scss | 9 + src/sass/bootstrap4/mixins/_pagination.scss | 22 + src/sass/bootstrap4/mixins/_progress.scss | 18 + src/sass/bootstrap4/mixins/_pulls.scss | 6 + src/sass/bootstrap4/mixins/_reset-filter.scss | 8 + src/sass/bootstrap4/mixins/_reset-text.scss | 18 + src/sass/bootstrap4/mixins/_resize.scss | 6 + src/sass/bootstrap4/mixins/_screen-reader.scss | 32 + src/sass/bootstrap4/mixins/_size.scss | 6 + src/sass/bootstrap4/mixins/_tab-focus.scss | 9 + src/sass/bootstrap4/mixins/_table-row.scss | 30 + src/sass/bootstrap4/mixins/_text-emphasis.scss | 12 + src/sass/bootstrap4/mixins/_text-hide.scss | 8 + src/sass/bootstrap4/mixins/_text-truncate.scss | 8 + 75 files changed, 6917 insertions(+) create mode 100644 src/sass/bootstrap4/_alert.scss create mode 100644 src/sass/bootstrap4/_animation.scss create mode 100644 src/sass/bootstrap4/_breadcrumb.scss create mode 100644 src/sass/bootstrap4/_button-group.scss create mode 100644 src/sass/bootstrap4/_buttons.scss create mode 100644 src/sass/bootstrap4/_card.scss create mode 100644 src/sass/bootstrap4/_carousel.scss create mode 100644 src/sass/bootstrap4/_close.scss create mode 100644 src/sass/bootstrap4/_code.scss create mode 100644 src/sass/bootstrap4/_custom-forms.scss create mode 100644 src/sass/bootstrap4/_dropdown.scss create mode 100644 src/sass/bootstrap4/_forms.scss create mode 100644 src/sass/bootstrap4/_grid.scss create mode 100644 src/sass/bootstrap4/_images.scss create mode 100644 src/sass/bootstrap4/_input-group.scss create mode 100644 src/sass/bootstrap4/_jumbotron.scss create mode 100644 src/sass/bootstrap4/_labels.scss create mode 100644 src/sass/bootstrap4/_list-group.scss create mode 100644 src/sass/bootstrap4/_media.scss create mode 100644 src/sass/bootstrap4/_mixins.scss create mode 100644 src/sass/bootstrap4/_modal.scss create mode 100644 src/sass/bootstrap4/_nav.scss create mode 100644 src/sass/bootstrap4/_navbar.scss create mode 100644 src/sass/bootstrap4/_normalize.scss create mode 100644 src/sass/bootstrap4/_pager.scss create mode 100644 src/sass/bootstrap4/_pagination.scss create mode 100644 src/sass/bootstrap4/_popover.scss create mode 100644 src/sass/bootstrap4/_print.scss create mode 100644 src/sass/bootstrap4/_progress.scss create mode 100644 src/sass/bootstrap4/_reboot.scss create mode 100644 src/sass/bootstrap4/_responsive-embed.scss create mode 100644 src/sass/bootstrap4/_tables.scss create mode 100644 src/sass/bootstrap4/_tooltip.scss create mode 100644 src/sass/bootstrap4/_type.scss create mode 100644 src/sass/bootstrap4/_utilities-background.scss create mode 100644 src/sass/bootstrap4/_utilities-responsive.scss create mode 100644 src/sass/bootstrap4/_utilities-spacing.scss create mode 100644 src/sass/bootstrap4/_utilities.scss create mode 100644 src/sass/bootstrap4/_variables.scss create mode 100644 src/sass/bootstrap4/bootstrap-flex.scss create mode 100644 src/sass/bootstrap4/bootstrap-grid.scss create mode 100644 src/sass/bootstrap4/bootstrap-reboot.scss create mode 100644 src/sass/bootstrap4/bootstrap.scss create mode 100644 src/sass/bootstrap4/mixins/_alert.scss create mode 100644 src/sass/bootstrap4/mixins/_background-variant.scss create mode 100644 src/sass/bootstrap4/mixins/_border-radius.scss create mode 100644 src/sass/bootstrap4/mixins/_breakpoints.scss create mode 100644 src/sass/bootstrap4/mixins/_buttons.scss create mode 100644 src/sass/bootstrap4/mixins/_cards.scss create mode 100644 src/sass/bootstrap4/mixins/_center-block.scss create mode 100644 src/sass/bootstrap4/mixins/_clearfix.scss create mode 100644 src/sass/bootstrap4/mixins/_forms.scss create mode 100644 src/sass/bootstrap4/mixins/_gradients.scss create mode 100644 src/sass/bootstrap4/mixins/_grid-framework.scss create mode 100644 src/sass/bootstrap4/mixins/_grid.scss create mode 100644 src/sass/bootstrap4/mixins/_hover.scss create mode 100644 src/sass/bootstrap4/mixins/_image.scss create mode 100644 src/sass/bootstrap4/mixins/_label.scss create mode 100644 src/sass/bootstrap4/mixins/_list-group.scss create mode 100644 src/sass/bootstrap4/mixins/_lists.scss create mode 100644 src/sass/bootstrap4/mixins/_nav-divider.scss create mode 100644 src/sass/bootstrap4/mixins/_navbar-align.scss create mode 100644 src/sass/bootstrap4/mixins/_pagination.scss create mode 100644 src/sass/bootstrap4/mixins/_progress.scss create mode 100644 src/sass/bootstrap4/mixins/_pulls.scss create mode 100644 src/sass/bootstrap4/mixins/_reset-filter.scss create mode 100644 src/sass/bootstrap4/mixins/_reset-text.scss create mode 100644 src/sass/bootstrap4/mixins/_resize.scss create mode 100644 src/sass/bootstrap4/mixins/_screen-reader.scss create mode 100644 src/sass/bootstrap4/mixins/_size.scss create mode 100644 src/sass/bootstrap4/mixins/_tab-focus.scss create mode 100644 src/sass/bootstrap4/mixins/_table-row.scss create mode 100644 src/sass/bootstrap4/mixins/_text-emphasis.scss create mode 100644 src/sass/bootstrap4/mixins/_text-hide.scss create mode 100644 src/sass/bootstrap4/mixins/_text-truncate.scss (limited to 'src/sass/bootstrap4') diff --git a/src/sass/bootstrap4/_alert.scss b/src/sass/bootstrap4/_alert.scss new file mode 100644 index 0000000..b9f6c60 --- /dev/null +++ b/src/sass/bootstrap4/_alert.scss @@ -0,0 +1,65 @@ +// +// Base styles +// + +.alert { + padding: $alert-padding; + margin-bottom: $spacer-y; + border: $alert-border-width solid transparent; + @include border-radius($alert-border-radius); + + // Improve alignment and spacing of inner content + > p, + > ul { + margin-bottom: 0; + } + > p + p { + margin-top: 5px; + } +} + +// Headings for larger alerts +.alert-heading { + // Specified to prevent conflicts of changing $headings-color + color: inherit; +} + +// Provide class for links that match alerts +.alert-link { + font-weight: $alert-link-font-weight; +} + + +// Dismissible alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissible { + padding-right: ($alert-padding + 20); + + // Adjust close link position + .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; + } +} + + +// Alternate styles +// +// Generate contextual modifier classes for colorizing the alert. + +.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/sass/bootstrap4/_animation.scss b/src/sass/bootstrap4/_animation.scss new file mode 100644 index 0000000..edd7147 --- /dev/null +++ b/src/sass/bootstrap4/_animation.scss @@ -0,0 +1,27 @@ +.fade { + opacity: 0; + transition: opacity .15s linear; + + &.in { + opacity: 1; + } +} + +.collapse { + display: none; + + &.in { + display: block; + } + // tr&.in { display: table-row; } + // tbody&.in { display: table-row-group; } +} + +.collapsing { + position: relative; + height: 0; + overflow: hidden; + transition-timing-function: ease; + transition-duration: .35s; + transition-property: height; +} diff --git a/src/sass/bootstrap4/_breadcrumb.scss b/src/sass/bootstrap4/_breadcrumb.scss new file mode 100644 index 0000000..30af411 --- /dev/null +++ b/src/sass/bootstrap4/_breadcrumb.scss @@ -0,0 +1,23 @@ +.breadcrumb { + padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal; + margin-bottom: $spacer-y; + list-style: none; + background-color: $breadcrumb-bg; + @include border-radius($border-radius); + @include clearfix; + + > li { + float: left; + + + li::before { + padding-right: .5rem; + padding-left: .5rem; + color: $breadcrumb-divider-color; + content: "#{$breadcrumb-divider}"; + } + } + + > .active { + color: $breadcrumb-active-color; + } +} diff --git a/src/sass/bootstrap4/_button-group.scss b/src/sass/bootstrap4/_button-group.scss new file mode 100644 index 0000000..7efe144 --- /dev/null +++ b/src/sass/bootstrap4/_button-group.scss @@ -0,0 +1,224 @@ +// Make the div behave like a button +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-block; + vertical-align: middle; // match .btn alignment given font-size hack above + + > .btn { + position: relative; + float: left; + + // Bring the "active" button to the front + &:focus, + &:active, + &.active { + z-index: 2; + } + @include hover { + z-index: 2; + } + } +} + +// Prevent double borders when buttons are next to each other +.btn-group { + .btn + .btn, + .btn + .btn-group, + .btn-group + .btn, + .btn-group + .btn-group { + margin-left: -$input-btn-border-width; + } +} + +// Optional: Group multiple button groups together for a toolbar +.btn-toolbar { + margin-left: -5px; // Offset the first child's margin + @include clearfix(); + + .btn-group, + .input-group { + float: left; + } + + > .btn, + > .btn-group, + > .input-group { + margin-left: 5px; + } +} + +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { + border-radius: 0; +} + +// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match +.btn-group > .btn:first-child { + margin-left: 0; + + &:not(:last-child):not(.dropdown-toggle) { + @include border-right-radius(0); + } +} +// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + @include border-left-radius(0); +} + +// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) +.btn-group > .btn-group { + float: left; +} +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group > .btn-group:first-child:not(:last-child) { + > .btn:last-child, + > .dropdown-toggle { + @include border-right-radius(0); + } +} +.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { + @include border-left-radius(0); +} + +// On active and open, don't show outline +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} + + +// Sizing +// +// Remix the default button sizing classes into new ones for easier manipulation. + +.btn-group-sm > .btn { @extend .btn-sm; } +.btn-group-lg > .btn { @extend .btn-lg; } + + +// +// Split button dropdowns +// + +// Give the line between buttons some depth +.btn-group > .btn + .dropdown-toggle { + padding-right: 8px; + padding-left: 8px; +} +.btn-group > .btn-lg + .dropdown-toggle { + padding-right: 12px; + padding-left: 12px; +} + +// The clickable button for toggling the menu +// Remove the gradient and set the same inset shadow as the :active state +.btn-group.open .dropdown-toggle { + @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + + // Show no shadow for `.btn-link` since it has no other button styles. + &.btn-link { + @include box-shadow(none); + } +} + + +// Reposition the caret +.btn .caret { + margin-left: 0; +} +// Carets in other button sizes +.btn-lg .caret { + border-width: $caret-width-lg $caret-width-lg 0; + border-bottom-width: 0; +} +// Upside down carets for .dropup +.dropup .btn-lg .caret { + border-width: 0 $caret-width-lg $caret-width-lg; +} + + + +// +// Vertical button groups +// + +.btn-group-vertical { + > .btn, + > .btn-group, + > .btn-group > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; + } + + // Clear floats so dropdown menus can be properly placed + > .btn-group { + @include clearfix(); + + > .btn { + float: none; + } + } + + > .btn + .btn, + > .btn + .btn-group, + > .btn-group + .btn, + > .btn-group + .btn-group { + margin-top: -$input-btn-border-width; + margin-left: 0; + } +} + +.btn-group-vertical > .btn { + &:not(:first-child):not(:last-child) { + border-radius: 0; + } + &:first-child:not(:last-child) { + border-top-right-radius: $btn-border-radius; + @include border-bottom-radius(0); + } + &:last-child:not(:first-child) { + border-bottom-left-radius: $btn-border-radius; + @include border-top-radius(0); + } +} +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group-vertical > .btn-group:first-child:not(:last-child) { + > .btn:last-child, + > .dropdown-toggle { + @include border-bottom-radius(0); + } +} +.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { + @include border-top-radius(0); +} + + +// Checkbox and radio options +// +// In order to support the browser's form validation feedback, powered by the +// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use +// `display: none;` or `visibility: hidden;` as that also hides the popover. +// Simply visually hiding the inputs via `opacity` would leave them clickable in +// certain cases which is prevented by using `clip` and `pointer-events`. +// This way, we ensure a DOM element is visible to position the popover from. +// +// See https://github.com/twbs/bootstrap/pull/12794 and +// https://github.com/twbs/bootstrap/pull/14559 for more information. + +[data-toggle="buttons"] { + > .btn, + > .btn-group > .btn { + input[type="radio"], + input[type="checkbox"] { + position: absolute; + clip: rect(0,0,0,0); + pointer-events: none; + } + } +} diff --git a/src/sass/bootstrap4/_buttons.scss b/src/sass/bootstrap4/_buttons.scss new file mode 100644 index 0000000..7375528 --- /dev/null +++ b/src/sass/bootstrap4/_buttons.scss @@ -0,0 +1,173 @@ +// +// Base styles +// + +.btn { + display: inline-block; + font-weight: $btn-font-weight; + text-align: center; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + user-select: none; + border: $input-btn-border-width solid transparent; + @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius); + @include transition(all .2s ease-in-out); + + &, + &:active, + &.active { + &:focus, + &.focus { + @include tab-focus(); + } + } + + @include hover-focus { + text-decoration: none; + } + &.focus { + text-decoration: none; + } + + &:active, + &.active { + background-image: none; + outline: 0; + @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + } + + &.disabled, + &:disabled { + cursor: $cursor-disabled; + opacity: .65; + @include box-shadow(none); + } +} + +// Future-proof disabling of clicks on `` elements +a.btn.disabled, +fieldset[disabled] a.btn { + pointer-events: none; +} + + +// +// Alternate buttons +// + +.btn-primary { + @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); +} +.btn-secondary { + @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border); +} +.btn-info { + @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border); +} +.btn-success { + @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border); +} +.btn-warning { + @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); +} +.btn-danger { + @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); +} + +// Remove all backgrounds +.btn-primary-outline { + @include button-outline-variant($btn-primary-bg); +} +.btn-secondary-outline { + @include button-outline-variant($btn-secondary-border); +} +.btn-info-outline { + @include button-outline-variant($btn-info-bg); +} +.btn-success-outline { + @include button-outline-variant($btn-success-bg); +} +.btn-warning-outline { + @include button-outline-variant($btn-warning-bg); +} +.btn-danger-outline { + @include button-outline-variant($btn-danger-bg); +} + + +// +// Link buttons +// + +// Make a button look and behave like a link +.btn-link { + font-weight: normal; + color: $link-color; + border-radius: 0; + + &, + &:active, + &.active, + &:disabled { + background-color: transparent; + @include box-shadow(none); + } + &, + &:focus, + &:active { + border-color: transparent; + } + @include hover { + border-color: transparent; + } + @include hover-focus { + color: $link-hover-color; + text-decoration: $link-hover-decoration; + background-color: transparent; + } + &:disabled { + @include hover-focus { + color: $btn-link-disabled-color; + text-decoration: none; + } + } +} + + +// +// 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); +} + + +// +// Block button +// + +.btn-block { + display: block; + width: 100%; +} + +// Vertically space out multiple block buttons +.btn-block + .btn-block { + margin-top: 5px; +} + +// Specificity overrides +input[type="submit"], +input[type="reset"], +input[type="button"] { + &.btn-block { + width: 100%; + } +} diff --git a/src/sass/bootstrap4/_card.scss b/src/sass/bootstrap4/_card.scss new file mode 100644 index 0000000..ecd797e --- /dev/null +++ b/src/sass/bootstrap4/_card.scss @@ -0,0 +1,292 @@ +// +// Base styles +// + +.card { + position: relative; + display: block; + margin-bottom: $card-spacer-y; + background-color: $card-bg; + border: $card-border-width solid $card-border-color; + @include border-radius($card-border-radius); +} + +.card-block { + padding: $card-spacer-x; +} + +.card-title { + margin-bottom: $card-spacer-y; +} + +.card-subtitle { + margin-top: -($card-spacer-y / 2); + margin-bottom: 0; +} + +.card-text:last-child { + margin-bottom: 0; +} + +// .card-actions { +// padding: $card-spacer-y $card-spacer-x; + +// .card-link + .card-link { +// margin-left: $card-spacer-x; +// } +// } + +.card-link { + @include hover { + text-decoration: none; + } + + + .card-link { + margin-left: $card-spacer-x; + } +} + +@if $enable-rounded { + .card { + > .list-group:first-child { + .list-group-item:first-child { + border-radius: $card-border-radius $card-border-radius 0 0; + } + } + + > .list-group:last-child { + .list-group-item:last-child { + border-radius: 0 0 $card-border-radius $card-border-radius; + } + } + } +} + + +// +// Optional textual caps +// + +.card-header { + padding: $card-spacer-y $card-spacer-x; + background-color: $card-cap-bg; + border-bottom: $card-border-width solid $card-border-color; + + &:first-child { + @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); + } +} + +.card-footer { + padding: $card-spacer-y $card-spacer-x; + background-color: $card-cap-bg; + border-top: $card-border-width solid $card-border-color; + + &:last-child { + @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner); + } +} + + +// +// Background variations +// + +.card-primary { + @include card-variant($brand-primary, $brand-primary); +} +.card-success { + @include card-variant($brand-success, $brand-success); +} +.card-info { + @include card-variant($brand-info, $brand-info); +} +.card-warning { + @include card-variant($brand-warning, $brand-warning); +} +.card-danger { + @include card-variant($brand-danger, $brand-danger); +} + +// Remove all backgrounds +.card-primary-outline { + @include card-outline-variant($btn-primary-bg); +} +.card-secondary-outline { + @include card-outline-variant($btn-secondary-border); +} +.card-info-outline { + @include card-outline-variant($btn-info-bg); +} +.card-success-outline { + @include card-outline-variant($btn-success-bg); +} +.card-warning-outline { + @include card-outline-variant($btn-warning-bg); +} +.card-danger-outline { + @include card-outline-variant($btn-danger-bg); +} + +// +// Inverse text within a card for use with dark backgrounds +// + +.card-inverse { + @include card-inverse; +} + +// +// Blockquote +// + +.card-blockquote { + padding: 0; + margin-bottom: 0; + border-left: 0; +} + +// Card image +.card-img { + // margin: -1.325rem; + @include border-radius(.25rem); +} +.card-img-overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: 1.25rem; +} + + + +// Card image caps +.card-img-top { + @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0); +} +.card-img-bottom { + @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner); +} + + +// +// Card set +// + +@if $enable-flex { + @include media-breakpoint-up(sm) { + .card-deck { + display: flex; + flex-flow: row wrap; + margin-right: -.625rem; + margin-left: -.625rem; + + .card { + flex: 1 0 0; + margin-right: .625rem; + margin-left: .625rem; + } + } + } +} @else { + @include media-breakpoint-up(sm) { + .card-deck { + display: table; + table-layout: fixed; + border-spacing: 1.25rem 0; + + .card { + display: table-cell; + width: 1%; + vertical-align: top; + } + } + .card-deck-wrapper { + margin-right: -1.25rem; + margin-left: -1.25rem; + } + } +} + +// +// Card groups +// + +@include media-breakpoint-up(sm) { + .card-group { + @if $enable-flex { + display: flex; + flex-flow: row wrap; + } @else { + display: table; + width: 100%; + table-layout: fixed; + } + + .card { + @if $enable-flex { + flex: 1 0 0; + } @else { + display: table-cell; + vertical-align: top; + } + + + .card { + margin-left: 0; + border-left: 0; + } + + // Handle rounded corners + @if $enable-rounded { + &:first-child { + @include border-right-radius(0); + + .card-img-top { + border-top-right-radius: 0; + } + .card-img-bottom { + border-bottom-right-radius: 0; + } + } + &:last-child { + @include border-left-radius(0); + + .card-img-top { + border-top-left-radius: 0; + } + .card-img-bottom { + border-bottom-left-radius: 0; + } + } + + &:not(:first-child):not(:last-child) { + border-radius: 0; + + .card-img-top, + .card-img-bottom { + border-radius: 0; + } + } + } + } + } +} + + +// +// Card +// + +@include media-breakpoint-up(sm) { + .card-columns { + column-count: 3; + column-gap: 1.25rem; + + .card { + display: inline-block; + width: 100%; // Don't let them exceed the column width + } + } +} diff --git a/src/sass/bootstrap4/_carousel.scss b/src/sass/bootstrap4/_carousel.scss new file mode 100644 index 0000000..bf0ea61 --- /dev/null +++ b/src/sass/bootstrap4/_carousel.scss @@ -0,0 +1,252 @@ +// Wrapper for the slide container and indicators +.carousel { + position: relative; +} + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; + + > .carousel-item { + position: relative; + display: none; + transition: .6s ease-in-out left; + + // Account for jankitude on images + > img, + > a > img { + @extend .img-fluid; + line-height: 1; + } + + // WebKit CSS3 transforms for supported devices + @media all and (transform-3d), (-webkit-transform-3d) { + transition: transform .6s ease-in-out; + backface-visibility: hidden; + perspective: 1000px; + + &.next, + &.active.right { + left: 0; + transform: translate3d(100%, 0, 0); + } + &.prev, + &.active.left { + left: 0; + transform: translate3d(-100%, 0, 0); + } + &.next.left, + &.prev.right, + &.active { + left: 0; + transform: translate3d(0, 0, 0); + } + } + } + + > .active, + > .next, + > .prev { + display: block; + } + + > .active { + left: 0; + } + + > .next, + > .prev { + position: absolute; + top: 0; + width: 100%; + } + + > .next { + left: 100%; + } + > .prev { + left: -100%; + } + > .next.left, + > .prev.right { + left: 0; + } + + > .active.left { + left: -100%; + } + > .active.right { + left: 100%; + } +} + + +// +// Left/right controls for nav +// + +.carousel-control { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: $carousel-control-width; + font-size: $carousel-control-font-size; + color: $carousel-control-color; + text-align: center; + text-shadow: $carousel-text-shadow; + opacity: $carousel-control-opacity; + // We can't have this transition here because WebKit cancels the carousel + // animation if you trip this while in the middle of another animation. + + // Set gradients for backgrounds + &.left { + @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001)); + } + &.right { + right: 0; + left: auto; + @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5)); + } + + // Hover/focus state + @include hover-focus { + color: $carousel-control-color; + text-decoration: none; + outline: 0; + opacity: .9; + } + + // Toggles + .icon-prev, + .icon-next { + position: absolute; + top: 50%; + z-index: 5; + display: inline-block; + width: 20px; + height: 20px; + margin-top: -10px; + font-family: serif; + line-height: 1; + } + .icon-prev { + left: 50%; + margin-left: -10px; + } + .icon-next { + right: 50%; + margin-right: -10px; + } + + .icon-prev { + &::before { + content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) + } + } + .icon-next { + &::before { + content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) + } + } +} + + +// Optional indicator pips +// +// Add an unordered list with the following class and add a list item for each +// slide your carousel holds. + +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + padding-left: 0; + margin-left: -30%; + text-align: center; + list-style: none; + + li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + cursor: pointer; + // IE9 hack for event handling + // + // Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`, + // so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent. + // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer + background-color: rgba(0,0,0,0); // IE9 + border: 1px solid $carousel-indicator-border-color; + border-radius: 10px; + } + .active { + width: 12px; + height: 12px; + margin: 0; + background-color: $carousel-indicator-active-bg; + } +} + + +// Optional captions +// +// Hidden by default for smaller viewports. + +.carousel-caption { + position: absolute; + right: 15%; + bottom: 20px; + left: 15%; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: $carousel-caption-color; + text-align: center; + text-shadow: $carousel-text-shadow; + + .btn { + text-shadow: none; // No shadow for button elements in carousel-caption + } +} + + +// +// Responsive variations +// + +@include media-breakpoint-up(sm) { + // Scale up the controls a smidge + .carousel-control { + .icon-prev, + .icon-next { + width: 30px; + height: 30px; + margin-top: -15px; + font-size: 30px; + } + .icon-prev { + margin-left: -15px; + } + .icon-next { + margin-right: -15px; + } + } + + // Show and left align the captions + .carousel-caption { + right: 20%; + left: 20%; + padding-bottom: 30px; + } + + // Move up the indicators + .carousel-indicators { + bottom: 20px; + } +} diff --git a/src/sass/bootstrap4/_close.scss b/src/sass/bootstrap4/_close.scss new file mode 100644 index 0000000..89e68a3 --- /dev/null +++ b/src/sass/bootstrap4/_close.scss @@ -0,0 +1,28 @@ +.close { + float: right; + font-size: ($font-size-base * 1.5); + font-weight: $close-font-weight; + line-height: 1; + color: $close-color; + text-shadow: $close-text-shadow; + opacity: .2; + + @include hover-focus { + color: $close-color; + text-decoration: none; + cursor: pointer; + opacity: .5; + } +} + +// Additional properties for button version +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} diff --git a/src/sass/bootstrap4/_code.scss b/src/sass/bootstrap4/_code.scss new file mode 100644 index 0000000..60bbcae --- /dev/null +++ b/src/sass/bootstrap4/_code.scss @@ -0,0 +1,58 @@ +// Inline and block code styles +code, +kbd, +pre, +samp { + font-family: $font-family-monospace; +} + +// Inline code +code { + padding: .2rem .4rem; + font-size: 90%; + color: $code-color; + background-color: $code-bg; + @include border-radius($border-radius); +} + +// User input typically entered via keyboard +kbd { + padding: .2rem .4rem; + font-size: 90%; + color: $kbd-color; + background-color: $kbd-bg; + @include border-radius($border-radius-sm); + @include box-shadow(inset 0 -.1rem 0 rgba(0,0,0,.25)); + + kbd { + padding: 0; + font-size: 100%; + font-weight: $nested-kbd-font-weight; + @include box-shadow(none); + } +} + +// Blocks of code +pre { + display: block; + margin-top: 0; + margin-bottom: 1rem; + font-size: 90%; + line-height: $line-height; + color: $pre-color; + + // Account for some code outputs that place code tags in pre tags + code { + padding: 0; + font-size: inherit; + color: inherit; + background-color: transparent; + border-radius: 0; + } +} + +// Enable scrollable blocks of code +.pre-scrollable { + max-height: $pre-scrollable-max-height; + overflow-y: scroll; +} diff --git a/src/sass/bootstrap4/_custom-forms.scss b/src/sass/bootstrap4/_custom-forms.scss new file mode 100644 index 0000000..b418b84 --- /dev/null +++ b/src/sass/bootstrap4/_custom-forms.scss @@ -0,0 +1,226 @@ +// Embedded icons from Open Iconic. +// Released under MIT and copyright 2014 Waybury. +// http://useiconic.com/open + + +// Checkboxes and radios +// +// Base class takes care of all the key behavioral aspects. + +.c-input { + position: relative; + display: inline; + padding-left: 1.5rem; + color: #555; + cursor: pointer; + + > input { + position: absolute; + z-index: -1; // Put the input behind the label so it doesn't overlay text + opacity: 0; + + &:checked ~ .c-indicator { + color: #fff; + background-color: #0074d9; + @include box-shadow(none); + } + + &:focus ~ .c-indicator { + // the mixin is not used here to make sure there is feedback + box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9; + } + + &:active ~ .c-indicator { + color: #fff; + background-color: #84c6ff; + @include box-shadow(none); + } + } + + + .c-input { + margin-left: 1rem; + } +} + +// Custom indicator +// +// Generates a shadow element to create our makeshift checkbox/radio background. + +.c-indicator { + position: absolute; + top: 0; + left: 0; + display: block; + width: 1rem; + height: 1rem; + font-size: 65%; + line-height: 1rem; + color: #eee; + text-align: center; + user-select: none; + background-color: #eee; + background-repeat: no-repeat; + background-position: center center; + background-size: 50% 50%; + @include box-shadow(inset 0 .125rem .125rem rgba(0,0,0,.1)); +} + +// Checkboxes +// +// Tweak just a few things for checkboxes. + +.c-checkbox { + .c-indicator { + border-radius: .25rem; + } + + input:checked ~ .c-indicator { + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=); + } + + input:indeterminate ~ .c-indicator { + background-color: #0074d9; + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K); + @include box-shadow(none); + } +} + +// Radios +// +// Tweak just a few things for radios. + +.c-radio { + .c-indicator { + border-radius: 50%; + } + + input:checked ~ .c-indicator { + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==); + } +} + + +// Layout options +// +// By default radios and checkboxes are `inline-block` with no additional spacing +// set. Use these optional classes to tweak the layout. + +.c-inputs-stacked { + .c-input { + display: inline; + + &::after { + display: block; + margin-bottom: .25rem; + content: ""; + } + + + .c-input { + margin-left: 0; + } + } +} + + +// Select +// +// Replaces the browser default select with a custom one, mostly pulled from +// http://primercss.io. +// +// Includes IE9-specific hacks (noted by ` \9`). + +.c-select { + display: inline-block; + max-width: 100%; + padding: .375rem 1.75rem .375rem .75rem; + padding-right: .75rem \9; + color: $input-color; + vertical-align: middle; + background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center; + background-image: none \9; + background-size: 8px 10px; + border: $input-btn-border-width solid $input-border-color; + // Use vendor prefixes as `appearance` isn't part of the CSS spec. + -moz-appearance: none; + -webkit-appearance: none; + + &:focus { + border-color: #51a7e8; + outline: none; + @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)); + } + + // Hides the default caret in IE11 + &::-ms-expand { + opacity: 0; + } +} + +.c-select-sm { + padding-top: 3px; + padding-bottom: 3px; + font-size: 12px; + + &:not([multiple]) { + height: 26px; + min-height: 26px; + } +} + + +// File +// +// Custom file input. + +.file { + position: relative; + display: inline-block; + height: 2.5rem; + cursor: pointer; +} +.file input { + min-width: 14rem; + margin: 0; + filter: alpha(opacity = 0); + opacity: 0; +} +.file-custom { + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 5; + height: 2.5rem; + padding: .5rem 1rem; + line-height: 1.5; + color: #555; + user-select: none; + background-color: #fff; + border: $input-btn-border-width solid #ddd; + border-radius: .25rem; + @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05)); +} +.file-custom::after { + content: "Choose file..."; +} +.file-custom::before { + position: absolute; + top: -.075rem; + right: -.075rem; + bottom: -.075rem; + z-index: 6; + display: block; + height: 2.5rem; + padding: .5rem 1rem; + line-height: 1.5; + color: #555; + content: "Browse"; + background-color: #eee; + border: $input-btn-border-width solid #ddd; + border-radius: 0 .25rem .25rem 0; +} + +// Focus state +.file input:focus ~ .file-custom { + @include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9); +} diff --git a/src/sass/bootstrap4/_dropdown.scss b/src/sass/bootstrap4/_dropdown.scss new file mode 100644 index 0000000..d9776d5 --- /dev/null +++ b/src/sass/bootstrap4/_dropdown.scss @@ -0,0 +1,193 @@ +// The dropdown wrapper (`
`) +.dropup, +.dropdown { + position: relative; +} + +.dropdown-toggle { + // Generate the caret automatically + &::after { + display: inline-block; + width: 0; + height: 0; + margin-right: .25rem; + margin-left: .25rem; + vertical-align: middle; + content: ""; + border-top: $caret-width solid; + border-right: $caret-width solid transparent; + border-left: $caret-width solid transparent; + } + + // Prevent the focus on the dropdown toggle when closing dropdowns + &:focus { + outline: 0; + } +} + +.dropup { + .dropdown-toggle { + &::after { + border-top: 0; + border-bottom: $caret-width solid; + } + } +} + +// The dropdown menu +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: $zindex-dropdown; + display: none; // none by default, but block on "open" of the menu + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; // override default ul + font-size: $font-size-base; + color: $body-color; + text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) + list-style: none; + background-color: $dropdown-bg; + background-clip: padding-box; + border: $dropdown-border-width solid $dropdown-border-color; + @include border-radius($border-radius); + @include box-shadow(0 6px 12px rgba(0,0,0,.175)); +} + +// Dividers (basically an `
`) within the dropdown +.dropdown-divider { + @include nav-divider($dropdown-divider-bg); +} + +// Links, buttons, and more within the dropdown menu +// +// `