From 7f36f116a690b37e80c1ee61799fd6767d9347cf Mon Sep 17 00:00:00 2001 From: Paul van Tilburg Date: Fri, 29 Dec 2017 23:55:10 +0100 Subject: [PATCH] Switch to Sass based custom CSS * Include the Bootstrap v4.0.0-beta3 SCSS sources * Use the old custom.css as a basis for wishlist.scss * Set the correct column count based on the media sizes --- .gitignore | 3 + scss/_alert.scss | 51 + scss/_badge.scss | 47 + scss/_breadcrumb.scss | 38 + scss/_button-group.scss | 166 + scss/_buttons.scss | 147 + scss/_card.scss | 270 ++ scss/_carousel.scss | 191 + scss/_close.scss | 34 + scss/_code.scss | 56 + scss/_custom-forms.scss | 282 ++ scss/_dropdown.scss | 131 + scss/_forms.scss | 333 ++ scss/_functions.scss | 86 + scss/_grid.scss | 52 + scss/_images.scss | 42 + scss/_input-group.scss | 156 + scss/_jumbotron.scss | 16 + scss/_list-group.scss | 115 + scss/_media.scss | 8 + scss/_mixins.scss | 42 + scss/_modal.scss | 168 + scss/_nav.scss | 118 + scss/_navbar.scss | 311 ++ scss/_pagination.scss | 72 + scss/_popover.scss | 183 + scss/_print.scss | 110 + scss/_progress.scss | 33 + scss/_reboot.scss | 505 ++ scss/_root.scss | 19 + scss/_tables.scss | 180 + scss/_tooltip.scss | 115 + scss/_transitions.scss | 36 + scss/_type.scss | 125 + scss/_utilities.scss | 14 + scss/_variables.scss | 872 ++++ scss/bootstrap-grid.scss | 35 + scss/bootstrap-reboot.scss | 12 + scss/bootstrap.scss | 42 + scss/mixins/_alert.scss | 13 + scss/mixins/_background-variant.scss | 21 + scss/mixins/_badge.scss | 12 + scss/mixins/_border-radius.scss | 35 + scss/mixins/_box-shadow.scss | 5 + scss/mixins/_breakpoints.scss | 121 + scss/mixins/_buttons.scss | 101 + scss/mixins/_caret.scss | 65 + scss/mixins/_clearfix.scss | 7 + scss/mixins/_float.scss | 11 + scss/mixins/_forms.scss | 133 + scss/mixins/_gradients.scss | 45 + scss/mixins/_grid-framework.scss | 69 + scss/mixins/_grid.scss | 52 + scss/mixins/_hover.scss | 61 + scss/mixins/_image.scss | 36 + scss/mixins/_list-group.scss | 24 + scss/mixins/_lists.scss | 7 + scss/mixins/_nav-divider.scss | 10 + scss/mixins/_navbar-align.scss | 10 + scss/mixins/_pagination.scss | 22 + scss/mixins/_reset-text.scss | 17 + scss/mixins/_resize.scss | 6 + scss/mixins/_screen-reader.scss | 35 + scss/mixins/_size.scss | 6 + scss/mixins/_table-row.scss | 30 + scss/mixins/_text-emphasis.scss | 14 + scss/mixins/_text-hide.scss | 9 + scss/mixins/_text-truncate.scss | 8 + scss/mixins/_transition.scss | 9 + scss/mixins/_visibility.scss | 7 + scss/utilities/_align.scss | 8 + scss/utilities/_background.scss | 19 + scss/utilities/_borders.scss | 54 + scss/utilities/_clearfix.scss | 3 + scss/utilities/_display.scss | 56 + scss/utilities/_embed.scss | 52 + scss/utilities/_flex.scss | 46 + scss/utilities/_float.scss | 9 + scss/utilities/_position.scss | 36 + scss/utilities/_screenreaders.scss | 11 + scss/utilities/_sizing.scss | 12 + scss/utilities/_spacing.scss | 51 + scss/utilities/_text.scss | 52 + scss/utilities/_visibility.scss | 11 + scss/wishlists.scss | 20 + static/css/custom.css | 8 - static/css/wishlists.css | 6479 ++++++++++++++++++++++++++ static/css/wishlists.css.map | 7 + templates/_layout.html.tera | 7 +- 89 files changed, 13145 insertions(+), 13 deletions(-) create mode 100644 scss/_alert.scss create mode 100644 scss/_badge.scss create mode 100644 scss/_breadcrumb.scss create mode 100644 scss/_button-group.scss create mode 100644 scss/_buttons.scss create mode 100644 scss/_card.scss create mode 100644 scss/_carousel.scss create mode 100644 scss/_close.scss create mode 100644 scss/_code.scss create mode 100644 scss/_custom-forms.scss create mode 100644 scss/_dropdown.scss create mode 100644 scss/_forms.scss create mode 100644 scss/_functions.scss create mode 100644 scss/_grid.scss create mode 100644 scss/_images.scss create mode 100644 scss/_input-group.scss create mode 100644 scss/_jumbotron.scss create mode 100644 scss/_list-group.scss create mode 100644 scss/_media.scss create mode 100644 scss/_mixins.scss create mode 100644 scss/_modal.scss create mode 100644 scss/_nav.scss create mode 100644 scss/_navbar.scss create mode 100644 scss/_pagination.scss create mode 100644 scss/_popover.scss create mode 100644 scss/_print.scss create mode 100644 scss/_progress.scss create mode 100644 scss/_reboot.scss create mode 100644 scss/_root.scss create mode 100644 scss/_tables.scss create mode 100644 scss/_tooltip.scss create mode 100644 scss/_transitions.scss create mode 100644 scss/_type.scss create mode 100644 scss/_utilities.scss create mode 100644 scss/_variables.scss create mode 100644 scss/bootstrap-grid.scss create mode 100644 scss/bootstrap-reboot.scss create mode 100644 scss/bootstrap.scss create mode 100644 scss/mixins/_alert.scss create mode 100644 scss/mixins/_background-variant.scss create mode 100644 scss/mixins/_badge.scss create mode 100644 scss/mixins/_border-radius.scss create mode 100644 scss/mixins/_box-shadow.scss create mode 100644 scss/mixins/_breakpoints.scss create mode 100644 scss/mixins/_buttons.scss create mode 100644 scss/mixins/_caret.scss create mode 100644 scss/mixins/_clearfix.scss create mode 100644 scss/mixins/_float.scss create mode 100644 scss/mixins/_forms.scss create mode 100644 scss/mixins/_gradients.scss create mode 100644 scss/mixins/_grid-framework.scss create mode 100644 scss/mixins/_grid.scss create mode 100644 scss/mixins/_hover.scss create mode 100644 scss/mixins/_image.scss create mode 100644 scss/mixins/_list-group.scss create mode 100644 scss/mixins/_lists.scss create mode 100644 scss/mixins/_nav-divider.scss create mode 100644 scss/mixins/_navbar-align.scss create mode 100644 scss/mixins/_pagination.scss create mode 100644 scss/mixins/_reset-text.scss create mode 100644 scss/mixins/_resize.scss create mode 100644 scss/mixins/_screen-reader.scss create mode 100644 scss/mixins/_size.scss create mode 100644 scss/mixins/_table-row.scss create mode 100644 scss/mixins/_text-emphasis.scss create mode 100644 scss/mixins/_text-hide.scss create mode 100644 scss/mixins/_text-truncate.scss create mode 100644 scss/mixins/_transition.scss create mode 100644 scss/mixins/_visibility.scss create mode 100644 scss/utilities/_align.scss create mode 100644 scss/utilities/_background.scss create mode 100644 scss/utilities/_borders.scss create mode 100644 scss/utilities/_clearfix.scss create mode 100644 scss/utilities/_display.scss create mode 100644 scss/utilities/_embed.scss create mode 100644 scss/utilities/_flex.scss create mode 100644 scss/utilities/_float.scss create mode 100644 scss/utilities/_position.scss create mode 100644 scss/utilities/_screenreaders.scss create mode 100644 scss/utilities/_sizing.scss create mode 100644 scss/utilities/_spacing.scss create mode 100644 scss/utilities/_text.scss create mode 100644 scss/utilities/_visibility.scss create mode 100644 scss/wishlists.scss delete mode 100644 static/css/custom.css create mode 100644 static/css/wishlists.css create mode 100644 static/css/wishlists.css.map diff --git a/.gitignore b/.gitignore index cf3025a..65ed242 100644 --- a/.gitignore +++ b/.gitignore @@ -2,5 +2,8 @@ /target/ **/*.rs.bk +# Sass stuff +.sass-cache/ + # Lists lists/*.list diff --git a/scss/_alert.scss b/scss/_alert.scss new file mode 100644 index 0000000..c2d5c81 --- /dev/null +++ b/scss/_alert.scss @@ -0,0 +1,51 @@ +// +// Base styles +// + +.alert { + position: relative; + padding: $alert-padding-y $alert-padding-x; + margin-bottom: $alert-margin-bottom; + border: $alert-border-width solid transparent; + @include border-radius($alert-border-radius); +} + +// Headings for larger alerts +.alert-heading { + // Specified to prevent conflicts of changing $headings-color + color: inherit; +} + +// Provide class for links that match alerts +.alert-link { + font-weight: $alert-link-font-weight; +} + + +// Dismissible alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissible { + padding-right: ($close-font-size + $alert-padding-x * 2); + + // Adjust close link position + .close { + position: absolute; + top: 0; + right: 0; + padding: $alert-padding-y $alert-padding-x; + color: inherit; + } +} + + +// Alternate styles +// +// Generate contextual modifier classes for colorizing the alert. + +@each $color, $value in $theme-colors { + .alert-#{$color} { + @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6)); + } +} diff --git a/scss/_badge.scss b/scss/_badge.scss new file mode 100644 index 0000000..b87a1b0 --- /dev/null +++ b/scss/_badge.scss @@ -0,0 +1,47 @@ +// Base class +// +// Requires one of the contextual, color modifier classes for `color` and +// `background-color`. + +.badge { + display: inline-block; + padding: $badge-padding-y $badge-padding-x; + font-size: $badge-font-size; + font-weight: $badge-font-weight; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + @include border-radius($badge-border-radius); + + // Empty badges collapse automatically + &:empty { + display: none; + } +} + +// Quick fix for badges in buttons +.btn .badge { + position: relative; + top: -1px; +} + +// Pill badges +// +// Make them extra rounded with a modifier to replace v3's badges. + +.badge-pill { + padding-right: $badge-pill-padding-x; + padding-left: $badge-pill-padding-x; + @include border-radius($badge-pill-border-radius); +} + +// Colors +// +// Contextual variations (linked badges get darker on :hover). + +@each $color, $value in $theme-colors { + .badge-#{$color} { + @include badge-variant($value); + } +} diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss new file mode 100644 index 0000000..25b9d85 --- /dev/null +++ b/scss/_breadcrumb.scss @@ -0,0 +1,38 @@ +.breadcrumb { + display: flex; + flex-wrap: wrap; + padding: $breadcrumb-padding-y $breadcrumb-padding-x; + margin-bottom: $breadcrumb-margin-bottom; + list-style: none; + background-color: $breadcrumb-bg; + @include border-radius($border-radius); +} + +.breadcrumb-item { + // The separator between breadcrumbs (by default, a forward-slash: "/") + + .breadcrumb-item::before { + display: inline-block; // Suppress underlining of the separator in modern browsers + padding-right: $breadcrumb-item-padding; + padding-left: $breadcrumb-item-padding; + color: $breadcrumb-divider-color; + content: "#{$breadcrumb-divider}"; + } + + // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built + // without `