diff options
| author | Mark Otto <markd.otto@gmail.com> | 2021-04-01 04:29:10 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-01 04:29:10 +0300 |
| commit | d3aae62190160d09cb297693728be9ac2dc6d53f (patch) | |
| tree | 4fcbd755aed391625812bd4e40510de18ef63a0a /scss | |
| parent | 07bb0a94e04a62097af5b72e4a891b63bcb1e345 (diff) | |
Update starter homepage and fix Sass imports (#45)gh-pages
* Update starter homepage and fix Sass imports
Moves Sass variable overrides first so that we can properly update re-assigned variables
* Update readme version for Bootstrap Icons
* Update CSS, add custom component, add links to guides, tweak some copy
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_icon-list.scss | 20 | ||||
| -rw-r--r-- | scss/starter.scss | 23 |
2 files changed, 31 insertions, 12 deletions
diff --git a/scss/_icon-list.scss b/scss/_icon-list.scss new file mode 100644 index 0000000..6ef3c31 --- /dev/null +++ b/scss/_icon-list.scss @@ -0,0 +1,20 @@ +// Example of a custom component + +.icon-list { + padding-left: 0; + list-style: none; +} +.icon-list li { + display: flex; + align-items: flex-start; + margin-bottom: .25rem; +} +.icon-list li::before { + display: block; + flex-shrink: 0; + width: 1.5em; + height: 1.5em; + margin-right: .5rem; + content: ""; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto; +} diff --git a/scss/starter.scss b/scss/starter.scss index 9c86d00..bde673e 100644 --- a/scss/starter.scss +++ b/scss/starter.scss @@ -22,26 +22,23 @@ // Option 2 // -// Import just the styles you need. Note that some stylesheets are required no matter what. - -@import "bootstrap/scss/functions"; // Required -@import "bootstrap/scss/variables"; // Required -@import "bootstrap/scss/mixins"; // Required - -// -// Override Bootstrap here -// +// Place variable overrides first, then import just the styles you need. Note that some stylesheets are required no matter what. // Toggle global options $enable-gradients: true; $enable-shadows: true; // Customize some defaults -$body-color: $purple; -$body-bg: #f5f5f5; +$body-color: #333; +$body-bg: #fff; $border-radius: .4rem; +$success: #7952b3; + +@import "bootstrap/scss/functions"; // Required +@import "bootstrap/scss/variables"; // Required +@import "bootstrap/scss/mixins"; // Required -// @import "bootstrap/scss/root"; +@import "bootstrap/scss/root"; // Required @import "bootstrap/scss/reboot"; // Required @import "bootstrap/scss/type"; // @import "bootstrap/scss/images"; @@ -81,6 +78,8 @@ $border-radius: .4rem; // Custom styles // +@import "icon-list"; + body { padding: 3rem 1.5rem; } |