diff --git a/.gitignore b/.gitignore index 942c57f..c2397cd 100755 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ -# Test files +# NPM node_modules npm-debug.log @@ -8,21 +8,15 @@ _site/ .sass-cache/ .jekyll-cache/ .jekyll-metadata -alembic-jekyll-theme-*.gem Gemfile.lock **/Gemfile.lock # Temporary files tmp - -# Folder view configuration files .DS_Store Desktop.ini - -# Thumbnail cache files ._* Thumbs.db - -# Files that might appear on external disks .Spotlight-V100 .Trashes +.idea diff --git a/_config.yml b/_config.yml index aa29150..4efb17c 100755 --- a/_config.yml +++ b/_config.yml @@ -10,9 +10,6 @@ collections: team: output: true permalink: /team/:path/ - testimonials: - output: true - permalink: /testimonials/:path/ defaults: - scope: @@ -32,3 +29,14 @@ google_analytics_id: null plugins: - jekyll-environment-variables + +homepage: + show_call_box: true + +logo: + mobile: "images/logo-mobile.svg" + desktop: "images/logo.svg" + desktop_height: "36px" + +footer: + copyright_text: 'Free Jekyll theme by www.zerostatic.io' diff --git a/_data/contact.yml b/_data/contact.yml index f4bc89f..6740b1e 100644 --- a/_data/contact.yml +++ b/_data/contact.yml @@ -1,4 +1,3 @@ -email: 'zerostaticthemes@gmail.com' -phone: 'XXXX XXX XXX' -businessName: 'Hugo Serif' -address: '' +email: 'jekyllserif@example.com' +phone: '1800 123 000' +contact_button_link: 'contact' diff --git a/_data/menus.yml b/_data/menus.yml new file mode 100644 index 0000000..9ad7d5a --- /dev/null +++ b/_data/menus.yml @@ -0,0 +1,21 @@ +main: + - name: "Home" + url: "/" + weight: 1 + - name: "Services" + url: "/services" + weight: 2 + - name: "Team" + url: "/team" + weight: 3 + - name: "Contact" + url: "/contact" + weight: 4 + +footer: + - name: "Home" + url: "/" + weight: 1 + - name: "Contact" + url: "/contact" + weight: 2 \ No newline at end of file diff --git a/_data/social.json b/_data/social.json new file mode 100644 index 0000000..9056902 --- /dev/null +++ b/_data/social.json @@ -0,0 +1,12 @@ +[ + { + "name": "Github", + "link": "https://github.com/JugglerX/jekyll-serif-theme", + "image": "images/github.svg" + }, + { + "name": "Twitter", + "link": "https://twitter.com/zerostaticio", + "image": "images/twitter.svg" + } +] diff --git a/_data/social.yaml b/_data/social.yaml deleted file mode 100644 index e07a7ed..0000000 --- a/_data/social.yaml +++ /dev/null @@ -1,5 +0,0 @@ -vimeo: "" -twitter: "https://twitter.com/figuritltd" -instagram: "" -linkedin: "https://www.linkedin.com/in/linda-chesher-81a35618/" -facebook: "" \ No newline at end of file diff --git a/_includes/call.html b/_includes/call.html new file mode 100644 index 0000000..67504ca --- /dev/null +++ b/_includes/call.html @@ -0,0 +1,19 @@ +
+
+ {% if site.data.contact.phone %} +
Phone: {{ site.data.contact.phone }}
+ {% endif %} + {% if site.data.contact.email %} + + {% endif %} +
+ {% if include.show_button %} +
+ Contact +
+ {% endif %} +
diff --git a/_includes/footer.html b/_includes/footer.html index 896d588..7c892e3 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,13 +1,16 @@ -
+
-
+

{{site.title}}

-
    -
  • Home
    • -
  • Contact
    • -
  • © {{site.title}} {{site.time | date:'%Y'}}
    • +
      + {% assign footermenu = site.data.menus.footer | sort: 'weight' %} + {% for item in footermenu %} +
    • + {{ item.name }} +
      • + {% endfor %}
diff --git a/_includes/header.html b/_includes/header.html index 4b484ba..f6c0c06 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,10 +1,10 @@ -
+
- Figurit Homepage + {{ site.title }}
{% include main-menu.html %} {% include hamburger.html %} diff --git a/_includes/main-menu-mobile.html b/_includes/main-menu-mobile.html index e513c56..dc31708 100644 --- a/_includes/main-menu-mobile.html +++ b/_includes/main-menu-mobile.html @@ -1,9 +1,10 @@ \ No newline at end of file diff --git a/_includes/main-menu.html b/_includes/main-menu.html index f706a05..86ad1b6 100644 --- a/_includes/main-menu.html +++ b/_includes/main-menu.html @@ -1,9 +1,10 @@ \ No newline at end of file +
diff --git a/_includes/social.html b/_includes/social.html index 51735bc..09cc352 100644 --- a/_includes/social.html +++ b/_includes/social.html @@ -1,19 +1,5 @@ - \ No newline at end of file + diff --git a/_includes/sub-footer.html b/_includes/sub-footer.html index d62da87..6e72935 100644 --- a/_includes/sub-footer.html +++ b/_includes/sub-footer.html @@ -1,16 +1,14 @@ -
+
-
- - +
+ {% if site.data.social %} + {% include social.html %} + {% endif %} + {% if site.footer.copyright_text %} +
{{ site.footer.copyright_text }}
+ {% endif %}
diff --git a/_layouts/contact.html b/_layouts/contact.html new file mode 100644 index 0000000..eac33fc --- /dev/null +++ b/_layouts/contact.html @@ -0,0 +1,17 @@ +--- +title: Contact +layout: default +bodyClass: page-contact +--- + +
+
+
+
+

{{page.title}}

+ {% include call.html show_button=false %} +
{{content}}
+
+
+
+
diff --git a/_layouts/home.html b/_layouts/home.html new file mode 100755 index 0000000..173b95d --- /dev/null +++ b/_layouts/home.html @@ -0,0 +1,69 @@ +--- +title: Jekyll Serif - Jekyll Small Business Theme +layout: default +bodyClass: page-home +--- + +
+
+
+
+ {{ content }} + {% if site.homepage.show_call_box %} + {% include call.html show_button=true %} + {% endif %} +
+ {% if page.intro_image %} +
+ {{ +
+ {% endif %} +
+
+
+ +
+
+
+ {% for service in site.services %} +
+
+
+

+ {{ service.title }} +

+

{{ service.content | markdownify | strip_html | truncate: 100 }}

+
+
+
+ {% endfor %} +
+
+
+ View All Services +
+
+
+
+ +{% if site.data.features %} +
+
+
+ + {% for feature in site.data.features %} +
+
+ {% if feature.image %} +
{{ feature.title }} logo
+ {% endif %} +

{{ feature.title }}

+
{{ feature.description }}
+
+
+ {% endfor %} + +
+
+
+{% endif %} diff --git a/_layouts/service.html b/_layouts/service.html index 7e40dee..d8798b8 100644 --- a/_layouts/service.html +++ b/_layouts/service.html @@ -2,14 +2,12 @@ layout: default --- -
-
-
-
-
-

{{page.title}}

-
{{page.content}}
-
+
+
+
+
+

{{page.title}}

+
{{page.content}}
diff --git a/_layouts/services.html b/_layouts/services.html new file mode 100644 index 0000000..8b2c7f4 --- /dev/null +++ b/_layouts/services.html @@ -0,0 +1,36 @@ +--- +layout: default +bodyClass: page-services-list +--- + +
+
+
+
+ {{ content }} +
+ {% if page.intro_image %} +
+ {{ +
+ {% endif %} +
+
+
+ +
+
+ {% for service in site.services %} +
+
+
+

+ {{ service.title }} +

+

{{ service.content | markdownify | strip_html | truncate: 100 }}

+
+
+
+ {% endfor %} +
+
\ No newline at end of file diff --git a/_layouts/teams.html b/_layouts/teams.html new file mode 100644 index 0000000..a29da9a --- /dev/null +++ b/_layouts/teams.html @@ -0,0 +1,62 @@ +--- +layout: default +bodyClass: page-team-list +--- + +
+
+
+
+ {{ content }} +
+ {% if page.intro_image %} +
+ {{ +
+ {% endif %} +
+
+
+ +
+
+ {% assign promoted_teams = site.team | where: "promoted", true | sort: "weight" %} + {% for team in promoted_teams %} +
+
+ {% if team.image %} +
+ {{ team.title }} +
+ {% endif %} +
+

{{ team.title }}

+

{{ team.jobtitle }}

+ {% if team.linkedinurl %} + LinkedIn + {% endif %} +
+
{{ team.content | truncate: 120 }}
+
+
+ {% endfor %} +
+
+ {% assign teams = site.team | where_exp: "promoted", "promoted != false" | sort: "weight" %} + {% for team in teams %} +
+
+ {% if team.image %} +
+ {{ team.title }} +
+ {% endif %} +
+

{{ team.title }}

+

{{ team.jobtitle }}

+
+
+
+ {% endfor %} +
+
\ No newline at end of file diff --git a/_sass/_bootstrap-variables.scss b/_sass/_bootstrap-variables.scss index 272cfbc..6824794 100755 --- a/_sass/_bootstrap-variables.scss +++ b/_sass/_bootstrap-variables.scss @@ -1,45 +1,19 @@ -// Grid breakpoints -// $grid-breakpoints: ( -// xs: 0, -// sm: 576px, -// md: 768px, -// lg: 992px, -// xl: 1200px -// ); +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1300px, +); -// $container-max-widths: ( -// sm: 768px, -// md: 992px, -// lg: 1000px, -// xl: 1220px -// ); +$container-max-widths: ( + sm: 566px, + md: 740px, + lg: 960px, + xl: 1140px, +); -$grid-gutter-width: 20px; - -$white: #ffffff; -$black: #000000; -$primary: #1c3ed3; -$secondary: #414156; - -// Links -$link-color: $primary; -$link-decoration: none; -$link-hover-color: lighten($primary, 20%); -$link-hover-decoration: underline; - -// Fonts -$font-family-base: 'Open Sans', 'Helvetica Neue', Arial, sans-serif, - -apple-system; -$font-family-heading: 'Lora', 'Helvetica Neue', Arial, sans-serif, -apple-system; -$font-size-base: 1rem; // Assumes the browser default, typically `16px` -$font-weight-thin: 200; -$font-weight-light: 300; -$font-weight-normal: 400; -$font-weight-bold: 700; -$font-weight-base: $font-weight-normal; -$line-height-base: 1.6; - -$headings-font-weight: 400; +$grid-gutter-width: 30px; $spacer: 1rem; $spacers: (); @@ -56,16 +30,6 @@ $spacers: map-merge( 8: 80px, 9: 90px, 10: 100px, - 11: 110px, - 12: 120px, - 13: 130px, - 14: 140px, - 15: 150px, - 16: 160px, - 17: 170px, - 18: 180px, - 19: 190px, - 20: 200px, ), $spacers ); diff --git a/_sass/bootstrap/_alert.scss b/_sass/bootstrap/_alert.scss old mode 100755 new mode 100644 index dd43e23..da2a98a --- a/_sass/bootstrap/_alert.scss +++ b/_sass/bootstrap/_alert.scss @@ -27,7 +27,7 @@ // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: ($close-font-size + $alert-padding-x * 2); + padding-right: $close-font-size + $alert-padding-x * 2; // Adjust close link position .close { diff --git a/_sass/bootstrap/_badge.scss b/_sass/bootstrap/_badge.scss old mode 100755 new mode 100644 index b87a1b0..42c5d08 --- a/_sass/bootstrap/_badge.scss +++ b/_sass/bootstrap/_badge.scss @@ -6,13 +6,20 @@ .badge { display: inline-block; padding: $badge-padding-y $badge-padding-x; - font-size: $badge-font-size; + @include font-size($badge-font-size); font-weight: $badge-font-weight; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; @include border-radius($badge-border-radius); + @include transition($badge-transition); + + @at-root a#{&} { + @include hover-focus() { + text-decoration: none; + } + } // Empty badges collapse automatically &:empty { diff --git a/_sass/bootstrap/_breadcrumb.scss b/_sass/bootstrap/_breadcrumb.scss old mode 100755 new mode 100644 index 25b9d85..d748894 --- a/_sass/bootstrap/_breadcrumb.scss +++ b/_sass/bootstrap/_breadcrumb.scss @@ -3,19 +3,23 @@ flex-wrap: wrap; padding: $breadcrumb-padding-y $breadcrumb-padding-x; margin-bottom: $breadcrumb-margin-bottom; + @include font-size($breadcrumb-font-size); list-style: none; background-color: $breadcrumb-bg; - @include border-radius($border-radius); + @include border-radius($breadcrumb-border-radius); } .breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") - + .breadcrumb-item::before { - display: inline-block; // Suppress underlining of the separator in modern browsers - padding-right: $breadcrumb-item-padding; + + .breadcrumb-item { padding-left: $breadcrumb-item-padding; - color: $breadcrumb-divider-color; - content: "#{$breadcrumb-divider}"; + + &::before { + display: inline-block; // Suppress underlining of the separator in modern browsers + padding-right: $breadcrumb-item-padding; + color: $breadcrumb-divider-color; + content: escape-svg($breadcrumb-divider); + } } // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built diff --git a/_sass/bootstrap/_button-group.scss b/_sass/bootstrap/_button-group.scss old mode 100755 new mode 100644 index c1b8265..da02d79 --- a/_sass/bootstrap/_button-group.scss +++ b/_sass/bootstrap/_button-group.scss @@ -9,11 +9,11 @@ > .btn { position: relative; - flex: 0 1 auto; + flex: 1 1 auto; // Bring the hover, focused, and "active" buttons to the front to overlay // the borders properly - @include hover { + @include hover() { z-index: 1; } &:focus, @@ -22,14 +22,6 @@ z-index: 1; } } - - // Prevent double borders when buttons are next to each other - .btn + .btn, - .btn + .btn-group, - .btn-group + .btn, - .btn-group + .btn-group { - margin-left: -$btn-border-width; - } } // Optional: Group multiple button groups together for a toolbar @@ -44,8 +36,10 @@ } .btn-group { - > .btn:first-child { - margin-left: 0; + // Prevent double borders when buttons are next to each other + > .btn:not(:first-child), + > .btn-group:not(:first-child) { + margin-left: -$btn-border-width; } // Reset rounded corners @@ -76,9 +70,15 @@ padding-right: $btn-padding-x * .75; padding-left: $btn-padding-x * .75; - &::after { + &::after, + .dropup &::after, + .dropright &::after { margin-left: 0; } + + .dropleft &::before { + margin-right: 0; + } } .btn-sm + .dropdown-toggle-split { @@ -113,17 +113,14 @@ align-items: flex-start; justify-content: center; - .btn, - .btn-group { + > .btn, + > .btn-group { width: 100%; } - > .btn + .btn, - > .btn + .btn-group, - > .btn-group + .btn, - > .btn-group + .btn-group { + > .btn:not(:first-child), + > .btn-group:not(:first-child) { margin-top: -$btn-border-width; - margin-left: 0; } // Reset rounded corners diff --git a/_sass/bootstrap/_buttons.scss b/_sass/bootstrap/_buttons.scss old mode 100755 new mode 100644 index da6d879..e87d339 --- a/_sass/bootstrap/_buttons.scss +++ b/_sass/bootstrap/_buttons.scss @@ -6,17 +6,21 @@ .btn { display: inline-block; + font-family: $btn-font-family; font-weight: $btn-font-weight; + color: $body-color; text-align: center; - white-space: nowrap; + white-space: $btn-white-space; vertical-align: middle; + cursor: if($enable-pointer-cursor-for-buttons, pointer, null); user-select: none; + background-color: transparent; border: $btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius); + @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); @include transition($btn-transition); - // Share hover and focus styles - @include hover-focus { + @include hover() { + color: $body-color; text-decoration: none; } @@ -33,14 +37,8 @@ @include box-shadow(none); } - // Opinionated: add "hand" cursor to non-disabled .btn elements - &:not(:disabled):not(.disabled) { - cursor: pointer; - } - &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active { - background-image: none; @include box-shadow($btn-active-box-shadow); &:focus { @@ -81,25 +79,23 @@ fieldset:disabled a.btn { .btn-link { font-weight: $font-weight-normal; color: $link-color; - background-color: transparent; + text-decoration: $link-decoration; - @include hover { + @include hover() { color: $link-hover-color; text-decoration: $link-hover-decoration; - background-color: transparent; - border-color: transparent; } &:focus, &.focus { text-decoration: $link-hover-decoration; - border-color: transparent; box-shadow: none; } &:disabled, &.disabled { color: $btn-link-disabled-color; + pointer-events: none; } // No need for an active state here @@ -111,11 +107,11 @@ fieldset:disabled a.btn { // .btn-lg { - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); + @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); } .btn-sm { - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); + @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); } diff --git a/_sass/bootstrap/_card.scss b/_sass/bootstrap/_card.scss old mode 100755 new mode 100644 index 4c4845c..d6759fd --- a/_sass/bootstrap/_card.scss +++ b/_sass/bootstrap/_card.scss @@ -6,7 +6,8 @@ position: relative; display: flex; flex-direction: column; - min-width: 0; + min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 + height: $card-height; word-wrap: break-word; background-color: $card-bg; background-clip: border-box; @@ -35,7 +36,11 @@ // Enable `flex-grow: 1` for decks and groups so that card blocks take up // as much space as possible, ensuring footers are aligned to the bottom. flex: 1 1 auto; + // Workaround for the image size bug in IE + // See: https://github.com/twbs/bootstrap/pull/28855 + min-height: 1px; padding: $card-spacer-x; + color: $card-color; } .card-title { @@ -43,7 +48,7 @@ } .card-subtitle { - margin-top: -($card-spacer-y / 2); + margin-top: -$card-spacer-y / 2; margin-bottom: 0; } @@ -52,7 +57,7 @@ } .card-link { - @include hover { + @include hover() { text-decoration: none; } @@ -68,6 +73,7 @@ .card-header { padding: $card-spacer-y $card-spacer-x; margin-bottom: 0; // Removes the default margin-bottom of + color: $card-cap-color; background-color: $card-cap-bg; border-bottom: $card-border-width solid $card-border-color; @@ -98,15 +104,15 @@ // .card-header-tabs { - margin-right: -($card-spacer-x / 2); + margin-right: -$card-spacer-x / 2; margin-bottom: -$card-spacer-y; - margin-left: -($card-spacer-x / 2); + margin-left: -$card-spacer-x / 2; border-bottom: 0; } .card-header-pills { - margin-right: -($card-spacer-x / 2); - margin-left: -($card-spacer-x / 2); + margin-right: -$card-spacer-x / 2; + margin-left: -$card-spacer-x / 2; } // Card image @@ -119,19 +125,20 @@ padding: $card-img-overlay-padding; } -.card-img { +.card-img, +.card-img-top, +.card-img-bottom { + flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396 width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch - @include border-radius($card-inner-border-radius); } -// Card image caps +.card-img, .card-img-top { - width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-top-radius($card-inner-border-radius); } +.card-img, .card-img-bottom { - width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-bottom-radius($card-inner-border-radius); } @@ -139,23 +146,19 @@ // Card deck .card-deck { - display: flex; - flex-direction: column; - .card { margin-bottom: $card-deck-margin; } @include media-breakpoint-up(sm) { + display: flex; flex-flow: row wrap; margin-right: -$card-deck-margin; margin-left: -$card-deck-margin; .card { - display: flex; - // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored + // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0%; - flex-direction: column; margin-right: $card-deck-margin; margin-bottom: 0; // Override the default margin-left: $card-deck-margin; @@ -169,9 +172,6 @@ // .card-group { - display: flex; - flex-direction: column; - // The child selector allows nested `.card` within `.card-group` // to display properly. > .card { @@ -179,11 +179,12 @@ } @include media-breakpoint-up(sm) { + display: flex; flex-flow: row wrap; // The child selector allows nested `.card` within `.card-group` // to display properly. > .card { - // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored + // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0%; margin-bottom: 0; @@ -194,55 +195,35 @@ // Handle rounded corners @if $enable-rounded { - &:first-child { + &:not(:last-child) { @include border-right-radius(0); .card-img-top, .card-header { + // stylelint-disable-next-line property-blacklist border-top-right-radius: 0; } .card-img-bottom, .card-footer { + // stylelint-disable-next-line property-blacklist border-bottom-right-radius: 0; } } - &:last-child { + &:not(:first-child) { @include border-left-radius(0); .card-img-top, .card-header { + // stylelint-disable-next-line property-blacklist border-top-left-radius: 0; } .card-img-bottom, .card-footer { + // stylelint-disable-next-line property-blacklist border-bottom-left-radius: 0; } } - - &:only-child { - @include border-radius($card-border-radius); - - .card-img-top, - .card-header { - @include border-top-radius($card-border-radius); - } - .card-img-bottom, - .card-footer { - @include border-bottom-radius($card-border-radius); - } - } - - &:not(:first-child):not(:last-child):not(:only-child) { - @include border-radius(0); - - .card-img-top, - .card-img-bottom, - .card-header, - .card-footer { - @include border-radius(0); - } - } } } } @@ -261,6 +242,8 @@ @include media-breakpoint-up(sm) { column-count: $card-columns-count; column-gap: $card-columns-gap; + orphans: 1; + widows: 1; .card { display: inline-block; // Don't let them vertically span multiple columns @@ -268,3 +251,28 @@ } } } + + +// +// Accordion +// + +.accordion { + > .card { + overflow: hidden; + + &:not(:last-of-type) { + border-bottom: 0; + @include border-bottom-radius(0); + } + + &:not(:first-of-type) { + @include border-top-radius(0); + } + + > .card-header { + @include border-radius(0); + margin-bottom: -$card-border-width; + } + } +} diff --git a/_sass/bootstrap/_carousel.scss b/_sass/bootstrap/_carousel.scss old mode 100755 new mode 100644 index 72a5034..fb5e9f8 --- a/_sass/bootstrap/_carousel.scss +++ b/_sass/bootstrap/_carousel.scss @@ -1,22 +1,39 @@ -// Wrapper for the slide container and indicators +// Notes on the classes: +// +// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) +// even when their scroll action started on a carousel, but for compatibility (with Firefox) +// we're preventing all actions instead +// 2. The .carousel-item-left and .carousel-item-right is used to indicate where +// the active slide is heading. +// 3. .active.carousel-item is the current slide. +// 4. .active.carousel-item-left and .active.carousel-item-right is the current +// slide in its in-transition state. Only one of these occurs at a time. +// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right +// is the upcoming slide in transition. + .carousel { position: relative; } +.carousel.pointer-event { + touch-action: pan-y; +} + .carousel-inner { position: relative; width: 100%; overflow: hidden; + @include clearfix(); } .carousel-item { position: relative; display: none; - align-items: center; + float: left; width: 100%; - @include transition($carousel-transition); + margin-right: -100%; backface-visibility: hidden; - perspective: 1000px; + @include transition($carousel-transition); } .carousel-item.active, @@ -25,37 +42,40 @@ display: block; } -.carousel-item-next, -.carousel-item-prev { - position: absolute; - top: 0; -} - -// CSS3 transforms when supported by the browser -.carousel-item-next.carousel-item-left, -.carousel-item-prev.carousel-item-right { - transform: translateX(0); - - @supports (transform-style: preserve-3d) { - transform: translate3d(0, 0, 0); - } -} - -.carousel-item-next, +.carousel-item-next:not(.carousel-item-left), .active.carousel-item-right { transform: translateX(100%); - - @supports (transform-style: preserve-3d) { - transform: translate3d(100%, 0, 0); - } } -.carousel-item-prev, +.carousel-item-prev:not(.carousel-item-right), .active.carousel-item-left { transform: translateX(-100%); +} - @supports (transform-style: preserve-3d) { - transform: translate3d(-100%, 0, 0); + +// +// Alternate transitions +// + +.carousel-fade { + .carousel-item { + opacity: 0; + transition-property: opacity; + transform: none; + } + + .carousel-item.active, + .carousel-item-next.carousel-item-left, + .carousel-item-prev.carousel-item-right { + z-index: 1; + opacity: 1; + } + + .active.carousel-item-left, + .active.carousel-item-right { + z-index: 0; + opacity: 0; + @include transition(opacity 0s $carousel-transition-duration); } } @@ -69,6 +89,7 @@ position: absolute; top: 0; bottom: 0; + z-index: 1; // Use flex for alignment (1-3) display: flex; // 1. allow flex styles align-items: center; // 2. vertically center contents @@ -77,27 +98,26 @@ color: $carousel-control-color; text-align: center; opacity: $carousel-control-opacity; - // We can't have a transition here because WebKit cancels the carousel - // animation if you trip this while in the middle of another animation. + @include transition($carousel-control-transition); // Hover/focus state - @include hover-focus { + @include hover-focus() { color: $carousel-control-color; text-decoration: none; outline: 0; - opacity: .9; + opacity: $carousel-control-hover-opacity; } } .carousel-control-prev { left: 0; @if $enable-gradients { - background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001)); + background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); } } .carousel-control-next { right: 0; @if $enable-gradients { - background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001)); + background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); } } @@ -107,14 +127,13 @@ display: inline-block; width: $carousel-control-icon-width; height: $carousel-control-icon-width; - background: transparent no-repeat center center; - background-size: 100% 100%; + background: no-repeat 50% / 100% 100%; } .carousel-control-prev-icon { - background-image: $carousel-control-prev-icon-bg; + background-image: escape-svg($carousel-control-prev-icon-bg); } .carousel-control-next-icon { - background-image: $carousel-control-next-icon-bg; + background-image: escape-svg($carousel-control-next-icon-bg); } @@ -126,7 +145,7 @@ .carousel-indicators { position: absolute; right: 0; - bottom: 10px; + bottom: 0; left: 0; z-index: 15; display: flex; @@ -138,38 +157,25 @@ list-style: none; li { - position: relative; + box-sizing: content-box; flex: 0 1 auto; width: $carousel-indicator-width; height: $carousel-indicator-height; margin-right: $carousel-indicator-spacer; margin-left: $carousel-indicator-spacer; text-indent: -999px; - background-color: rgba($carousel-indicator-active-bg, .5); - - // Use pseudo classes to increase the hit area by 10px on top and bottom. - &::before { - position: absolute; - top: -10px; - left: 0; - display: inline-block; - width: 100%; - height: 10px; - content: ""; - } - &::after { - position: absolute; - bottom: -10px; - left: 0; - display: inline-block; - width: 100%; - height: 10px; - content: ""; - } + cursor: pointer; + background-color: $carousel-indicator-active-bg; + background-clip: padding-box; + // Use transparent borders to increase the hit area by 10px on top and bottom. + border-top: $carousel-indicator-hit-area-height solid transparent; + border-bottom: $carousel-indicator-hit-area-height solid transparent; + opacity: .5; + @include transition($carousel-indicator-transition); } .active { - background-color: $carousel-indicator-active-bg; + opacity: 1; } } @@ -180,9 +186,9 @@ .carousel-caption { position: absolute; - right: ((100% - $carousel-caption-width) / 2); + right: (100% - $carousel-caption-width) / 2; bottom: 20px; - left: ((100% - $carousel-caption-width) / 2); + left: (100% - $carousel-caption-width) / 2; z-index: 10; padding-top: 20px; padding-bottom: 20px; diff --git a/_sass/bootstrap/_close.scss b/_sass/bootstrap/_close.scss old mode 100755 new mode 100644 index 871cb08..071aebe --- a/_sass/bootstrap/_close.scss +++ b/_sass/bootstrap/_close.scss @@ -1,21 +1,22 @@ .close { float: right; - font-size: $close-font-size; + @include font-size($close-font-size); font-weight: $close-font-weight; line-height: 1; color: $close-color; text-shadow: $close-text-shadow; opacity: .5; - @include hover-focus { + // Override 's hover style + @include hover() { color: $close-color; text-decoration: none; - opacity: .75; } - // Opinionated: add "hand" cursor to non-disabled .close elements &:not(:disabled):not(.disabled) { - cursor: pointer; + @include hover-focus() { + opacity: .75; + } } } @@ -24,11 +25,17 @@ // If you want the anchor version, it requires `href="#"`. // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile -// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type +// stylelint-disable-next-line selector-no-qualifying-type button.close { padding: 0; background-color: transparent; border: 0; - -webkit-appearance: none; + appearance: none; +} + +// Future-proof disabling of clicks on `` elements + +// stylelint-disable-next-line selector-no-qualifying-type +a.close.disabled { + pointer-events: none; } -// stylelint-enable diff --git a/_sass/bootstrap/_code.scss b/_sass/bootstrap/_code.scss old mode 100755 new mode 100644 index 9de20fa..4bc117a --- a/_sass/bootstrap/_code.scss +++ b/_sass/bootstrap/_code.scss @@ -1,16 +1,8 @@ -// Inline and block code styles -code, -kbd, -pre, -samp { - font-family: $font-family-monospace; -} - // Inline code code { - font-size: $code-font-size; + @include font-size($code-font-size); color: $code-color; - word-break: break-word; + word-wrap: break-word; // Streamline the style when inside anchors to avoid broken underline and more a > & { @@ -21,7 +13,7 @@ code { // User input typically entered via keyboard kbd { padding: $kbd-padding-y $kbd-padding-x; - font-size: $kbd-font-size; + @include font-size($kbd-font-size); color: $kbd-color; background-color: $kbd-bg; @include border-radius($border-radius-sm); @@ -29,7 +21,7 @@ kbd { kbd { padding: 0; - font-size: 100%; + @include font-size(100%); font-weight: $nested-kbd-font-weight; @include box-shadow(none); } @@ -38,12 +30,12 @@ kbd { // Blocks of code pre { display: block; - font-size: $code-font-size; + @include font-size($code-font-size); color: $pre-color; // Account for some code outputs that place code tags in pre tags code { - font-size: inherit; + @include font-size(inherit); color: inherit; word-break: normal; } diff --git a/_sass/bootstrap/_custom-forms.scss b/_sass/bootstrap/_custom-forms.scss old mode 100755 new mode 100644 index 2d83f7e..21e72da --- a/_sass/bootstrap/_custom-forms.scss +++ b/_sass/bootstrap/_custom-forms.scss @@ -10,8 +10,8 @@ .custom-control { position: relative; display: block; - min-height: (1rem * $line-height-base); - padding-left: $custom-control-gutter; + min-height: $font-size-base * $line-height-base; + padding-left: $custom-control-gutter + $custom-control-indicator-size; } .custom-control-inline { @@ -21,26 +21,41 @@ .custom-control-input { position: absolute; + left: 0; z-index: -1; // Put the input behind the label so it doesn't overlay text + width: $custom-control-indicator-size; + height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2; opacity: 0; &:checked ~ .custom-control-label::before { color: $custom-control-indicator-checked-color; + border-color: $custom-control-indicator-checked-border-color; @include gradient-bg($custom-control-indicator-checked-bg); @include box-shadow($custom-control-indicator-checked-box-shadow); } &:focus ~ .custom-control-label::before { // the mixin is not used here to make sure there is feedback - box-shadow: $custom-control-indicator-focus-box-shadow; + @if $enable-shadows { + box-shadow: $input-box-shadow, $input-focus-box-shadow; + } @else { + box-shadow: $custom-control-indicator-focus-box-shadow; + } } - &:active ~ .custom-control-label::before { + &:focus:not(:checked) ~ .custom-control-label::before { + border-color: $custom-control-indicator-focus-border-color; + } + + &:not(:disabled):active ~ .custom-control-label::before { color: $custom-control-indicator-active-color; background-color: $custom-control-indicator-active-bg; + border-color: $custom-control-indicator-active-border-color; @include box-shadow($custom-control-indicator-active-box-shadow); } + // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247 + &[disabled], &:disabled { ~ .custom-control-label { color: $custom-control-label-disabled-color; @@ -54,38 +69,40 @@ // Custom control indicators // -// Build the custom controls out of psuedo-elements. +// Build the custom controls out of pseudo-elements. .custom-control-label { + position: relative; margin-bottom: 0; + color: $custom-control-label-color; + vertical-align: top; + cursor: $custom-control-cursor; // Background-color and (when enabled) gradient &::before { position: absolute; - top: (($line-height-base - $custom-control-indicator-size) / 2); - left: 0; + top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2; + left: -($custom-control-gutter + $custom-control-indicator-size); display: block; width: $custom-control-indicator-size; height: $custom-control-indicator-size; pointer-events: none; content: ""; - user-select: none; background-color: $custom-control-indicator-bg; + border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width; @include box-shadow($custom-control-indicator-box-shadow); } // Foreground (icon) &::after { position: absolute; - top: (($line-height-base - $custom-control-indicator-size) / 2); - left: 0; + top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2; + left: -($custom-control-gutter + $custom-control-indicator-size); display: block; width: $custom-control-indicator-size; height: $custom-control-indicator-size; content: ""; - background-repeat: no-repeat; - background-position: center center; - background-size: $custom-control-indicator-bg-size; + background: no-repeat 50% / #{$custom-control-indicator-bg-size}; } } @@ -100,21 +117,19 @@ } .custom-control-input:checked ~ .custom-control-label { - &::before { - @include gradient-bg($custom-control-indicator-checked-bg); - } &::after { - background-image: $custom-checkbox-indicator-icon-checked; + background-image: escape-svg($custom-checkbox-indicator-icon-checked); } } .custom-control-input:indeterminate ~ .custom-control-label { &::before { + border-color: $custom-checkbox-indicator-indeterminate-border-color; @include gradient-bg($custom-checkbox-indicator-indeterminate-bg); @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow); } &::after { - background-image: $custom-checkbox-indicator-icon-indeterminate; + background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate); } } @@ -134,15 +149,56 @@ .custom-radio { .custom-control-label::before { + // stylelint-disable-next-line property-blacklist border-radius: $custom-radio-indicator-border-radius; } .custom-control-input:checked ~ .custom-control-label { - &::before { - @include gradient-bg($custom-control-indicator-checked-bg); - } &::after { - background-image: $custom-radio-indicator-icon-checked; + background-image: escape-svg($custom-radio-indicator-icon-checked); + } + } + + .custom-control-input:disabled { + &:checked ~ .custom-control-label::before { + background-color: $custom-control-indicator-checked-disabled-bg; + } + } +} + + +// switches +// +// Tweak a few things for switches + +.custom-switch { + padding-left: $custom-switch-width + $custom-control-gutter; + + .custom-control-label { + &::before { + left: -($custom-switch-width + $custom-control-gutter); + width: $custom-switch-width; + pointer-events: all; + // stylelint-disable-next-line property-blacklist + border-radius: $custom-switch-indicator-border-radius; + } + + &::after { + top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2); + left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2); + width: $custom-switch-indicator-size; + height: $custom-switch-indicator-size; + background-color: $custom-control-indicator-border-color; + // stylelint-disable-next-line property-blacklist + border-radius: $custom-switch-indicator-border-radius; + @include transition(transform .15s ease-in-out, $custom-forms-transition); + } + } + + .custom-control-input:checked ~ .custom-control-label { + &::after { + background-color: $custom-control-indicator-bg; + transform: translateX($custom-switch-width - $custom-control-indicator-size); } } @@ -157,7 +213,7 @@ // Select // // Replaces the browser default select with a custom one, mostly pulled from -// http://primercss.io. +// https://primer.github.io/. // .custom-select { @@ -165,23 +221,26 @@ width: 100%; height: $custom-select-height; padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; + font-family: $custom-select-font-family; + @include font-size($custom-select-font-size); + font-weight: $custom-select-font-weight; line-height: $custom-select-line-height; color: $custom-select-color; vertical-align: middle; - background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; - background-size: $custom-select-bg-size; + background: $custom-select-bg $custom-select-background; border: $custom-select-border-width solid $custom-select-border-color; - @if $enable-rounded { - border-radius: $custom-select-border-radius; - } @else { - border-radius: 0; - } + @include border-radius($custom-select-border-radius, 0); + @include box-shadow($custom-select-box-shadow); appearance: none; &:focus { border-color: $custom-select-focus-border-color; outline: 0; - box-shadow: $custom-select-focus-box-shadow; + @if $enable-shadows { + box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow; + } @else { + box-shadow: $custom-select-focus-box-shadow; + } &::-ms-value { // For visual consistency with other platforms/browsers, @@ -208,22 +267,30 @@ // Hides the default caret in IE11 &::-ms-expand { - opacity: 0; + display: none; + } + + // Remove outline from select box in FF + &:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 $custom-select-color; } } .custom-select-sm { height: $custom-select-height-sm; - padding-top: $custom-select-padding-y; - padding-bottom: $custom-select-padding-y; - font-size: $custom-select-font-size-sm; + padding-top: $custom-select-padding-y-sm; + padding-bottom: $custom-select-padding-y-sm; + padding-left: $custom-select-padding-x-sm; + @include font-size($custom-select-font-size-sm); } .custom-select-lg { height: $custom-select-height-lg; - padding-top: $custom-select-padding-y; - padding-bottom: $custom-select-padding-y; - font-size: $custom-select-font-size-lg; + padding-top: $custom-select-padding-y-lg; + padding-bottom: $custom-select-padding-y-lg; + padding-left: $custom-select-padding-x-lg; + @include font-size($custom-select-font-size-lg); } @@ -247,13 +314,15 @@ margin: 0; opacity: 0; - &:focus ~ .custom-file-control { + &:focus ~ .custom-file-label { border-color: $custom-file-focus-border-color; box-shadow: $custom-file-focus-box-shadow; + } - &::before { - border-color: $custom-file-focus-border-color; - } + // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247 + &[disabled] ~ .custom-file-label, + &:disabled ~ .custom-file-label { + background-color: $custom-file-disabled-bg; } @each $lang, $value in $custom-file-text { @@ -261,6 +330,10 @@ content: $value; } } + + ~ .custom-file-label[data-browse]::after { + content: attr(data-browse); + } } .custom-file-label { @@ -271,6 +344,8 @@ z-index: 1; height: $custom-file-height; padding: $custom-file-padding-y $custom-file-padding-x; + font-family: $custom-file-font-family; + font-weight: $custom-file-font-weight; line-height: $custom-file-line-height; color: $custom-file-color; background-color: $custom-file-bg; @@ -285,13 +360,162 @@ bottom: 0; z-index: 3; display: block; - height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2); + height: $custom-file-height-inner; padding: $custom-file-padding-y $custom-file-padding-x; line-height: $custom-file-line-height; color: $custom-file-button-color; content: "Browse"; @include gradient-bg($custom-file-button-bg); - border-left: $custom-file-border-width solid $custom-file-border-color; + border-left: inherit; @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); } } + +// Range +// +// Style range inputs the same across browsers. Vendor-specific rules for pseudo +// elements cannot be mixed. As such, there are no shared styles for focus or +// active states on prefixed selectors. + +.custom-range { + width: 100%; + height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2); + padding: 0; // Need to reset padding + background-color: transparent; + appearance: none; + + &:focus { + outline: none; + + // Pseudo-elements must be split across multiple rulesets to have an effect. + // No box-shadow() mixin for focus accessibility. + &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } + &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } + &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } + } + + &::-moz-focus-outer { + border: 0; + } + + &::-webkit-slider-thumb { + width: $custom-range-thumb-width; + height: $custom-range-thumb-height; + margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific + @include gradient-bg($custom-range-thumb-bg); + border: $custom-range-thumb-border; + @include border-radius($custom-range-thumb-border-radius); + @include box-shadow($custom-range-thumb-box-shadow); + @include transition($custom-forms-transition); + appearance: none; + + &:active { + @include gradient-bg($custom-range-thumb-active-bg); + } + } + + &::-webkit-slider-runnable-track { + width: $custom-range-track-width; + height: $custom-range-track-height; + color: transparent; // Why? + cursor: $custom-range-track-cursor; + background-color: $custom-range-track-bg; + border-color: transparent; + @include border-radius($custom-range-track-border-radius); + @include box-shadow($custom-range-track-box-shadow); + } + + &::-moz-range-thumb { + width: $custom-range-thumb-width; + height: $custom-range-thumb-height; + @include gradient-bg($custom-range-thumb-bg); + border: $custom-range-thumb-border; + @include border-radius($custom-range-thumb-border-radius); + @include box-shadow($custom-range-thumb-box-shadow); + @include transition($custom-forms-transition); + appearance: none; + + &:active { + @include gradient-bg($custom-range-thumb-active-bg); + } + } + + &::-moz-range-track { + width: $custom-range-track-width; + height: $custom-range-track-height; + color: transparent; + cursor: $custom-range-track-cursor; + background-color: $custom-range-track-bg; + border-color: transparent; // Firefox specific? + @include border-radius($custom-range-track-border-radius); + @include box-shadow($custom-range-track-box-shadow); + } + + &::-ms-thumb { + width: $custom-range-thumb-width; + height: $custom-range-thumb-height; + margin-top: 0; // Edge specific + margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. + margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. + @include gradient-bg($custom-range-thumb-bg); + border: $custom-range-thumb-border; + @include border-radius($custom-range-thumb-border-radius); + @include box-shadow($custom-range-thumb-box-shadow); + @include transition($custom-forms-transition); + appearance: none; + + &:active { + @include gradient-bg($custom-range-thumb-active-bg); + } + } + + &::-ms-track { + width: $custom-range-track-width; + height: $custom-range-track-height; + color: transparent; + cursor: $custom-range-track-cursor; + background-color: transparent; + border-color: transparent; + border-width: $custom-range-thumb-height / 2; + @include box-shadow($custom-range-track-box-shadow); + } + + &::-ms-fill-lower { + background-color: $custom-range-track-bg; + @include border-radius($custom-range-track-border-radius); + } + + &::-ms-fill-upper { + margin-right: 15px; // arbitrary? + background-color: $custom-range-track-bg; + @include border-radius($custom-range-track-border-radius); + } + + &:disabled { + &::-webkit-slider-thumb { + background-color: $custom-range-thumb-disabled-bg; + } + + &::-webkit-slider-runnable-track { + cursor: default; + } + + &::-moz-range-thumb { + background-color: $custom-range-thumb-disabled-bg; + } + + &::-moz-range-track { + cursor: default; + } + + &::-ms-thumb { + background-color: $custom-range-thumb-disabled-bg; + } + } +} + +.custom-control-label::before, +.custom-file-label, +.custom-select { + @include transition($custom-forms-transition); +} diff --git a/_sass/bootstrap/_dropdown.scss b/_sass/bootstrap/_dropdown.scss old mode 100755 new mode 100644 index a9d4cfe..76f33a4 --- a/_sass/bootstrap/_dropdown.scss +++ b/_sass/bootstrap/_dropdown.scss @@ -1,12 +1,16 @@ // The dropdown wrapper (`
`) .dropup, -.dropdown { +.dropright, +.dropdown, +.dropleft { position: relative; } .dropdown-toggle { + white-space: nowrap; + // Generate the caret automatically - @include caret; + @include caret(); } // The dropdown menu @@ -20,8 +24,8 @@ min-width: $dropdown-min-width; padding: $dropdown-padding-y 0; margin: $dropdown-spacer 0 0; // override default ul - font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues - color: $body-color; + @include font-size($dropdown-font-size); + color: $dropdown-color; text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) list-style: none; background-color: $dropdown-bg; @@ -31,10 +35,28 @@ @include box-shadow($dropdown-box-shadow); } +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .dropdown-menu#{$infix}-left { + right: auto; + left: 0; + } + + .dropdown-menu#{$infix}-right { + right: 0; + left: auto; + } + } +} + // Allow for dropdowns to go bottom up (aka, dropup-menu) // Just add .dropup after the standard .dropdown class and you're set. .dropup { .dropdown-menu { + top: auto; + bottom: 100%; margin-top: 0; margin-bottom: $dropdown-spacer; } @@ -46,6 +68,9 @@ .dropright { .dropdown-menu { + top: 0; + right: auto; + left: 100%; margin-top: 0; margin-left: $dropdown-spacer; } @@ -60,6 +85,9 @@ .dropleft { .dropdown-menu { + top: 0; + right: 100%; + left: auto; margin-top: 0; margin-right: $dropdown-spacer; } @@ -72,9 +100,21 @@ } } +// When enabled Popper.js, reset basic dropdown position +// stylelint-disable-next-line no-duplicate-selectors +.dropdown-menu { + &[x-placement^="top"], + &[x-placement^="right"], + &[x-placement^="bottom"], + &[x-placement^="left"] { + right: auto; + bottom: auto; + } +} + // Dividers (basically an `
`) within the dropdown .dropdown-divider { - @include nav-divider($dropdown-divider-bg); + @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true); } // Links, buttons, and more within the dropdown menu @@ -92,7 +132,19 @@ background-color: transparent; // For `