├── .gitingore ├── .gitignore ├── css ├── bootstrap │ └── _mixins.css └── font │ └── GreatVibes-Regular.ttf ├── README.md ├── scss ├── bootstrap │ ├── helpers │ │ ├── _clearfix.scss │ │ ├── _text-truncation.scss │ │ ├── _visually-hidden.scss │ │ ├── _stretched-link.scss │ │ ├── _colored-links.scss │ │ ├── _ratio.scss │ │ └── _position.scss │ ├── mixins │ │ ├── _clearfix.scss │ │ ├── _lists.scss │ │ ├── _color-scheme.scss │ │ ├── _text-truncate.scss │ │ ├── _resize.scss │ │ ├── _container.scss │ │ ├── _alert.scss │ │ ├── _image.scss │ │ ├── _box-shadow.scss │ │ ├── _reset-text.scss │ │ ├── _list-group.scss │ │ ├── _deprecate.scss │ │ ├── _transition.scss │ │ ├── _pagination.scss │ │ ├── _table-variants.scss │ │ ├── _visually-hidden.scss │ │ ├── _caret.scss │ │ ├── _gradients.scss │ │ ├── _border-radius.scss │ │ ├── _utilities.scss │ │ ├── _grid.scss │ │ ├── _forms.scss │ │ ├── _buttons.scss │ │ └── _breakpoints.scss │ ├── _helpers.scss │ ├── forms │ │ ├── _form-text.scss │ │ ├── _validation.scss │ │ ├── _labels.scss │ │ ├── _floating-labels.scss │ │ ├── _form-select.scss │ │ ├── _form-range.scss │ │ ├── _input-group.scss │ │ └── _form-check.scss │ ├── _forms.scss │ ├── _grid.scss │ ├── _transitions.scss │ ├── bootstrap-utilities.scss │ ├── _root.scss │ ├── _badge.scss │ ├── bootstrap-reboot.scss │ ├── _breadcrumb.scss │ ├── _mixins.scss │ ├── bootstrap.scss │ ├── _close.scss │ ├── _images.scss │ ├── _containers.scss │ ├── _progress.scss │ ├── _toasts.scss │ ├── bootstrap-grid.scss │ ├── _alert.scss │ ├── _spinners.scss │ ├── _type.scss │ ├── utilities │ │ └── _api.scss │ ├── _pagination.scss │ ├── _offcanvas.scss │ ├── _buttons.scss │ ├── _tooltip.scss │ ├── _accordion.scss │ ├── _nav.scss │ ├── _button-group.scss │ ├── _tables.scss │ ├── _popover.scss │ ├── _list-group.scss │ └── _card.scss ├── demo │ ├── shortcodes │ │ ├── _logos.scss │ │ ├── _icon-box.scss │ │ ├── _headings.scss │ │ ├── _feature-box.scss │ │ ├── _team.scss │ │ └── _timeline.scss │ ├── _form.scss │ ├── _banner.scss │ ├── _404.scss │ ├── _footer.scss │ ├── _blog.scss │ ├── _pagetitle.scss │ ├── _utilities.scss │ ├── _extras.scss │ ├── _typography.scss │ ├── _widgets.scss │ └── _shop.scss ├── style.scss └── _mixins.scss ├── images ├── ads │ ├── 1.png │ ├── ads.png │ ├── ads1.png │ ├── ads2.png │ └── ads3.png ├── logo.png ├── service1.png ├── service2.png ├── service3.png ├── service4.png ├── posts │ └── post.png ├── subscribe.png ├── team │ ├── team1.png │ ├── team2.png │ └── team3.png ├── about │ ├── about1.png │ ├── about2.png │ ├── about3.png │ └── about4.png ├── contact │ └── map.png ├── logos │ ├── logo1.png │ ├── logo2.png │ ├── logo3.png │ └── logo4.png ├── payments │ ├── visa.png │ ├── paypal.png │ └── mastercard.png ├── shop │ ├── category.png │ ├── product1.png │ ├── product2.png │ ├── product3.png │ ├── product4.png │ └── category1.png ├── banner │ └── main-banner.png ├── icons │ ├── flags │ │ ├── french.png │ │ ├── german.png │ │ └── italian.png │ ├── left-arrow.png │ └── right-arrow.png └── SVG │ ├── Most.svg │ ├── Facebook.svg │ ├── arrov.svg │ ├── Dress3.svg │ ├── Check.svg │ ├── Dress1.svg │ ├── Star.svg │ ├── Dress4.svg │ ├── Menu.svg │ ├── Like.svg │ ├── Telegram.svg │ ├── Dress2.svg │ ├── Profile.svg │ ├── Dress5.svg │ ├── Map.svg │ ├── Instagram.svg │ ├── link.svg │ ├── Bag.svg │ ├── Time.svg │ ├── Email.svg │ ├── Arrow2.svg │ ├── Phone.svg │ ├── Garant.svg │ ├── Shop.svg │ ├── Gift2.svg │ ├── Box.svg │ ├── Arrow.svg │ ├── Delivery.svg │ ├── Gift.svg │ ├── Calendar.svg │ ├── PayPal.svg │ ├── Visa.svg │ ├── Decor Wedding 2.svg │ ├── Decor Wedding.svg │ └── MasterCard.svg ├── screenshot.webp ├── gulpfile.js ├── package.json ├── js └── main.js └── .github └── workflows └── static.yml /.gitingore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /css/bootstrap/_mixins.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](screenshot.webp) 2 | -------------------------------------------------------------------------------- /scss/bootstrap/helpers/_clearfix.scss: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | @include clearfix(); 3 | } 4 | -------------------------------------------------------------------------------- /images/ads/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/ads/1.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/logo.png -------------------------------------------------------------------------------- /screenshot.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/screenshot.webp -------------------------------------------------------------------------------- /images/ads/ads.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/ads/ads.png -------------------------------------------------------------------------------- /images/ads/ads1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/ads/ads1.png -------------------------------------------------------------------------------- /images/ads/ads2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/ads/ads2.png -------------------------------------------------------------------------------- /images/ads/ads3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/ads/ads3.png -------------------------------------------------------------------------------- /images/service1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/service1.png -------------------------------------------------------------------------------- /images/service2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/service2.png -------------------------------------------------------------------------------- /images/service3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/service3.png -------------------------------------------------------------------------------- /images/service4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/service4.png -------------------------------------------------------------------------------- /images/posts/post.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/posts/post.png -------------------------------------------------------------------------------- /images/subscribe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/subscribe.png -------------------------------------------------------------------------------- /images/team/team1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/team/team1.png -------------------------------------------------------------------------------- /images/team/team2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/team/team2.png -------------------------------------------------------------------------------- /images/team/team3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/team/team3.png -------------------------------------------------------------------------------- /images/about/about1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/about/about1.png -------------------------------------------------------------------------------- /images/about/about2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/about/about2.png -------------------------------------------------------------------------------- /images/about/about3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/about/about3.png -------------------------------------------------------------------------------- /images/about/about4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/about/about4.png -------------------------------------------------------------------------------- /images/contact/map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/contact/map.png -------------------------------------------------------------------------------- /images/logos/logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/logos/logo1.png -------------------------------------------------------------------------------- /images/logos/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/logos/logo2.png -------------------------------------------------------------------------------- /images/logos/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/logos/logo3.png -------------------------------------------------------------------------------- /images/logos/logo4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/logos/logo4.png -------------------------------------------------------------------------------- /images/payments/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/payments/visa.png -------------------------------------------------------------------------------- /images/shop/category.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/shop/category.png -------------------------------------------------------------------------------- /images/shop/product1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/shop/product1.png -------------------------------------------------------------------------------- /images/shop/product2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/shop/product2.png -------------------------------------------------------------------------------- /images/shop/product3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/shop/product3.png -------------------------------------------------------------------------------- /images/shop/product4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/shop/product4.png -------------------------------------------------------------------------------- /images/payments/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/payments/paypal.png -------------------------------------------------------------------------------- /images/shop/category1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/shop/category1.png -------------------------------------------------------------------------------- /images/banner/main-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/banner/main-banner.png -------------------------------------------------------------------------------- /images/icons/flags/french.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/icons/flags/french.png -------------------------------------------------------------------------------- /images/icons/flags/german.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/icons/flags/german.png -------------------------------------------------------------------------------- /images/icons/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/icons/left-arrow.png -------------------------------------------------------------------------------- /images/icons/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/icons/right-arrow.png -------------------------------------------------------------------------------- /css/font/GreatVibes-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/css/font/GreatVibes-Regular.ttf -------------------------------------------------------------------------------- /images/icons/flags/italian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/icons/flags/italian.png -------------------------------------------------------------------------------- /images/payments/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piaocreative/html-demo50/HEAD/images/payments/mastercard.png -------------------------------------------------------------------------------- /scss/bootstrap/helpers/_text-truncation.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Text truncation 3 | // 4 | 5 | .text-truncate { 6 | @include text-truncate(); 7 | } 8 | -------------------------------------------------------------------------------- /scss/bootstrap/helpers/_visually-hidden.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Visually hidden 3 | // 4 | 5 | .visually-hidden, 6 | .visually-hidden-focusable:not(:focus):not(:focus-within) { 7 | @include visually-hidden(); 8 | } 9 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start clearfix 2 | @mixin clearfix() { 3 | &::after { 4 | display: block; 5 | clear: both; 6 | content: ""; 7 | } 8 | } 9 | // scss-docs-end clearfix 10 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_lists.scss: -------------------------------------------------------------------------------- 1 | // Lists 2 | 3 | // Unstyled keeps list items block level, just removes default browser padding and list-style 4 | @mixin list-unstyled { 5 | padding-left: 0; 6 | list-style: none; 7 | } 8 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_color-scheme.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start mixin-color-scheme 2 | @mixin color-scheme($name) { 3 | @media (prefers-color-scheme: #{$name}) { 4 | @content; 5 | } 6 | } 7 | // scss-docs-end mixin-color-scheme 8 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_text-truncate.scss: -------------------------------------------------------------------------------- 1 | // Text truncate 2 | // Requires inline-block or block for proper styling 3 | 4 | @mixin text-truncate() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /images/SVG/Most.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | @mixin resizable($direction) { 4 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 5 | resize: $direction; // Options: horizontal, vertical, both 6 | } 7 | -------------------------------------------------------------------------------- /scss/bootstrap/_helpers.scss: -------------------------------------------------------------------------------- 1 | @import "helpers/clearfix"; 2 | @import "helpers/colored-links"; 3 | @import "helpers/ratio"; 4 | @import "helpers/position"; 5 | @import "helpers/visually-hidden"; 6 | @import "helpers/stretched-link"; 7 | @import "helpers/text-truncation"; 8 | -------------------------------------------------------------------------------- /scss/bootstrap/forms/_form-text.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Form text 3 | // 4 | 5 | .form-text { 6 | margin-top: $form-text-margin-top; 7 | @include font-size($form-text-font-size); 8 | font-style: $form-text-font-style; 9 | font-weight: $form-text-font-weight; 10 | color: $form-text-color; 11 | } 12 | -------------------------------------------------------------------------------- /scss/bootstrap/_forms.scss: -------------------------------------------------------------------------------- 1 | @import "forms/labels"; 2 | @import "forms/form-text"; 3 | @import "forms/form-control"; 4 | @import "forms/form-select"; 5 | @import "forms/form-check"; 6 | @import "forms/form-range"; 7 | @import "forms/floating-labels"; 8 | @import "forms/input-group"; 9 | @import "forms/validation"; 10 | -------------------------------------------------------------------------------- /images/SVG/Facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/bootstrap/helpers/_stretched-link.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Stretched link 3 | // 4 | 5 | .stretched-link { 6 | &::#{$stretched-link-pseudo-element} { 7 | position: absolute; 8 | top: 0; 9 | right: 0; 10 | bottom: 0; 11 | left: 0; 12 | z-index: $stretched-link-z-index; 13 | content: ""; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_container.scss: -------------------------------------------------------------------------------- 1 | // Container mixins 2 | 3 | @mixin make-container($gutter: $container-padding-x) { 4 | width: 100%; 5 | padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter}); 6 | padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter}); 7 | margin-right: auto; 8 | margin-left: auto; 9 | } 10 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start alert-variant-mixin 2 | @mixin alert-variant($background, $border, $color) { 3 | color: $color; 4 | @include gradient-bg($background); 5 | border-color: $border; 6 | 7 | .alert-link { 8 | color: shade-color($color, 20%); 9 | } 10 | } 11 | // scss-docs-end alert-variant-mixin 12 | -------------------------------------------------------------------------------- /images/SVG/arrov.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/SVG/Dress3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/SVG/Check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/SVG/Dress1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/SVG/Star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/bootstrap/_grid.scss: -------------------------------------------------------------------------------- 1 | // Row 2 | // 3 | // Rows contain your columns. 4 | 5 | @if $enable-grid-classes { 6 | .row { 7 | @include make-row(); 8 | 9 | > * { 10 | @include make-col-ready(); 11 | } 12 | } 13 | } 14 | 15 | 16 | // Columns 17 | // 18 | // Common styles for small and large grid columns 19 | 20 | @if $enable-grid-classes { 21 | @include make-grid-columns(); 22 | } 23 | -------------------------------------------------------------------------------- /scss/bootstrap/helpers/_colored-links.scss: -------------------------------------------------------------------------------- 1 | @each $color, $value in $theme-colors { 2 | .link-#{$color} { 3 | color: $value; 4 | 5 | @if $link-shade-percentage != 0 { 6 | &:hover, 7 | &:focus { 8 | color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); 9 | } 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /scss/bootstrap/_transitions.scss: -------------------------------------------------------------------------------- 1 | .fade { 2 | @include transition($transition-fade); 3 | 4 | &:not(.show) { 5 | opacity: 0; 6 | } 7 | } 8 | 9 | // scss-docs-start collapse-classes 10 | .collapse { 11 | &:not(.show) { 12 | display: none; 13 | } 14 | } 15 | 16 | .collapsing { 17 | height: 0; 18 | overflow: hidden; 19 | @include transition($transition-collapse); 20 | } 21 | // scss-docs-end collapse-classes 22 | -------------------------------------------------------------------------------- /images/SVG/Dress4.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/demo/shortcodes/_logos.scss: -------------------------------------------------------------------------------- 1 | .logos { 2 | display: flex; 3 | justify-content: space-between; 4 | 5 | .logo-item { 6 | max-width: 17.625rem; 7 | height: 8.25rem; 8 | width: 100%; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | border: 1px solid #ebebeb; 13 | border-radius: 1rem; 14 | margin: auto; 15 | 16 | img { 17 | width: auto; 18 | height: auto; 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /images/SVG/Menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/SVG/Like.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/SVG/Telegram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_image.scss: -------------------------------------------------------------------------------- 1 | // Image Mixins 2 | // - Responsive image 3 | // - Retina image 4 | 5 | 6 | // Responsive image 7 | // 8 | // Keep images from scaling beyond the width of their parents. 9 | 10 | @mixin img-fluid { 11 | // Part 1: Set a maximum relative to the parent 12 | max-width: 100%; 13 | // Part 2: Override the height to auto, otherwise images will be stretched 14 | // when setting a width and height attribute on the img element. 15 | height: auto; 16 | } 17 | -------------------------------------------------------------------------------- /images/SVG/Dress2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/SVG/Profile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/bootstrap/bootstrap-utilities.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Utilities v5.0.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2021 The Bootstrap Authors 4 | * Copyright 2011-2021 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */ 7 | 8 | // Configuration 9 | @import "functions"; 10 | @import "variables"; 11 | @import "mixins"; 12 | @import "utilities"; 13 | 14 | // Helpers 15 | @import "helpers"; 16 | 17 | // Utilities 18 | @import "utilities/api"; 19 | -------------------------------------------------------------------------------- /images/SVG/Dress5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | @mixin box-shadow($shadow...) { 2 | @if $enable-shadows { 3 | $result: (); 4 | 5 | @each $value in $shadow { 6 | @if $value != null { 7 | $result: append($result, $value, "comma"); 8 | } 9 | @if $value == none and length($shadow) > 1 { 10 | @warn "The keyword 'none' must be used as a single argument."; 11 | } 12 | } 13 | 14 | @if (length($result) > 0) { 15 | box-shadow: $result; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /images/SVG/Map.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/bootstrap/forms/_validation.scss: -------------------------------------------------------------------------------- 1 | // Form validation 2 | // 3 | // Provide feedback to users when form field values are valid or invalid. Works 4 | // primarily for client-side validation via scoped `:invalid` and `:valid` 5 | // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for 6 | // server-side validation. 7 | 8 | // scss-docs-start form-validation-states-loop 9 | @each $state, $data in $form-validation-states { 10 | @include form-validation-state($state, $data...); 11 | } 12 | // scss-docs-end form-validation-states-loop 13 | -------------------------------------------------------------------------------- /scss/bootstrap/helpers/_ratio.scss: -------------------------------------------------------------------------------- 1 | // Credit: Nicolas Gallagher and SUIT CSS. 2 | 3 | .ratio { 4 | position: relative; 5 | width: 100%; 6 | 7 | &::before { 8 | display: block; 9 | padding-top: var(--#{$variable-prefix}aspect-ratio); 10 | content: ""; 11 | } 12 | 13 | > * { 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | width: 100%; 18 | height: 100%; 19 | } 20 | } 21 | 22 | @each $key, $ratio in $aspect-ratios { 23 | .ratio-#{$key} { 24 | --#{$variable-prefix}aspect-ratio: #{$ratio}; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /images/SVG/Instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/SVG/link.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/SVG/Bag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/SVG/Time.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_reset-text.scss: -------------------------------------------------------------------------------- 1 | @mixin reset-text { 2 | font-family: $font-family-base; 3 | // We deliberately do NOT reset font-size or overflow-wrap / word-wrap. 4 | font-style: normal; 5 | font-weight: $font-weight-normal; 6 | line-height: $line-height-base; 7 | text-align: left; // Fallback for where `start` is not supported 8 | text-align: start; 9 | text-decoration: none; 10 | text-shadow: none; 11 | text-transform: none; 12 | letter-spacing: normal; 13 | word-break: normal; 14 | word-spacing: normal; 15 | white-space: normal; 16 | line-break: auto; 17 | } 18 | -------------------------------------------------------------------------------- /images/SVG/Email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/SVG/Arrow2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | // List Groups 2 | 3 | // scss-docs-start list-group-mixin 4 | @mixin list-group-item-variant($state, $background, $color) { 5 | .list-group-item-#{$state} { 6 | color: $color; 7 | background-color: $background; 8 | 9 | &.list-group-item-action { 10 | &:hover, 11 | &:focus { 12 | color: $color; 13 | background-color: shade-color($background, 10%); 14 | } 15 | 16 | &.active { 17 | color: $white; 18 | background-color: $color; 19 | border-color: $color; 20 | } 21 | } 22 | } 23 | } 24 | // scss-docs-end list-group-mixin 25 | -------------------------------------------------------------------------------- /scss/bootstrap/helpers/_position.scss: -------------------------------------------------------------------------------- 1 | // Shorthand 2 | 3 | .fixed-top { 4 | position: fixed; 5 | top: 0; 6 | right: 0; 7 | left: 0; 8 | z-index: $zindex-fixed; 9 | } 10 | 11 | .fixed-bottom { 12 | position: fixed; 13 | right: 0; 14 | bottom: 0; 15 | left: 0; 16 | z-index: $zindex-fixed; 17 | } 18 | 19 | // Responsive sticky top 20 | @each $breakpoint in map-keys($grid-breakpoints) { 21 | @include media-breakpoint-up($breakpoint) { 22 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 23 | 24 | .sticky#{$infix}-top { 25 | position: sticky; 26 | top: 0; 27 | z-index: $zindex-sticky; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /images/SVG/Phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/bootstrap/_root.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | // Custom variable values only support SassScript inside `#{}`. 3 | @each $color, $value in $colors { 4 | --#{$variable-prefix}#{$color}: #{$value}; 5 | } 6 | 7 | @each $color, $value in $theme-colors { 8 | --#{$variable-prefix}#{$color}: #{$value}; 9 | } 10 | 11 | // Use `inspect` for lists so that quoted items keep the quotes. 12 | // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 13 | --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; 14 | --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)}; 15 | --#{$variable-prefix}gradient: #{$gradient}; 16 | } 17 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_deprecate.scss: -------------------------------------------------------------------------------- 1 | // Deprecate mixin 2 | // 3 | // This mixin can be used to deprecate mixins or functions. 4 | // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to 5 | // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap) 6 | @mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) { 7 | @if ($enable-deprecation-messages != false and $ignore-warning != true) { 8 | @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}."; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /images/SVG/Garant.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/SVG/Shop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/demo/shortcodes/_icon-box.scss: -------------------------------------------------------------------------------- 1 | 2 | /*----------------------------------------------------------------------------------- 3 | 4 | Shortcodes: icon-box.scss 5 | 6 | -----------------------------------------------------------------------------------*/ 7 | 8 | /* ---------------------------------------------------------------- 9 | Icon Box Styles 10 | -----------------------------------------------------------------*/ 11 | 12 | 13 | .icon-box { 14 | display: block; 15 | margin-bottom: 1.5rem; 16 | 17 | .icon-wrapper { 18 | i { 19 | color: $white; 20 | font-size: 0.875rem; 21 | } 22 | } 23 | 24 | .icon-header { 25 | font-size: 0.875rem; 26 | font-weight: 300; 27 | line-height: 1.5; 28 | } 29 | } -------------------------------------------------------------------------------- /images/SVG/Gift2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/SVG/Box.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/SVG/Arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // Include gulp 2 | var gulp = require( 'gulp' ); 3 | 4 | // Include Our Plugins 5 | var sass = require( 'gulp-sass' ); 6 | var pref = require( 'gulp-autoprefixer' ) 7 | // var uglify = require( 'gulp-uglify' ); 8 | // var rename = require( 'gulp-rename' ); 9 | var cleanCSS = require( 'gulp-clean-css' ); 10 | 11 | 12 | 13 | // Compile Our Sass 14 | gulp.task( 'sass', function() { 15 | return gulp.src( './scss/*.scss' ) 16 | .pipe( sass( { errLogToConsole: true } ) ) 17 | .pipe( pref( 'last 4 versions' ) ) 18 | .pipe( cleanCSS() ) 19 | .pipe( gulp.dest( 'css' ) ); 20 | }); 21 | 22 | // Watch Files For Changes 23 | gulp.task( 'watch', function() { 24 | gulp.watch( './scss/**/*.scss', gulp.series( 'sass' ) ); 25 | }); 26 | -------------------------------------------------------------------------------- /scss/bootstrap/_badge.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Requires one of the contextual, color modifier classes for `color` and 4 | // `background-color`. 5 | 6 | .badge { 7 | display: inline-block; 8 | padding: $badge-padding-y $badge-padding-x; 9 | @include font-size($badge-font-size); 10 | font-weight: $badge-font-weight; 11 | line-height: 1; 12 | color: $badge-color; 13 | text-align: center; 14 | white-space: nowrap; 15 | vertical-align: baseline; 16 | @include border-radius($badge-border-radius); 17 | @include gradient-bg(); 18 | 19 | // Empty badges collapse automatically 20 | &:empty { 21 | display: none; 22 | } 23 | } 24 | 25 | // Quick fix for badges in buttons 26 | .btn .badge { 27 | position: relative; 28 | top: -1px; 29 | } 30 | -------------------------------------------------------------------------------- /scss/bootstrap/bootstrap-reboot.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v5.0.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2021 The Bootstrap Authors 4 | * Copyright 2011-2021 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) 7 | */ 8 | 9 | @import "functions"; 10 | @import "variables"; 11 | // Prevent the usage of custom properties since we don't add them to `:root` in reboot 12 | $font-family-base: $font-family-sans-serif; // stylelint-disable-line scss/dollar-variable-default 13 | $font-family-code: $font-family-monospace; // stylelint-disable-line scss/dollar-variable-default 14 | @import "mixins"; 15 | @import "reboot"; 16 | -------------------------------------------------------------------------------- /images/SVG/Delivery.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_transition.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-disallowed-list 2 | @mixin transition($transition...) { 3 | @if length($transition) == 0 { 4 | $transition: $transition-base; 5 | } 6 | 7 | @if length($transition) > 1 { 8 | @each $value in $transition { 9 | @if $value == null or $value == none { 10 | @warn "The keyword 'none' or 'null' must be used as a single argument."; 11 | } 12 | } 13 | } 14 | 15 | @if $enable-transitions { 16 | @if nth($transition, 1) != null { 17 | transition: $transition; 18 | } 19 | 20 | @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none { 21 | @media (prefers-reduced-motion: reduce) { 22 | transition: none; 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /scss/demo/_form.scss: -------------------------------------------------------------------------------- 1 | 2 | /*----------------------------------------------------------------------------------- 3 | 4 | Form: form.scss 5 | 6 | -----------------------------------------------------------------------------------*/ 7 | 8 | /* ---------------------------------------------------------------- 9 | Form Styles 10 | -----------------------------------------------------------------*/ 11 | #contact { 12 | padding-top: 2rem; 13 | padding-bottom: 2rem; 14 | margin-top: 2.875rem; 15 | border-top: 1px solid #ebebeb; 16 | border-bottom: 1px solid #ebebeb; 17 | } 18 | 19 | #contact-info { 20 | padding: 3rem; 21 | border-radius: 0.5rem; 22 | 23 | h5 { 24 | font-size: 1.25rem; 25 | } 26 | 27 | @include media-breakpoint-up(lg) { 28 | position: absolute; 29 | top: 2rem; 30 | left: 2rem; 31 | } 32 | } -------------------------------------------------------------------------------- /scss/demo/_banner.scss: -------------------------------------------------------------------------------- 1 | 2 | /* ---------------------------------------------------------------- 3 | 4 | banner.scss 5 | 6 | -----------------------------------------------------------------*/ 7 | 8 | 9 | /* ---------------------------------------------------------------- 10 | Banner 11 | -----------------------------------------------------------------*/ 12 | 13 | 14 | /* ---------------------------------------------------------------- 15 | Add here styles for banner. Thanks! 16 | -----------------------------------------------------------------*/ 17 | 18 | 19 | .banner { 20 | position: relative; 21 | padding: 3.75rem 0; 22 | margin-bottom: 0.875rem; 23 | border-radius: 0.5rem; 24 | 25 | .banner-wrap { 26 | padding-left: 4.375rem; 27 | padding-right: 4.375rem; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fit-survey-plugin", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "directories": { 7 | "lib": "lib" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+ssh://git@bitbucket.org/hdcrepos/fit-survey-plugin.git" 15 | }, 16 | "author": "FitSmallBusiness", 17 | "license": "ISC", 18 | "homepage": "https://bitbucket.org/hdcrepos/fit-survey-plugin#readme", 19 | "dependencies": {}, 20 | "devDependencies": { 21 | "gulp": "^4.0.0", 22 | "gulp-autoprefixer": "^6.0.0", 23 | "gulp-clean-css": "^4.0.0", 24 | "gulp-concat": "^2.6.1", 25 | "gulp-rename": "^1.4.0", 26 | "gulp-sass": "^4.0.2", 27 | "gulp-uglify": "^3.0.1" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | // scss-docs-start pagination-mixin 4 | @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) { 5 | .page-link { 6 | padding: $padding-y $padding-x; 7 | @include font-size($font-size); 8 | } 9 | 10 | .page-item { 11 | @if $pagination-margin-start == (-$pagination-border-width) { 12 | &:first-child { 13 | .page-link { 14 | @include border-start-radius($border-radius); 15 | } 16 | } 17 | 18 | &:last-child { 19 | .page-link { 20 | @include border-end-radius($border-radius); 21 | } 22 | } 23 | } @else { 24 | //Add border-radius to all pageLinks in case they have left margin 25 | .page-link { 26 | @include border-radius($border-radius); 27 | } 28 | } 29 | } 30 | } 31 | // scss-docs-end pagination-mixin 32 | -------------------------------------------------------------------------------- /images/SVG/Gift.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/demo/shortcodes/_headings.scss: -------------------------------------------------------------------------------- 1 | 2 | /*----------------------------------------------------------------------------------- 3 | 4 | Shortcodes: headings.scss 5 | 6 | -----------------------------------------------------------------------------------*/ 7 | 8 | /* ---------------------------------------------------------------- 9 | Heading Styles 10 | -----------------------------------------------------------------*/ 11 | 12 | 13 | /* Heading Block - with Subtitle 14 | -----------------------------------------------------------------*/ 15 | 16 | .heading-block { 17 | margin-bottom: 1.875rem; 18 | position: relative; 19 | 20 | .title { 21 | color: $dark; 22 | font-weight: 400; 23 | } 24 | 25 | .attach-link { 26 | color:$theme-color; 27 | font-family: $heading-font; 28 | 29 | &:hover { 30 | color: $theme-color; 31 | } 32 | 33 | i { 34 | font-size: 0.9rem; 35 | margin-left: 0.5rem; 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /scss/demo/_404.scss: -------------------------------------------------------------------------------- 1 | /* ---------------------------------------------------------------- 2 | 3 | 404.scss 4 | 5 | -----------------------------------------------------------------*/ 6 | .error-404 { 7 | position: relative; 8 | 9 | .error-logo { 10 | padding: 4rem 3rem; 11 | background-color: $theme-color; 12 | font-family: $heading-font; 13 | font-size: 4.325rem; 14 | font-weight: 500; 15 | color: $white; 16 | border-radius: 0.5rem; 17 | 18 | @include media-breakpoint-down(sm) { 19 | font-size: 11.325rem; 20 | padding: 6rem 3rem; 21 | margin-bottom: 1.875rem; 22 | } 23 | } 24 | 25 | .error-content { 26 | h5 { 27 | font-size: 1.875rem; 28 | font-weight: 400; 29 | line-height: 1.2; 30 | } 31 | 32 | p { 33 | color: #7c7c7c; 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /scss/demo/shortcodes/_feature-box.scss: -------------------------------------------------------------------------------- 1 | 2 | /*----------------------------------------------------------------------------------- 3 | 4 | Shortcodes: feature-box.scss 5 | 6 | -----------------------------------------------------------------------------------*/ 7 | 8 | /* ---------------------------------------------------------------- 9 | Featured Boxes 10 | -----------------------------------------------------------------*/ 11 | .fbox { 12 | padding: 1.5rem 2rem; 13 | border: 1px solid #ebebeb; 14 | 15 | .fbox-icon { 16 | img { 17 | max-width: 5rem; 18 | height: 3rem; 19 | display: flex; 20 | justify-content: center; 21 | } 22 | } 23 | 24 | p { 25 | &:nth-child(1) { 26 | font-family: $heading-font; 27 | font-size: 1rem; 28 | color: $theme-color; 29 | line-height: 1; 30 | } 31 | 32 | &:nth-child(2) { 33 | font-family: $body-font; 34 | font-size: 0.8rem; 35 | color: #bfbfbf; 36 | line-height: 1.5; 37 | font-weight: 400; 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /scss/demo/_footer.scss: -------------------------------------------------------------------------------- 1 | 2 | /* ---------------------------------------------------------------- 3 | 4 | footer.scss 5 | 6 | -----------------------------------------------------------------*/ 7 | 8 | /* ---------------------------------------------------------------- 9 | Footer 10 | -----------------------------------------------------------------*/ 11 | 12 | 13 | /* ---------------------------------------------------------------- 14 | Add here styles for footer. Thanks! 15 | -----------------------------------------------------------------*/ 16 | 17 | #footer { 18 | background-color: black; 19 | } 20 | 21 | #footer-main { 22 | padding-top: 4rem; 23 | padding-bottom: 2rem; 24 | border-bottom: 1px solid #333333; 25 | 26 | .navbar-brand { 27 | img { 28 | width: 5rem; 29 | } 30 | } 31 | } 32 | 33 | #footer-bottom { 34 | padding-top: 3rem; 35 | padding-bottom: 3.375rem; 36 | 37 | p { 38 | font-size: 0.875rem; 39 | font-weight: 400; 40 | color: #808080; 41 | line-height: 2; 42 | z-index: 1; 43 | } 44 | } -------------------------------------------------------------------------------- /scss/bootstrap/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | display: flex; 3 | flex-wrap: wrap; 4 | padding: $breadcrumb-padding-y $breadcrumb-padding-x; 5 | margin-bottom: $breadcrumb-margin-bottom; 6 | @include font-size($breadcrumb-font-size); 7 | list-style: none; 8 | background-color: $breadcrumb-bg; 9 | @include border-radius($breadcrumb-border-radius); 10 | } 11 | 12 | .breadcrumb-item { 13 | // The separator between breadcrumbs (by default, a forward-slash: "/") 14 | + .breadcrumb-item { 15 | padding-left: $breadcrumb-item-padding-x; 16 | 17 | &::before { 18 | float: left; // Suppress inline spacings and underlining of the separator 19 | padding-right: $breadcrumb-item-padding-x; 20 | color: $breadcrumb-divider-color; 21 | content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; 22 | } 23 | } 24 | 25 | &.active { 26 | color: $breadcrumb-active-color; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /scss/bootstrap/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Toggles 2 | // 3 | // Used in conjunction with global variables to enable certain theme features. 4 | 5 | // Vendor 6 | @import "vendor/rfs"; 7 | 8 | // Deprecate 9 | @import "mixins/deprecate"; 10 | 11 | // Helpers 12 | @import "mixins/breakpoints"; 13 | @import "mixins/color-scheme"; 14 | @import "mixins/image"; 15 | @import "mixins/resize"; 16 | @import "mixins/visually-hidden"; 17 | @import "mixins/reset-text"; 18 | @import "mixins/text-truncate"; 19 | 20 | // Utilities 21 | @import "mixins/utilities"; 22 | 23 | // Components 24 | @import "mixins/alert"; 25 | @import "mixins/buttons"; 26 | @import "mixins/caret"; 27 | @import "mixins/pagination"; 28 | @import "mixins/lists"; 29 | @import "mixins/list-group"; 30 | @import "mixins/forms"; 31 | @import "mixins/table-variants"; 32 | 33 | // Skins 34 | @import "mixins/border-radius"; 35 | @import "mixins/box-shadow"; 36 | @import "mixins/gradients"; 37 | @import "mixins/transition"; 38 | 39 | // Layout 40 | @import "mixins/clearfix"; 41 | @import "mixins/container"; 42 | @import "mixins/grid"; 43 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_table-variants.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start table-variant 2 | @mixin table-variant($state, $background) { 3 | .table-#{$state} { 4 | $color: color-contrast(opaque($body-bg, $background)); 5 | $hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); 6 | $striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); 7 | $active-bg: mix($color, $background, percentage($table-active-bg-factor)); 8 | 9 | --#{$variable-prefix}table-bg: #{$background}; 10 | --#{$variable-prefix}table-striped-bg: #{$striped-bg}; 11 | --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)}; 12 | --#{$variable-prefix}table-active-bg: #{$active-bg}; 13 | --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)}; 14 | --#{$variable-prefix}table-hover-bg: #{$hover-bg}; 15 | --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)}; 16 | 17 | color: $color; 18 | border-color: mix($color, $background, percentage($table-border-factor)); 19 | } 20 | } 21 | // scss-docs-end table-variant 22 | -------------------------------------------------------------------------------- /scss/demo/_blog.scss: -------------------------------------------------------------------------------- 1 | 2 | /* ---------------------------------------------------------------- 3 | 4 | blog.scss 5 | 6 | -----------------------------------------------------------------*/ 7 | 8 | /* ---------------------------------------------------------------- 9 | Blog 10 | -----------------------------------------------------------------*/ 11 | 12 | .post { 13 | position: relative; 14 | margin-bottom: 1.875rem; 15 | 16 | &:hover { 17 | .entry-title { 18 | color: $theme-color; 19 | } 20 | } 21 | } 22 | 23 | .post-thumbnail { 24 | img { 25 | width: 100%; 26 | border-radius: 0.5rem; 27 | } 28 | } 29 | 30 | .post-content { 31 | .entry-title { 32 | font-size: 1rem; 33 | font-family: $heading-font; 34 | font-weight: 600; 35 | line-height: 1.6; 36 | } 37 | 38 | .entry-categories { 39 | a { 40 | font-family: $heading-font; 41 | font-size: 0.75rem; 42 | text-decoration:none; 43 | color: #979797; 44 | font-weight: 500; 45 | } 46 | } 47 | 48 | .entry-content { 49 | font-size: 0.875rem; 50 | color: #979797; 51 | line-height: 1.4rem; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /images/SVG/Calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_visually-hidden.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Hide content visually while keeping it accessible to assistive technologies 4 | // 5 | // See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ 6 | // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ 7 | 8 | @mixin visually-hidden() { 9 | position: absolute !important; 10 | width: 1px !important; 11 | height: 1px !important; 12 | padding: 0 !important; 13 | margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686 14 | overflow: hidden !important; 15 | clip: rect(0, 0, 0, 0) !important; 16 | white-space: nowrap !important; 17 | border: 0 !important; 18 | } 19 | 20 | // Use to only display content when it's focused, or one of its child elements is focused 21 | // (i.e. when focus is within the element/container that the class was applied to) 22 | // 23 | // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 24 | 25 | @mixin visually-hidden-focusable() { 26 | &:not(:focus):not(:focus-within) { 27 | @include visually-hidden(); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /scss/demo/_pagetitle.scss: -------------------------------------------------------------------------------- 1 | 2 | /* ---------------------------------------------------------------- 3 | 4 | pagetitle.scss 5 | 6 | -----------------------------------------------------------------*/ 7 | 8 | 9 | /* ---------------------------------------------------------------- 10 | Page Title 11 | -----------------------------------------------------------------*/ 12 | 13 | 14 | /* ---------------------------------------------------------------- 15 | Add here styles for page title. Thanks! 16 | -----------------------------------------------------------------*/ 17 | 18 | #page-title { 19 | .title { 20 | color: #02b806; 21 | line-height: 5.5rem; 22 | font-weight: 300; 23 | line-height: 1; 24 | font-size: 2.5rem; 25 | } 26 | 27 | .sub-title { 28 | line-height: 1.5; 29 | color: #8a8a8a; 30 | } 31 | } 32 | 33 | .breadcrumb { 34 | ul { 35 | li { 36 | a { 37 | font-weight: 500; 38 | font-size: 0.75rem; 39 | color: #848484; 40 | font-family: $heading-font; 41 | text-decoration: none; 42 | text-transform: uppercase; 43 | 44 | &.active { 45 | color: $theme-color; 46 | } 47 | } 48 | 49 | i { 50 | color: #848484; 51 | } 52 | } 53 | } 54 | } -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | $( document ).ready( function() { 2 | 3 | if ( $( '.logos' ).length ) { 4 | $( '.logos' ).slick({ 5 | infinite: true, 6 | slidesToShow: 4, 7 | slidesToScroll: 1, 8 | dots: false, 9 | arrows: false, 10 | responsive: [ 11 | { 12 | breakpoint: 1200, 13 | settings: { 14 | infinite: true, 15 | slidesToShow: 3, 16 | slidesToScroll: 1, 17 | } 18 | }, 19 | { 20 | breakpoint: 991, 21 | settings: { 22 | infinite: true, 23 | slidesToShow: 2, 24 | slidesToScroll: 1, 25 | } 26 | }, 27 | { 28 | breakpoint: 576, 29 | settings: { 30 | infinite: true, 31 | slidesToShow: 1, 32 | slidesToScroll: 1, 33 | } 34 | } 35 | ] 36 | }); 37 | } 38 | 39 | } ); -------------------------------------------------------------------------------- /scss/bootstrap/bootstrap.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v5.0.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2021 The Bootstrap Authors 4 | * Copyright 2011-2021 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */ 7 | 8 | // scss-docs-start import-stack 9 | // Configuration 10 | @import "functions"; 11 | @import "variables"; 12 | @import "mixins"; 13 | @import "utilities"; 14 | 15 | // Layout & components 16 | @import "root"; 17 | @import "reboot"; 18 | @import "type"; 19 | @import "images"; 20 | @import "containers"; 21 | @import "grid"; 22 | @import "tables"; 23 | @import "forms"; 24 | @import "buttons"; 25 | @import "transitions"; 26 | @import "dropdown"; 27 | @import "button-group"; 28 | @import "nav"; 29 | @import "navbar"; 30 | @import "card"; 31 | @import "accordion"; 32 | @import "breadcrumb"; 33 | @import "pagination"; 34 | @import "badge"; 35 | @import "alert"; 36 | @import "progress"; 37 | @import "list-group"; 38 | @import "close"; 39 | @import "toasts"; 40 | @import "modal"; 41 | @import "tooltip"; 42 | @import "popover"; 43 | @import "carousel"; 44 | @import "spinners"; 45 | @import "offcanvas"; 46 | 47 | // Helpers 48 | @import "helpers"; 49 | 50 | // Utilities 51 | @import "utilities/api"; 52 | // scss-docs-end import-stack 53 | -------------------------------------------------------------------------------- /scss/bootstrap/_close.scss: -------------------------------------------------------------------------------- 1 | // transparent background and border properties included for button version. 2 | // iOS requires the button element instead of an anchor tag. 3 | // If you want the anchor version, it requires `href="#"`. 4 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile 5 | 6 | .btn-close { 7 | box-sizing: content-box; 8 | width: $btn-close-width; 9 | height: $btn-close-height; 10 | padding: $btn-close-padding-y $btn-close-padding-x; 11 | color: $btn-close-color; 12 | background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements 13 | border: 0; // for button elements 14 | @include border-radius(); 15 | opacity: $btn-close-opacity; 16 | 17 | // Override 's hover style 18 | &:hover { 19 | color: $btn-close-color; 20 | text-decoration: none; 21 | opacity: $btn-close-hover-opacity; 22 | } 23 | 24 | &:focus { 25 | outline: 0; 26 | box-shadow: $btn-close-focus-shadow; 27 | opacity: $btn-close-focus-opacity; 28 | } 29 | 30 | &:disabled, 31 | &.disabled { 32 | pointer-events: none; 33 | user-select: none; 34 | opacity: $btn-close-disabled-opacity; 35 | } 36 | } 37 | 38 | .btn-close-white { 39 | filter: $btn-close-white-filter; 40 | } 41 | -------------------------------------------------------------------------------- /scss/bootstrap/forms/_labels.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // 4 | 5 | .form-label { 6 | margin-bottom: $form-label-margin-bottom; 7 | @include font-size($form-label-font-size); 8 | font-style: $form-label-font-style; 9 | font-weight: $form-label-font-weight; 10 | color: $form-label-color; 11 | } 12 | 13 | // For use with horizontal and inline forms, when you need the label (or legend) 14 | // text to align with the form controls. 15 | .col-form-label { 16 | padding-top: add($input-padding-y, $input-border-width); 17 | padding-bottom: add($input-padding-y, $input-border-width); 18 | margin-bottom: 0; // Override the `` default 19 | @include font-size(inherit); // Override the `` default 20 | font-style: $form-label-font-style; 21 | font-weight: $form-label-font-weight; 22 | line-height: $input-line-height; 23 | color: $form-label-color; 24 | } 25 | 26 | .col-form-label-lg { 27 | padding-top: add($input-padding-y-lg, $input-border-width); 28 | padding-bottom: add($input-padding-y-lg, $input-border-width); 29 | @include font-size($input-font-size-lg); 30 | } 31 | 32 | .col-form-label-sm { 33 | padding-top: add($input-padding-y-sm, $input-border-width); 34 | padding-bottom: add($input-padding-y-sm, $input-border-width); 35 | @include font-size($input-font-size-sm); 36 | } 37 | -------------------------------------------------------------------------------- /scss/bootstrap/_images.scss: -------------------------------------------------------------------------------- 1 | // Responsive images (ensure images don't scale beyond their parents) 2 | // 3 | // This is purposefully opt-in via an explicit class rather than being the default for all ``s. 4 | // We previously tried the "images are responsive by default" approach in Bootstrap v2, 5 | // and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps) 6 | // which weren't expecting the images within themselves to be involuntarily resized. 7 | // See also https://github.com/twbs/bootstrap/issues/18178 8 | .img-fluid { 9 | @include img-fluid(); 10 | } 11 | 12 | 13 | // Image thumbnails 14 | .img-thumbnail { 15 | padding: $thumbnail-padding; 16 | background-color: $thumbnail-bg; 17 | border: $thumbnail-border-width solid $thumbnail-border-color; 18 | @include border-radius($thumbnail-border-radius); 19 | @include box-shadow($thumbnail-box-shadow); 20 | 21 | // Keep them at most 100% wide 22 | @include img-fluid(); 23 | } 24 | 25 | // 26 | // Figures 27 | // 28 | 29 | .figure { 30 | // Ensures the caption's text aligns with the image. 31 | display: inline-block; 32 | } 33 | 34 | .figure-img { 35 | margin-bottom: $spacer / 2; 36 | line-height: 1; 37 | } 38 | 39 | .figure-caption { 40 | @include font-size($figure-caption-font-size); 41 | color: $figure-caption-color; 42 | } 43 | -------------------------------------------------------------------------------- /scss/bootstrap/_containers.scss: -------------------------------------------------------------------------------- 1 | // Container widths 2 | // 3 | // Set the container width, and override it for fixed navbars in media queries. 4 | 5 | @if $enable-grid-classes { 6 | // Single container class with breakpoint max-widths 7 | .container, 8 | // 100% wide container at all breakpoints 9 | .container-fluid { 10 | @include make-container(); 11 | } 12 | 13 | // Responsive containers that are 100% wide until a breakpoint 14 | @each $breakpoint, $container-max-width in $container-max-widths { 15 | .container-#{$breakpoint} { 16 | @extend .container-fluid; 17 | } 18 | 19 | @include media-breakpoint-up($breakpoint, $grid-breakpoints) { 20 | %responsive-container-#{$breakpoint} { 21 | max-width: $container-max-width; 22 | } 23 | 24 | // Extend each breakpoint which is smaller or equal to the current breakpoint 25 | $extend-breakpoint: true; 26 | 27 | @each $name, $width in $grid-breakpoints { 28 | @if ($extend-breakpoint) { 29 | .container#{breakpoint-infix($name, $grid-breakpoints)} { 30 | @extend %responsive-container-#{$breakpoint}; 31 | } 32 | 33 | // Once the current breakpoint is reached, stop extending 34 | @if ($breakpoint == $name) { 35 | $extend-breakpoint: false; 36 | } 37 | } 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /scss/bootstrap/_progress.scss: -------------------------------------------------------------------------------- 1 | // Disable animation if transitions are disabled 2 | 3 | // scss-docs-start progress-keyframes 4 | @if $enable-transitions { 5 | @keyframes progress-bar-stripes { 6 | 0% { background-position-x: $progress-height; } 7 | } 8 | } 9 | // scss-docs-end progress-keyframes 10 | 11 | .progress { 12 | display: flex; 13 | height: $progress-height; 14 | overflow: hidden; // force rounded corners by cropping it 15 | @include font-size($progress-font-size); 16 | background-color: $progress-bg; 17 | @include border-radius($progress-border-radius); 18 | @include box-shadow($progress-box-shadow); 19 | } 20 | 21 | .progress-bar { 22 | display: flex; 23 | flex-direction: column; 24 | justify-content: center; 25 | overflow: hidden; 26 | color: $progress-bar-color; 27 | text-align: center; 28 | white-space: nowrap; 29 | background-color: $progress-bar-bg; 30 | @include transition($progress-bar-transition); 31 | } 32 | 33 | .progress-bar-striped { 34 | @include gradient-striped(); 35 | background-size: $progress-height $progress-height; 36 | } 37 | 38 | @if $enable-transitions { 39 | .progress-bar-animated { 40 | animation: $progress-bar-animation-timing progress-bar-stripes; 41 | 42 | @if $enable-reduced-motion { 43 | @media (prefers-reduced-motion: reduce) { 44 | animation: none; 45 | } 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /scss/bootstrap/_toasts.scss: -------------------------------------------------------------------------------- 1 | .toast { 2 | width: $toast-max-width; 3 | max-width: 100%; 4 | @include font-size($toast-font-size); 5 | color: $toast-color; 6 | pointer-events: auto; 7 | background-color: $toast-background-color; 8 | background-clip: padding-box; 9 | border: $toast-border-width solid $toast-border-color; 10 | box-shadow: $toast-box-shadow; 11 | @include border-radius($toast-border-radius); 12 | 13 | &:not(.showing):not(.show) { 14 | opacity: 0; 15 | } 16 | 17 | &.hide { 18 | display: none; 19 | } 20 | } 21 | 22 | .toast-container { 23 | width: max-content; 24 | max-width: 100%; 25 | pointer-events: none; 26 | 27 | > :not(:last-child) { 28 | margin-bottom: $toast-spacing; 29 | } 30 | } 31 | 32 | .toast-header { 33 | display: flex; 34 | align-items: center; 35 | padding: $toast-padding-y $toast-padding-x; 36 | color: $toast-header-color; 37 | background-color: $toast-header-background-color; 38 | background-clip: padding-box; 39 | border-bottom: $toast-border-width solid $toast-header-border-color; 40 | @include border-top-radius(subtract($toast-border-radius, $toast-border-width)); 41 | 42 | .btn-close { 43 | margin-right: $toast-padding-x / -2; 44 | margin-left: $toast-padding-x; 45 | } 46 | } 47 | 48 | .toast-body { 49 | padding: $toast-padding-x; // apply to both vertical and horizontal 50 | word-wrap: break-word; 51 | } 52 | -------------------------------------------------------------------------------- /.github/workflows/static.yml: -------------------------------------------------------------------------------- 1 | # Simple workflow for deploying static content to GitHub Pages 2 | name: Deploy static content to Pages 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ["master"] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 20 | concurrency: 21 | group: "pages" 22 | cancel-in-progress: false 23 | 24 | jobs: 25 | # Single deploy job since we're just deploying 26 | deploy: 27 | environment: 28 | name: github-pages 29 | url: ${{ steps.deployment.outputs.page_url }} 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | - name: Setup Pages 35 | uses: actions/configure-pages@v5 36 | - name: Upload artifact 37 | uses: actions/upload-pages-artifact@v3 38 | with: 39 | # Upload entire repository 40 | path: '.' 41 | - name: Deploy to GitHub Pages 42 | id: deployment 43 | uses: actions/deploy-pages@v4 44 | -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------------------------------------- 2 | 3 | Theme Name: Saler 4 | Theme URI: 5 | Description: The Multi-Purpose Ecommerce Template 6 | Author: John Piao 7 | Author URI: 8 | Version: 1.0 9 | 10 | SASS Stylesheet 11 | 12 | -----------------------------------------------------------------------------------*/ 13 | 14 | // Initialize 15 | @import "mixins"; 16 | @import "variables"; 17 | 18 | 19 | // Bootstrap 20 | @import "scss/bootstrap/bootstrap"; 21 | 22 | 23 | // Core CSS 24 | @import "demo/typography"; 25 | 26 | 27 | #demo50 { 28 | // Content Blocks 29 | @import "demo/header"; 30 | @import "demo/banner"; 31 | @import "demo/blog"; 32 | @import "demo/shop"; 33 | @import "demo/404"; 34 | 35 | 36 | // Footer 37 | @import "demo/footer"; 38 | 39 | 40 | // Page Title 41 | @import "demo/pagetitle"; 42 | 43 | 44 | // Form 45 | @import "demo/form"; 46 | 47 | 48 | // Widgets 49 | @import "demo/widgets"; 50 | 51 | 52 | // Utilities 53 | @import "demo/utilities"; 54 | 55 | 56 | // Shortcodes 57 | @import "demo/shortcodes/feature-box"; 58 | @import "demo/shortcodes/headings"; 59 | @import "demo/shortcodes/logos"; 60 | @import "demo/shortcodes/icon-box"; 61 | @import "demo/shortcodes/timeline"; 62 | @import "demo/shortcodes/team"; 63 | 64 | 65 | // Extras 66 | @import "demo/extras"; 67 | 68 | 69 | } -------------------------------------------------------------------------------- /scss/demo/shortcodes/_team.scss: -------------------------------------------------------------------------------- 1 | 2 | /* ---------------------------------------------------------------- 3 | 4 | team.scss 5 | 6 | -----------------------------------------------------------------*/ 7 | 8 | 9 | /* ---------------------------------------------------------------- 10 | Team 11 | -----------------------------------------------------------------*/ 12 | 13 | 14 | /* ---------------------------------------------------------------- 15 | Add here styles for team pages. Thanks! 16 | -----------------------------------------------------------------*/ 17 | 18 | .team { 19 | margin-bottom: 1.875rem; 20 | 21 | .team-image { 22 | img { 23 | width: 100%; 24 | border-radius: 0.5rem; 25 | } 26 | } 27 | 28 | .team-name { 29 | font-family: $heading-font; 30 | color: $theme-color; 31 | font-weight: 600; 32 | } 33 | 34 | .team-info { 35 | font-size: 0.875rem; 36 | color: #9f9f9f; 37 | font-weight: 300; 38 | } 39 | 40 | .team-details { 41 | ul { 42 | li { 43 | a { 44 | font-family: $heading-font; 45 | font-size: 0.875rem; 46 | color: $dark; 47 | text-decoration: none; 48 | 49 | i { 50 | color: $theme-color; 51 | margin-right: 0.5rem; 52 | } 53 | 54 | &:hover { 55 | color: $theme-color; 56 | } 57 | } 58 | } 59 | } 60 | } 61 | } -------------------------------------------------------------------------------- /scss/bootstrap/bootstrap-grid.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Grid v5.0.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2021 The Bootstrap Authors 4 | * Copyright 2011-2021 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */ 7 | 8 | $include-column-box-sizing: true !default; 9 | 10 | @import "functions"; 11 | @import "variables"; 12 | 13 | @import "mixins/lists"; 14 | @import "mixins/breakpoints"; 15 | @import "mixins/container"; 16 | @import "mixins/grid"; 17 | @import "mixins/utilities"; 18 | 19 | @import "vendor/rfs"; 20 | 21 | @import "containers"; 22 | @import "grid"; 23 | 24 | @import "utilities"; 25 | // Only use the utilities we need 26 | // stylelint-disable-next-line scss/dollar-variable-default 27 | $utilities: map-get-multiple( 28 | $utilities, 29 | ( 30 | "display", 31 | "order", 32 | "flex", 33 | "flex-direction", 34 | "flex-grow", 35 | "flex-shrink", 36 | "flex-wrap", 37 | "justify-content", 38 | "align-items", 39 | "align-content", 40 | "align-self", 41 | "margin", 42 | "margin-x", 43 | "margin-y", 44 | "margin-top", 45 | "margin-end", 46 | "margin-bottom", 47 | "margin-start", 48 | "negative-margin", 49 | "negative-margin-x", 50 | "negative-margin-y", 51 | "negative-margin-top", 52 | "negative-margin-end", 53 | "negative-margin-bottom", 54 | "negative-margin-start", 55 | "padding", 56 | "padding-x", 57 | "padding-y", 58 | "padding-top", 59 | "padding-end", 60 | "padding-bottom", 61 | "padding-start", 62 | ) 63 | ); 64 | 65 | @import "utilities/api"; 66 | -------------------------------------------------------------------------------- /scss/bootstrap/_alert.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .alert { 6 | position: relative; 7 | padding: $alert-padding-y $alert-padding-x; 8 | margin-bottom: $alert-margin-bottom; 9 | border: $alert-border-width solid transparent; 10 | @include border-radius($alert-border-radius); 11 | } 12 | 13 | // Headings for larger alerts 14 | .alert-heading { 15 | // Specified to prevent conflicts of changing $headings-color 16 | color: inherit; 17 | } 18 | 19 | // Provide class for links that match alerts 20 | .alert-link { 21 | font-weight: $alert-link-font-weight; 22 | } 23 | 24 | 25 | // Dismissible alerts 26 | // 27 | // Expand the right padding and account for the close button's positioning. 28 | 29 | .alert-dismissible { 30 | padding-right: $alert-dismissible-padding-r; 31 | 32 | // Adjust close link position 33 | .btn-close { 34 | position: absolute; 35 | top: 0; 36 | right: 0; 37 | z-index: $stretched-link-z-index + 1; 38 | padding: $alert-padding-y * 1.25 $alert-padding-x; 39 | } 40 | } 41 | 42 | 43 | // scss-docs-start alert-modifiers 44 | // Generate contextual modifier classes for colorizing the alert. 45 | 46 | @each $state, $value in $theme-colors { 47 | $alert-background: shift-color($value, $alert-bg-scale); 48 | $alert-border: shift-color($value, $alert-border-scale); 49 | $alert-color: shift-color($value, $alert-color-scale); 50 | @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) { 51 | $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale)); 52 | } 53 | .alert-#{$state} { 54 | @include alert-variant($alert-background, $alert-border, $alert-color); 55 | } 56 | } 57 | // scss-docs-end alert-modifiers 58 | -------------------------------------------------------------------------------- /scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | /* ---------------------------------------------------------------- 2 | 3 | mixins.scss 4 | 5 | -----------------------------------------------------------------*/ 6 | 7 | 8 | /* ---------------------------------------------------------------- 9 | Add here styles for mixins and functions. Thanks! 10 | -----------------------------------------------------------------*/ 11 | 12 | 13 | @mixin box-shadow($val...) { 14 | box-shadow: ($val); 15 | -moz-box-shadow: ($val); 16 | -webkit-box-shadow: ($val); 17 | } 18 | 19 | @mixin border-radius($val) { 20 | border-radius: ($val); 21 | } 22 | 23 | @mixin transition($val...) { 24 | -webkit-transition: ($val); 25 | -o-transition: ($val); 26 | transition: ($val); 27 | } 28 | 29 | @mixin translateX($val...) { 30 | -webkit-transform: translateX($val); 31 | -ms-transform: translateX($val); 32 | -o-transform: translateX($val); 33 | transform: translateX($val); 34 | } 35 | 36 | @mixin translateY($val...) { 37 | -webkit-transform: translateY($val); 38 | -ms-transform: translateY($val); 39 | -o-transform: translateY($val); 40 | transform: translateY($val); 41 | } 42 | 43 | @mixin translate3d($val,$val2,$val3) { 44 | -webkit-transform: translate3d($val, $val2, $val3); 45 | -ms-transform: translate3d($val, $val2, $val3); 46 | -o-transform: translate3d($val, $val2, $val3); 47 | transform: translate3d($val, $val2, $val3); 48 | } 49 | 50 | @mixin rotate($val) { 51 | -webkit-transform: rotate($val); 52 | -moz-transform: rotate($val); 53 | -ms-transform: rotate($val); 54 | -o-transform: rotate($val); 55 | transform: rotate($val); 56 | } 57 | 58 | @mixin scale($val) { 59 | -webkit-transform: scale($val); 60 | -moz-transform: scale($val); 61 | -ms-transform: scale($val); 62 | transform: scale($val); 63 | } -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_caret.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start caret-mixins 2 | @mixin caret-down { 3 | border-top: $caret-width solid; 4 | border-right: $caret-width solid transparent; 5 | border-bottom: 0; 6 | border-left: $caret-width solid transparent; 7 | } 8 | 9 | @mixin caret-up { 10 | border-top: 0; 11 | border-right: $caret-width solid transparent; 12 | border-bottom: $caret-width solid; 13 | border-left: $caret-width solid transparent; 14 | } 15 | 16 | @mixin caret-end { 17 | border-top: $caret-width solid transparent; 18 | border-right: 0; 19 | border-bottom: $caret-width solid transparent; 20 | border-left: $caret-width solid; 21 | } 22 | 23 | @mixin caret-start { 24 | border-top: $caret-width solid transparent; 25 | border-right: $caret-width solid; 26 | border-bottom: $caret-width solid transparent; 27 | } 28 | 29 | @mixin caret($direction: down) { 30 | @if $enable-caret { 31 | &::after { 32 | display: inline-block; 33 | margin-left: $caret-spacing; 34 | vertical-align: $caret-vertical-align; 35 | content: ""; 36 | @if $direction == down { 37 | @include caret-down(); 38 | } @else if $direction == up { 39 | @include caret-up(); 40 | } @else if $direction == end { 41 | @include caret-end(); 42 | } 43 | } 44 | 45 | @if $direction == start { 46 | &::after { 47 | display: none; 48 | } 49 | 50 | &::before { 51 | display: inline-block; 52 | margin-right: $caret-spacing; 53 | vertical-align: $caret-vertical-align; 54 | content: ""; 55 | @include caret-start(); 56 | } 57 | } 58 | 59 | &:empty::after { 60 | margin-left: 0; 61 | } 62 | } 63 | } 64 | // scss-docs-end caret-mixins 65 | -------------------------------------------------------------------------------- /scss/bootstrap/_spinners.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Rotating border 3 | // 4 | 5 | // scss-docs-start spinner-border-keyframes 6 | @keyframes spinner-border { 7 | to { transform: rotate(360deg) #{"/* rtl:ignore */"}; } 8 | } 9 | // scss-docs-end spinner-border-keyframes 10 | 11 | .spinner-border { 12 | display: inline-block; 13 | width: $spinner-width; 14 | height: $spinner-height; 15 | vertical-align: $spinner-vertical-align; 16 | border: $spinner-border-width solid currentColor; 17 | border-right-color: transparent; 18 | // stylelint-disable-next-line property-disallowed-list 19 | border-radius: 50%; 20 | animation: $spinner-animation-speed linear infinite spinner-border; 21 | } 22 | 23 | .spinner-border-sm { 24 | width: $spinner-width-sm; 25 | height: $spinner-height-sm; 26 | border-width: $spinner-border-width-sm; 27 | } 28 | 29 | // 30 | // Growing circle 31 | // 32 | 33 | // scss-docs-start spinner-grow-keyframes 34 | @keyframes spinner-grow { 35 | 0% { 36 | transform: scale(0); 37 | } 38 | 50% { 39 | opacity: 1; 40 | transform: none; 41 | } 42 | } 43 | // scss-docs-end spinner-grow-keyframes 44 | 45 | .spinner-grow { 46 | display: inline-block; 47 | width: $spinner-width; 48 | height: $spinner-height; 49 | vertical-align: $spinner-vertical-align; 50 | background-color: currentColor; 51 | // stylelint-disable-next-line property-disallowed-list 52 | border-radius: 50%; 53 | opacity: 0; 54 | animation: $spinner-animation-speed linear infinite spinner-grow; 55 | } 56 | 57 | .spinner-grow-sm { 58 | width: $spinner-width-sm; 59 | height: $spinner-height-sm; 60 | } 61 | 62 | @if $enable-reduced-motion { 63 | @media (prefers-reduced-motion: reduce) { 64 | .spinner-border, 65 | .spinner-grow { 66 | animation-duration: $spinner-animation-speed * 2; 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /scss/bootstrap/_type.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Headings 3 | // 4 | .h1 { 5 | @extend h1; 6 | } 7 | 8 | .h2 { 9 | @extend h2; 10 | } 11 | 12 | .h3 { 13 | @extend h3; 14 | } 15 | 16 | .h4 { 17 | @extend h4; 18 | } 19 | 20 | .h5 { 21 | @extend h5; 22 | } 23 | 24 | .h6 { 25 | @extend h6; 26 | } 27 | 28 | 29 | .lead { 30 | @include font-size($lead-font-size); 31 | font-weight: $lead-font-weight; 32 | } 33 | 34 | // Type display classes 35 | @each $display, $font-size in $display-font-sizes { 36 | .display-#{$display} { 37 | @include font-size($font-size); 38 | font-weight: $display-font-weight; 39 | line-height: $display-line-height; 40 | } 41 | } 42 | 43 | // 44 | // Emphasis 45 | // 46 | .small { 47 | @extend small; 48 | } 49 | 50 | .mark { 51 | @extend mark; 52 | } 53 | 54 | // 55 | // Lists 56 | // 57 | 58 | .list-unstyled { 59 | @include list-unstyled(); 60 | } 61 | 62 | // Inline turns list items into inline-block 63 | .list-inline { 64 | @include list-unstyled(); 65 | } 66 | .list-inline-item { 67 | display: inline-block; 68 | 69 | &:not(:last-child) { 70 | margin-right: $list-inline-padding; 71 | } 72 | } 73 | 74 | 75 | // 76 | // Misc 77 | // 78 | 79 | // Builds on `abbr` 80 | .initialism { 81 | @include font-size($initialism-font-size); 82 | text-transform: uppercase; 83 | } 84 | 85 | // Blockquotes 86 | .blockquote { 87 | margin-bottom: $blockquote-margin-y; 88 | @include font-size($blockquote-font-size); 89 | 90 | > :last-child { 91 | margin-bottom: 0; 92 | } 93 | } 94 | 95 | .blockquote-footer { 96 | margin-top: -$blockquote-margin-y; 97 | margin-bottom: $blockquote-margin-y; 98 | @include font-size($blockquote-footer-font-size); 99 | color: $blockquote-footer-color; 100 | 101 | &::before { 102 | content: "\2014\00A0"; // em dash, nbsp 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /scss/bootstrap/utilities/_api.scss: -------------------------------------------------------------------------------- 1 | // Loop over each breakpoint 2 | @each $breakpoint in map-keys($grid-breakpoints) { 3 | 4 | // Generate media query if needed 5 | @include media-breakpoint-up($breakpoint) { 6 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 7 | 8 | // Loop over each utility property 9 | @each $key, $utility in $utilities { 10 | // The utility can be disabled with `false`, thus check if the utility is a map first 11 | // Only proceed if responsive media queries are enabled or if it's the base media query 12 | @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") { 13 | @include generate-utility($utility, $infix); 14 | } 15 | } 16 | } 17 | } 18 | 19 | // RFS rescaling 20 | @media (min-width: $rfs-mq-value) { 21 | @each $breakpoint in map-keys($grid-breakpoints) { 22 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 23 | 24 | @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) { 25 | // Loop over each utility property 26 | @each $key, $utility in $utilities { 27 | // The utility can be disabled with `false`, thus check if the utility is a map first 28 | // Only proceed if responsive media queries are enabled or if it's the base media query 29 | @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") { 30 | @include generate-utility($utility, $infix, true); 31 | } 32 | } 33 | } 34 | } 35 | } 36 | 37 | 38 | // Print utilities 39 | @media print { 40 | @each $key, $utility in $utilities { 41 | // The utility can be disabled with `false`, thus check if the utility is a map first 42 | // Then check if the utility needs print styles 43 | @if type-of($utility) == "map" and map-get($utility, print) == true { 44 | @include generate-utility($utility, "-print"); 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /scss/bootstrap/_pagination.scss: -------------------------------------------------------------------------------- 1 | .pagination { 2 | display: flex; 3 | @include list-unstyled(); 4 | } 5 | 6 | .page-link { 7 | position: relative; 8 | display: block; 9 | color: $pagination-color; 10 | text-decoration: if($link-decoration == none, null, none); 11 | background-color: $pagination-bg; 12 | border: $pagination-border-width solid $pagination-border-color; 13 | @include transition($pagination-transition); 14 | 15 | &:hover { 16 | z-index: 2; 17 | color: $pagination-hover-color; 18 | text-decoration: if($link-hover-decoration == underline, none, null); 19 | background-color: $pagination-hover-bg; 20 | border-color: $pagination-hover-border-color; 21 | } 22 | 23 | &:focus { 24 | z-index: 3; 25 | color: $pagination-focus-color; 26 | background-color: $pagination-focus-bg; 27 | outline: $pagination-focus-outline; 28 | box-shadow: $pagination-focus-box-shadow; 29 | } 30 | } 31 | 32 | .page-item { 33 | &:not(:first-child) .page-link { 34 | margin-left: $pagination-margin-start; 35 | } 36 | 37 | &.active .page-link { 38 | z-index: 3; 39 | color: $pagination-active-color; 40 | @include gradient-bg($pagination-active-bg); 41 | border-color: $pagination-active-border-color; 42 | } 43 | 44 | &.disabled .page-link { 45 | color: $pagination-disabled-color; 46 | pointer-events: none; 47 | background-color: $pagination-disabled-bg; 48 | border-color: $pagination-disabled-border-color; 49 | } 50 | } 51 | 52 | 53 | // 54 | // Sizing 55 | // 56 | @include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius); 57 | 58 | .pagination-lg { 59 | @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg); 60 | } 61 | 62 | .pagination-sm { 63 | @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm); 64 | } 65 | -------------------------------------------------------------------------------- /scss/bootstrap/forms/_floating-labels.scss: -------------------------------------------------------------------------------- 1 | .form-floating { 2 | position: relative; 3 | 4 | > .form-control, 5 | > .form-select { 6 | height: $form-floating-height; 7 | padding: $form-floating-padding-y $form-floating-padding-x; 8 | } 9 | 10 | > label { 11 | position: absolute; 12 | top: 0; 13 | left: 0; 14 | height: 100%; // allow textareas 15 | padding: $form-floating-padding-y $form-floating-padding-x; 16 | pointer-events: none; 17 | border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model 18 | transform-origin: 0 0; 19 | @include transition($form-floating-transition); 20 | } 21 | 22 | // stylelint-disable no-duplicate-selectors 23 | > .form-control { 24 | &::placeholder { 25 | color: transparent; 26 | } 27 | 28 | &:focus, 29 | &:not(:placeholder-shown) { 30 | padding-top: $form-floating-input-padding-t; 31 | padding-bottom: $form-floating-input-padding-b; 32 | } 33 | // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped 34 | &:-webkit-autofill { 35 | padding-top: $form-floating-input-padding-t; 36 | padding-bottom: $form-floating-input-padding-b; 37 | } 38 | } 39 | 40 | > .form-select { 41 | padding-top: $form-floating-input-padding-t; 42 | padding-bottom: $form-floating-input-padding-b; 43 | } 44 | 45 | > .form-control:focus, 46 | > .form-control:not(:placeholder-shown), 47 | > .form-select { 48 | ~ label { 49 | opacity: $form-floating-label-opacity; 50 | transform: $form-floating-label-transform; 51 | } 52 | } 53 | // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped 54 | > .form-control:-webkit-autofill { 55 | ~ label { 56 | opacity: $form-floating-label-opacity; 57 | transform: $form-floating-label-transform; 58 | } 59 | } 60 | // stylelint-enable no-duplicate-selectors 61 | } 62 | -------------------------------------------------------------------------------- /scss/bootstrap/_offcanvas.scss: -------------------------------------------------------------------------------- 1 | .offcanvas { 2 | position: fixed; 3 | bottom: 0; 4 | z-index: $zindex-offcanvas; 5 | display: flex; 6 | flex-direction: column; 7 | max-width: 100%; 8 | color: $offcanvas-color; 9 | visibility: hidden; 10 | background-color: $offcanvas-bg-color; 11 | background-clip: padding-box; 12 | outline: 0; 13 | @include box-shadow($offcanvas-box-shadow); 14 | @include transition(transform $offcanvas-transition-duration ease-in-out); 15 | } 16 | 17 | .offcanvas-header { 18 | display: flex; 19 | align-items: center; 20 | justify-content: space-between; 21 | padding: $offcanvas-padding-y $offcanvas-padding-x; 22 | 23 | .btn-close { 24 | padding: ($offcanvas-padding-y / 2) ($offcanvas-padding-x / 2); 25 | margin: ($offcanvas-padding-y / -2) ($offcanvas-padding-x / -2) ($offcanvas-padding-y / -2) auto; 26 | } 27 | } 28 | 29 | .offcanvas-title { 30 | margin-bottom: 0; 31 | line-height: $offcanvas-title-line-height; 32 | } 33 | 34 | .offcanvas-body { 35 | flex-grow: 1; 36 | padding: $offcanvas-padding-y $offcanvas-padding-x; 37 | overflow-y: auto; 38 | } 39 | 40 | .offcanvas-start { 41 | top: 0; 42 | left: 0; 43 | width: $offcanvas-horizontal-width; 44 | border-right: $offcanvas-border-width solid $offcanvas-border-color; 45 | transform: translateX(-100%); 46 | } 47 | 48 | .offcanvas-end { 49 | top: 0; 50 | right: 0; 51 | width: $offcanvas-horizontal-width; 52 | border-left: $offcanvas-border-width solid $offcanvas-border-color; 53 | transform: translateX(100%); 54 | } 55 | 56 | .offcanvas-top { 57 | top: 0; 58 | right: 0; 59 | left: 0; 60 | height: $offcanvas-vertical-height; 61 | max-height: 100%; 62 | border-bottom: $offcanvas-border-width solid $offcanvas-border-color; 63 | transform: translateY(-100%); 64 | } 65 | 66 | .offcanvas-bottom { 67 | right: 0; 68 | left: 0; 69 | height: $offcanvas-vertical-height; 70 | max-height: 100%; 71 | border-top: $offcanvas-border-width solid $offcanvas-border-color; 72 | transform: translateY(100%); 73 | } 74 | 75 | .offcanvas.show { 76 | transform: none; 77 | } 78 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_gradients.scss: -------------------------------------------------------------------------------- 1 | // Gradients 2 | 3 | // scss-docs-start gradient-bg-mixin 4 | @mixin gradient-bg($color: null) { 5 | background-color: $color; 6 | 7 | @if $enable-gradients { 8 | background-image: var(--#{$variable-prefix}gradient); 9 | } 10 | } 11 | // scss-docs-end gradient-bg-mixin 12 | 13 | // scss-docs-start gradient-mixins 14 | // Horizontal gradient, from left to right 15 | // 16 | // Creates two color stops, start and end, by specifying a color and position for each color stop. 17 | @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { 18 | background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); 19 | } 20 | 21 | // Vertical gradient, from top to bottom 22 | // 23 | // Creates two color stops, start and end, by specifying a color and position for each color stop. 24 | @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) { 25 | background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); 26 | } 27 | 28 | @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { 29 | background-image: linear-gradient($deg, $start-color, $end-color); 30 | } 31 | 32 | @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { 33 | background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); 34 | } 35 | 36 | @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { 37 | background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); 38 | } 39 | 40 | @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { 41 | background-image: radial-gradient(circle, $inner-color, $outer-color); 42 | } 43 | 44 | @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { 45 | background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); 46 | } 47 | // scss-docs-end gradient-mixins 48 | -------------------------------------------------------------------------------- /scss/demo/shortcodes/_timeline.scss: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------------------------------------- 2 | 3 | Shortcodes: timeline.scss 4 | 5 | -----------------------------------------------------------------------------------*/ 6 | 7 | /* ---------------------------------------------------------------- 8 | Timeline Styles 9 | -----------------------------------------------------------------*/ 10 | 11 | 12 | .timeline { 13 | background-color: #25262a; 14 | padding-top: 8.125rem; 15 | padding-bottom: 8.125rem; 16 | 17 | .events-wrapper { 18 | .events { 19 | position: relative; 20 | overflow: hidden; 21 | 22 | .event { 23 | padding: 0 2.8125rem; 24 | position: relative; 25 | 26 | .event-thumbnail { 27 | padding-left: 1.875rem; 28 | position: relative; 29 | 30 | img { 31 | @include transition(all 0.3s ease-in-out); 32 | } 33 | } 34 | 35 | .event-detail { 36 | margin-top: -4.375rem; 37 | position: relative; 38 | z-index: 1; 39 | 40 | .event-date { 41 | color: $white; 42 | font-size: 6.875rem; 43 | line-height: 8.75rem; 44 | @include transition(all 0.3s ease-in-out); 45 | } 46 | 47 | span { 48 | color: $white; 49 | font-size: 1.1875rem; 50 | line-height: 2.125rem; 51 | } 52 | } 53 | 54 | &:hover { 55 | .event-thumbnail { 56 | img { 57 | @include scale(1.2); 58 | } 59 | } 60 | 61 | .event-date { 62 | @include translateX(1.875rem); 63 | } 64 | } 65 | } 66 | } 67 | } 68 | } -------------------------------------------------------------------------------- /scss/demo/_utilities.scss: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------------------------------------- 2 | utilities.scss 3 | -----------------------------------------------------------------------------------*/ 4 | 5 | 6 | /* ---------------------------------------------------------------- 7 | Fonts 8 | -----------------------------------------------------------------*/ 9 | 10 | // Font Family 11 | .body-font { font-family: $body-font !important; } 12 | .heading-font { font-family: $heading-font !important; } 13 | 14 | // Font Weight 15 | .fw-semi-bold { font-weight: 600 !important; } 16 | .fw-black { font-weight: 900 !important; } 17 | .fw-low-bold { font-weight: 400 !important;} 18 | 19 | 20 | /* ---------------------------------------------------------------- 21 | Colors 22 | -----------------------------------------------------------------*/ 23 | 24 | .text-black { color: #000 !important; } 25 | .bg-black { background-color: #282828 !important; } 26 | 27 | 28 | /* ---------------------------------------------------------------- 29 | 30 | 31 | 32 | /* ---------------------------------------------------------------- 33 | Image 34 | -----------------------------------------------------------------*/ 35 | 36 | img { 37 | &.img-full { 38 | width: 100%; 39 | height: 100%; 40 | object-fit: cover; 41 | object-position: center; 42 | } 43 | } 44 | 45 | 46 | /* ---------------------------------------------------------------- 47 | Section 48 | -----------------------------------------------------------------*/ 49 | 50 | .section { 51 | padding-top: $section-spacer; 52 | padding-bottom: $section-spacer; 53 | position: relative; 54 | 55 | @include media-breakpoint-down(lg) { 56 | padding-top: 2rem; 57 | padding-bottom: 2rem !important; 58 | } 59 | } 60 | 61 | .section-padding-top { padding-top: $section-spacer; } 62 | .section-padding-bottom { padding-bottom: $section-spacer; } 63 | .section-margin-top { margin-top: $section-spacer; } 64 | .section-margin-bottom { margin-bottom: $section-spacer; } 65 | 66 | /* ---------------------------------------------------------------- 67 | Position 68 | -----------------------------------------------------------------*/ 69 | .pos-top-left { position: absolute; top: 0; left: 0; } -------------------------------------------------------------------------------- /scss/bootstrap/forms/_form-select.scss: -------------------------------------------------------------------------------- 1 | // Select 2 | // 3 | // Replaces the browser default select with a custom one, mostly pulled from 4 | // https://primer.github.io/. 5 | 6 | .form-select { 7 | display: block; 8 | width: 100%; 9 | padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x; 10 | font-family: $form-select-font-family; 11 | @include font-size($form-select-font-size); 12 | font-weight: $form-select-font-weight; 13 | line-height: $form-select-line-height; 14 | color: $form-select-color; 15 | background-color: $form-select-bg; 16 | background-image: escape-svg($form-select-indicator); 17 | background-repeat: no-repeat; 18 | background-position: $form-select-bg-position; 19 | background-size: $form-select-bg-size; 20 | border: $form-select-border-width solid $form-select-border-color; 21 | @include border-radius($form-select-border-radius, 0); 22 | @include box-shadow($form-select-box-shadow); 23 | appearance: none; 24 | 25 | &:focus { 26 | border-color: $form-select-focus-border-color; 27 | outline: 0; 28 | @if $enable-shadows { 29 | @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow); 30 | } @else { 31 | // Avoid using mixin so we can pass custom focus shadow properly 32 | box-shadow: $form-select-focus-box-shadow; 33 | } 34 | } 35 | 36 | &[multiple], 37 | &[size]:not([size="1"]) { 38 | padding-right: $form-select-padding-x; 39 | background-image: none; 40 | } 41 | 42 | &:disabled { 43 | color: $form-select-disabled-color; 44 | background-color: $form-select-disabled-bg; 45 | border-color: $form-select-disabled-border-color; 46 | } 47 | 48 | // Remove outline from select box in FF 49 | &:-moz-focusring { 50 | color: transparent; 51 | text-shadow: 0 0 0 $form-select-color; 52 | } 53 | } 54 | 55 | .form-select-sm { 56 | padding-top: $form-select-padding-y-sm; 57 | padding-bottom: $form-select-padding-y-sm; 58 | padding-left: $form-select-padding-x-sm; 59 | @include font-size($form-select-font-size-sm); 60 | } 61 | 62 | .form-select-lg { 63 | padding-top: $form-select-padding-y-lg; 64 | padding-bottom: $form-select-padding-y-lg; 65 | padding-left: $form-select-padding-x-lg; 66 | @include font-size($form-select-font-size-lg); 67 | } 68 | -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-disallowed-list 2 | // Single side border-radius 3 | 4 | // Helper function to replace negative values with 0 5 | @function valid-radius($radius) { 6 | $return: (); 7 | @each $value in $radius { 8 | @if type-of($value) == number { 9 | $return: append($return, max($value, 0)); 10 | } @else { 11 | $return: append($return, $value); 12 | } 13 | } 14 | @return $return; 15 | } 16 | 17 | // scss-docs-start border-radius-mixins 18 | @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { 19 | @if $enable-rounded { 20 | border-radius: valid-radius($radius); 21 | } 22 | @else if $fallback-border-radius != false { 23 | border-radius: $fallback-border-radius; 24 | } 25 | } 26 | 27 | @mixin border-top-radius($radius: $border-radius) { 28 | @if $enable-rounded { 29 | border-top-left-radius: valid-radius($radius); 30 | border-top-right-radius: valid-radius($radius); 31 | } 32 | } 33 | 34 | @mixin border-end-radius($radius: $border-radius) { 35 | @if $enable-rounded { 36 | border-top-right-radius: valid-radius($radius); 37 | border-bottom-right-radius: valid-radius($radius); 38 | } 39 | } 40 | 41 | @mixin border-bottom-radius($radius: $border-radius) { 42 | @if $enable-rounded { 43 | border-bottom-right-radius: valid-radius($radius); 44 | border-bottom-left-radius: valid-radius($radius); 45 | } 46 | } 47 | 48 | @mixin border-start-radius($radius: $border-radius) { 49 | @if $enable-rounded { 50 | border-top-left-radius: valid-radius($radius); 51 | border-bottom-left-radius: valid-radius($radius); 52 | } 53 | } 54 | 55 | @mixin border-top-start-radius($radius: $border-radius) { 56 | @if $enable-rounded { 57 | border-top-left-radius: valid-radius($radius); 58 | } 59 | } 60 | 61 | @mixin border-top-end-radius($radius: $border-radius) { 62 | @if $enable-rounded { 63 | border-top-right-radius: valid-radius($radius); 64 | } 65 | } 66 | 67 | @mixin border-bottom-end-radius($radius: $border-radius) { 68 | @if $enable-rounded { 69 | border-bottom-right-radius: valid-radius($radius); 70 | } 71 | } 72 | 73 | @mixin border-bottom-start-radius($radius: $border-radius) { 74 | @if $enable-rounded { 75 | border-bottom-left-radius: valid-radius($radius); 76 | } 77 | } 78 | // scss-docs-end border-radius-mixins 79 | -------------------------------------------------------------------------------- /scss/demo/_extras.scss: -------------------------------------------------------------------------------- 1 | 2 | /* ---------------------------------------------------------------- 3 | 4 | extras.scss 5 | 6 | -----------------------------------------------------------------*/ 7 | 8 | 9 | /* ---------------------------------------------------------------- 10 | Extra Styles 11 | -----------------------------------------------------------------*/ 12 | 13 | .shipping-banner { 14 | position: absolute; 15 | left: 4.375rem; 16 | top: 5.625rem; 17 | } 18 | 19 | .container-fluid { 20 | overflow: hidden; 21 | } 22 | 23 | .link-icon { 24 | background-image: url(../images/icons/link.png); 25 | background-size: 100%; 26 | background-repeat: no-repeat; 27 | display: inline-block; 28 | width: 2.5625rem; 29 | height: 2.5625rem; 30 | 31 | &.black { 32 | background-image: url(../images/icons/link_black.png); 33 | } 34 | } 35 | 36 | a { 37 | .link-icon { 38 | @include transition(all 0.3s ease-in-out); 39 | } 40 | 41 | &:hover { 42 | .link-icon { 43 | @include translateX(1rem); 44 | } 45 | } 46 | } 47 | 48 | .about { 49 | p { 50 | font-size: 0.875rem; 51 | line-height: 1.5rem; 52 | } 53 | 54 | @include media-breakpoint-down(lg) { 55 | padding-left: 2rem !important; 56 | padding-right: 2rem !important; 57 | 58 | .col-lg-4 { 59 | .bg-primary { 60 | padding: 2rem !important; 61 | } 62 | } 63 | } 64 | 65 | .about-banner-content { 66 | h4 { 67 | font-size: 1.325rem; 68 | color: #66c584; 69 | font-weight: 400; 70 | } 71 | 72 | @include media-breakpoint-down(sm) { 73 | .w-50 { 74 | width: auto !important; 75 | } 76 | } 77 | } 78 | } 79 | 80 | 81 | .about-content { 82 | h3 { 83 | font-size: 2.25rem; 84 | } 85 | 86 | p { 87 | font-size: 0.75rem; 88 | color: #9c9c9f; 89 | line-height: 1.3rem; 90 | } 91 | 92 | @include media-breakpoint-down(lg) { 93 | margin-top: 1rem !important; 94 | } 95 | } 96 | 97 | #subscribe { 98 | position: relative; 99 | padding-top: 3rem; 100 | padding-bottom: 3rem; 101 | 102 | h4 { 103 | font-size: 2.125rem; 104 | } 105 | 106 | p { 107 | color: #8fb9ff; 108 | } 109 | 110 | .decoration { 111 | position: absolute; 112 | text-align: end; 113 | bottom: -3rem; 114 | 115 | @include media-breakpoint-down(sm) { 116 | bottom: -2rem; 117 | 118 | img { 119 | width: 7rem; 120 | } 121 | } 122 | } 123 | } -------------------------------------------------------------------------------- /scss/bootstrap/mixins/_utilities.scss: -------------------------------------------------------------------------------- 1 | // Utility generator 2 | // Used to generate utilities & print utilities 3 | @mixin generate-utility($utility, $infix, $is-rfs-media-query: false) { 4 | $values: map-get($utility, values); 5 | 6 | // If the values are a list or string, convert it into a map 7 | @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" { 8 | $values: zip($values, $values); 9 | } 10 | 11 | @each $key, $value in $values { 12 | $properties: map-get($utility, property); 13 | 14 | // Multiple properties are possible, for example with vertical or horizontal margins or paddings 15 | @if type-of($properties) == "string" { 16 | $properties: append((), $properties); 17 | } 18 | 19 | // Use custom class if present 20 | $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1)); 21 | $property-class: if($property-class == null, "", $property-class); 22 | 23 | // State params to generate pseudo-classes 24 | $state: if(map-has-key($utility, state), map-get($utility, state), ()); 25 | 26 | $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix); 27 | 28 | // Don't prefix if value key is null (eg. with shadow class) 29 | $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, ""); 30 | 31 | @if map-get($utility, rfs) { 32 | // Inside the media query 33 | @if $is-rfs-media-query { 34 | $val: rfs-value($value); 35 | 36 | // Do not render anything if fluid and non fluid values are the same 37 | $value: if($val == rfs-fluid-value($value), null, $val); 38 | } 39 | @else { 40 | $value: rfs-fluid-value($value); 41 | } 42 | } 43 | 44 | $is-rtl: map-get($utility, rtl); 45 | 46 | @if $value != null { 47 | @if $is-rtl == false { 48 | /* rtl:begin:remove */ 49 | } 50 | .#{$property-class + $infix + $property-class-modifier} { 51 | @each $property in $properties { 52 | #{$property}: $value if($enable-important-utilities, !important, null); 53 | } 54 | } 55 | 56 | @each $pseudo in $state { 57 | .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} { 58 | @each $property in $properties { 59 | #{$property}: $value if($enable-important-utilities, !important, null); 60 | } 61 | } 62 | } 63 | @if $is-rtl == false { 64 | /* rtl:end:remove */ 65 | } 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /images/SVG/PayPal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/bootstrap/_buttons.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .btn { 6 | display: inline-block; 7 | font-family: $btn-font-family; 8 | font-weight: $btn-font-weight; 9 | line-height: $btn-line-height; 10 | color: $body-color; 11 | text-align: center; 12 | text-decoration: if($link-decoration == none, null, none); 13 | white-space: $btn-white-space; 14 | vertical-align: middle; 15 | cursor: if($enable-button-pointers, pointer, null); 16 | user-select: none; 17 | background-color: transparent; 18 | border: $btn-border-width solid transparent; 19 | @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius); 20 | @include transition($btn-transition); 21 | 22 | &:hover { 23 | color: $body-color; 24 | text-decoration: if($link-hover-decoration == underline, none, null); 25 | } 26 | 27 | .btn-check:focus + &, 28 | &:focus { 29 | outline: 0; 30 | box-shadow: $btn-focus-box-shadow; 31 | } 32 | 33 | .btn-check:checked + &, 34 | .btn-check:active + &, 35 | &:active, 36 | &.active { 37 | @include box-shadow($btn-active-box-shadow); 38 | 39 | &:focus { 40 | @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); 41 | } 42 | } 43 | 44 | &:disabled, 45 | &.disabled, 46 | fieldset:disabled & { 47 | pointer-events: none; 48 | opacity: $btn-disabled-opacity; 49 | @include box-shadow(none); 50 | } 51 | } 52 | 53 | 54 | // 55 | // Alternate buttons 56 | // 57 | 58 | // scss-docs-start btn-variant-loops 59 | @each $color, $value in $theme-colors { 60 | .btn-#{$color} { 61 | @include button-variant($value, $value); 62 | } 63 | } 64 | 65 | @each $color, $value in $theme-colors { 66 | .btn-outline-#{$color} { 67 | @include button-outline-variant($value); 68 | } 69 | } 70 | // scss-docs-end btn-variant-loops 71 | 72 | 73 | // 74 | // Link buttons 75 | // 76 | 77 | // Make a button look and behave like a link 78 | .btn-link { 79 | font-weight: $font-weight-normal; 80 | color: $btn-link-color; 81 | text-decoration: $link-decoration; 82 | 83 | &:hover { 84 | color: $btn-link-hover-color; 85 | text-decoration: $link-hover-decoration; 86 | } 87 | 88 | &:focus { 89 | text-decoration: $link-hover-decoration; 90 | } 91 | 92 | &:disabled, 93 | &.disabled { 94 | color: $btn-link-disabled-color; 95 | } 96 | 97 | // No need for an active state here 98 | } 99 | 100 | 101 | // 102 | // Button Sizes 103 | // 104 | 105 | .btn-lg { 106 | @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg); 107 | } 108 | 109 | .btn-sm { 110 | @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm); 111 | } 112 | -------------------------------------------------------------------------------- /scss/bootstrap/forms/_form-range.scss: -------------------------------------------------------------------------------- 1 | // Range 2 | // 3 | // Style range inputs the same across browsers. Vendor-specific rules for pseudo 4 | // elements cannot be mixed. As such, there are no shared styles for focus or 5 | // active states on prefixed selectors. 6 | 7 | .form-range { 8 | width: 100%; 9 | height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2); 10 | padding: 0; // Need to reset padding 11 | background-color: transparent; 12 | appearance: none; 13 | 14 | &:focus { 15 | outline: 0; 16 | 17 | // Pseudo-elements must be split across multiple rulesets to have an effect. 18 | // No box-shadow() mixin for focus accessibility. 19 | &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; } 20 | &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; } 21 | } 22 | 23 | &::-moz-focus-outer { 24 | border: 0; 25 | } 26 | 27 | &::-webkit-slider-thumb { 28 | width: $form-range-thumb-width; 29 | height: $form-range-thumb-height; 30 | margin-top: ($form-range-track-height - $form-range-thumb-height) / 2; // Webkit specific 31 | @include gradient-bg($form-range-thumb-bg); 32 | border: $form-range-thumb-border; 33 | @include border-radius($form-range-thumb-border-radius); 34 | @include box-shadow($form-range-thumb-box-shadow); 35 | @include transition($form-range-thumb-transition); 36 | appearance: none; 37 | 38 | &:active { 39 | @include gradient-bg($form-range-thumb-active-bg); 40 | } 41 | } 42 | 43 | &::-webkit-slider-runnable-track { 44 | width: $form-range-track-width; 45 | height: $form-range-track-height; 46 | color: transparent; // Why? 47 | cursor: $form-range-track-cursor; 48 | background-color: $form-range-track-bg; 49 | border-color: transparent; 50 | @include border-radius($form-range-track-border-radius); 51 | @include box-shadow($form-range-track-box-shadow); 52 | } 53 | 54 | &::-moz-range-thumb { 55 | width: $form-range-thumb-width; 56 | height: $form-range-thumb-height; 57 | @include gradient-bg($form-range-thumb-bg); 58 | border: $form-range-thumb-border; 59 | @include border-radius($form-range-thumb-border-radius); 60 | @include box-shadow($form-range-thumb-box-shadow); 61 | @include transition($form-range-thumb-transition); 62 | appearance: none; 63 | 64 | &:active { 65 | @include gradient-bg($form-range-thumb-active-bg); 66 | } 67 | } 68 | 69 | &::-moz-range-track { 70 | width: $form-range-track-width; 71 | height: $form-range-track-height; 72 | color: transparent; 73 | cursor: $form-range-track-cursor; 74 | background-color: $form-range-track-bg; 75 | border-color: transparent; // Firefox specific? 76 | @include border-radius($form-range-track-border-radius); 77 | @include box-shadow($form-range-track-box-shadow); 78 | } 79 | 80 | &:disabled { 81 | pointer-events: none; 82 | 83 | &::-webkit-slider-thumb { 84 | background-color: $form-range-thumb-disabled-bg; 85 | } 86 | 87 | &::-moz-range-thumb { 88 | background-color: $form-range-thumb-disabled-bg; 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /scss/bootstrap/_tooltip.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | .tooltip { 3 | position: absolute; 4 | z-index: $zindex-tooltip; 5 | display: block; 6 | margin: $tooltip-margin; 7 | // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. 8 | // So reset our font and text properties to avoid inheriting weird values. 9 | @include reset-text(); 10 | @include font-size($tooltip-font-size); 11 | // Allow breaking very long words so they don't overflow the tooltip's bounds 12 | word-wrap: break-word; 13 | opacity: 0; 14 | 15 | &.show { opacity: $tooltip-opacity; } 16 | 17 | .tooltip-arrow { 18 | position: absolute; 19 | display: block; 20 | width: $tooltip-arrow-width; 21 | height: $tooltip-arrow-height; 22 | 23 | &::before { 24 | position: absolute; 25 | content: ""; 26 | border-color: transparent; 27 | border-style: solid; 28 | } 29 | } 30 | } 31 | 32 | .bs-tooltip-top { 33 | padding: $tooltip-arrow-height 0; 34 | 35 | .tooltip-arrow { 36 | bottom: 0; 37 | 38 | &::before { 39 | top: -1px; 40 | border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; 41 | border-top-color: $tooltip-arrow-color; 42 | } 43 | } 44 | } 45 | 46 | .bs-tooltip-end { 47 | padding: 0 $tooltip-arrow-height; 48 | 49 | .tooltip-arrow { 50 | left: 0; 51 | width: $tooltip-arrow-height; 52 | height: $tooltip-arrow-width; 53 | 54 | &::before { 55 | right: -1px; 56 | border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; 57 | border-right-color: $tooltip-arrow-color; 58 | } 59 | } 60 | } 61 | 62 | .bs-tooltip-bottom { 63 | padding: $tooltip-arrow-height 0; 64 | 65 | .tooltip-arrow { 66 | top: 0; 67 | 68 | &::before { 69 | bottom: -1px; 70 | border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; 71 | border-bottom-color: $tooltip-arrow-color; 72 | } 73 | } 74 | } 75 | 76 | .bs-tooltip-start { 77 | padding: 0 $tooltip-arrow-height; 78 | 79 | .tooltip-arrow { 80 | right: 0; 81 | width: $tooltip-arrow-height; 82 | height: $tooltip-arrow-width; 83 | 84 | &::before { 85 | left: -1px; 86 | border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; 87 | border-left-color: $tooltip-arrow-color; 88 | } 89 | } 90 | } 91 | 92 | .bs-tooltip-auto { 93 | &[data-popper-placement^="top"] { 94 | @extend .bs-tooltip-top; 95 | } 96 | &[data-popper-placement^="right"] { 97 | @extend .bs-tooltip-end; 98 | } 99 | &[data-popper-placement^="bottom"] { 100 | @extend .bs-tooltip-bottom; 101 | } 102 | &[data-popper-placement^="left"] { 103 | @extend .bs-tooltip-start; 104 | } 105 | } 106 | 107 | // Wrapper for the tooltip content 108 | .tooltip-inner { 109 | max-width: $tooltip-max-width; 110 | padding: $tooltip-padding-y $tooltip-padding-x; 111 | color: $tooltip-color; 112 | text-align: center; 113 | background-color: $tooltip-bg; 114 | @include border-radius($tooltip-border-radius); 115 | } 116 | -------------------------------------------------------------------------------- /images/SVG/Visa.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scss/bootstrap/_accordion.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .accordion-button { 6 | position: relative; 7 | display: flex; 8 | align-items: center; 9 | width: 100%; 10 | padding: $accordion-button-padding-y $accordion-button-padding-x; 11 | @include font-size($font-size-base); 12 | color: $accordion-button-color; 13 | text-align: left; // Reset button style 14 | background-color: $accordion-button-bg; 15 | border: 0; 16 | @include border-radius(0); 17 | overflow-anchor: none; 18 | @include transition($accordion-transition); 19 | 20 | &:not(.collapsed) { 21 | color: $accordion-button-active-color; 22 | background-color: $accordion-button-active-bg; 23 | box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color; 24 | 25 | &::after { 26 | background-image: escape-svg($accordion-button-active-icon); 27 | transform: $accordion-icon-transform; 28 | } 29 | } 30 | 31 | // Accordion icon 32 | &::after { 33 | flex-shrink: 0; 34 | width: $accordion-icon-width; 35 | height: $accordion-icon-width; 36 | margin-left: auto; 37 | content: ""; 38 | background-image: escape-svg($accordion-button-icon); 39 | background-repeat: no-repeat; 40 | background-size: $accordion-icon-width; 41 | @include transition($accordion-icon-transition); 42 | } 43 | 44 | &:hover { 45 | z-index: 2; 46 | } 47 | 48 | &:focus { 49 | z-index: 3; 50 | border-color: $accordion-button-focus-border-color; 51 | outline: 0; 52 | box-shadow: $accordion-button-focus-box-shadow; 53 | } 54 | } 55 | 56 | .accordion-header { 57 | margin-bottom: 0; 58 | } 59 | 60 | .accordion-item { 61 | background-color: $accordion-bg; 62 | border: $accordion-border-width solid $accordion-border-color; 63 | 64 | &:first-of-type { 65 | @include border-top-radius($accordion-border-radius); 66 | 67 | .accordion-button { 68 | @include border-top-radius($accordion-inner-border-radius); 69 | } 70 | } 71 | 72 | &:not(:first-of-type) { 73 | border-top: 0; 74 | } 75 | 76 | // Only set a border-radius on the last item if the accordion is collapsed 77 | &:last-of-type { 78 | @include border-bottom-radius($accordion-border-radius); 79 | 80 | .accordion-button { 81 | &.collapsed { 82 | @include border-bottom-radius($accordion-inner-border-radius); 83 | } 84 | } 85 | 86 | .accordion-collapse { 87 | @include border-bottom-radius($accordion-border-radius); 88 | } 89 | } 90 | } 91 | 92 | .accordion-body { 93 | padding: $accordion-body-padding-y $accordion-body-padding-x; 94 | } 95 | 96 | 97 | // Flush accordion items 98 | // 99 | // Remove borders and border-radius to keep accordion items edge-to-edge. 100 | 101 | .accordion-flush { 102 | .accordion-collapse { 103 | border-width: 0; 104 | } 105 | 106 | .accordion-item { 107 | border-right: 0; 108 | border-left: 0; 109 | @include border-radius(0); 110 | 111 | &:first-child { border-top: 0; } 112 | &:last-child { border-bottom: 0; } 113 | 114 | .accordion-button { 115 | @include border-radius(0); 116 | } 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /scss/bootstrap/_nav.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Kickstart any navigation component with a set of style resets. Works with 4 | // `