From 284ad99f8fa9bcdd2371176c0e643cb782827946 Mon Sep 17 00:00:00 2001 From: chrisrhymes Date: Sat, 4 Apr 2020 11:26:04 +0100 Subject: [PATCH] List item overrides --- .gitignore | 3 +- README.md | 12 +++ docs/demo.css | 181 +++++++++++++++++++++++++------------------- docs/index.html | 36 ++++++++- package.json | 2 +- src/block-list.scss | 78 +++++++++---------- src/demo.scss | 2 +- 7 files changed, 188 insertions(+), 126 deletions(-) diff --git a/.gitignore b/.gitignore index 373c5df..6a9158a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules package-lock.json -.DS_Store \ No newline at end of file +.DS_Store +.idea \ No newline at end of file diff --git a/README.md b/README.md index 0a04e92..568a0ad 100644 --- a/README.md +++ b/README.md @@ -17,4 +17,16 @@ A simple scss package extending Bulma with block style list elements ``` +## List Item Overrides + +In v0.3 you can override the list item styles. + +```html + +``` + For examples see [csrhymes.com/bulma-block-list](https://www.csrhymes.com/bulma-block-list) \ No newline at end of file diff --git a/docs/demo.css b/docs/demo.css index 9a11763..a5f7eb3 100644 --- a/docs/demo.css +++ b/docs/demo.css @@ -7107,106 +7107,135 @@ label.panel-block { padding: 16px; background: whitesmoke; margin-bottom: 0.25rem; } - .block-list.is-left li { + .block-list li.is-left, + .block-list.is-left > li { text-align: left; } - .block-list.is-centered li { + .block-list li.is-centered, + .block-list.is-centered > li { text-align: center; } - .block-list.is-right li { + .block-list li.is-right, + .block-list.is-right > li { text-align: right; } - .block-list.is-small li { + .block-list li.is-small, + .block-list.is-small > li { font-size: 0.875em; padding: 10.66667px; } - .block-list.is-normal li { + .block-list li.is-normal, + .block-list.is-normal > li { font-size: 1em; } - .block-list.is-large li { + .block-list li.is-large, + .block-list.is-large > li { font-size: 1.5rem; } - .block-list.is-white li { + .block-list li.has-radius, + .block-list.has-radius > li { + border-radius: 4px; } + .block-list li.is-white, + .block-list.is-white > li { background: white; color: #0a0a0a; } - .block-list.is-white.is-outlined li { - background: transparent; - color: white; - border: 1px solid white; } - .block-list.is-white.has-radius li { - border-radius: 4px; } - .block-list.is-black li { + .block-list li.is-white.is-outlined, + .block-list li.is-white.is-outlined > li, + .block-list.is-white > li.is-outlined, + .block-list.is-white > li.is-outlined > li { + background: transparent; + color: white; + border: 1px solid white; } + .block-list li.is-black, + .block-list.is-black > li { background: #0a0a0a; color: white; } - .block-list.is-black.is-outlined li { - background: transparent; - color: #0a0a0a; - border: 1px solid #0a0a0a; } - .block-list.is-black.has-radius li { - border-radius: 4px; } - .block-list.is-light li { + .block-list li.is-black.is-outlined, + .block-list li.is-black.is-outlined > li, + .block-list.is-black > li.is-outlined, + .block-list.is-black > li.is-outlined > li { + background: transparent; + color: #0a0a0a; + border: 1px solid #0a0a0a; } + .block-list li.is-light, + .block-list.is-light > li { background: whitesmoke; color: rgba(0, 0, 0, 0.7); } - .block-list.is-light.is-outlined li { - background: transparent; - color: whitesmoke; - border: 1px solid whitesmoke; } - .block-list.is-light.has-radius li { - border-radius: 4px; } - .block-list.is-dark li { + .block-list li.is-light.is-outlined, + .block-list li.is-light.is-outlined > li, + .block-list.is-light > li.is-outlined, + .block-list.is-light > li.is-outlined > li { + background: transparent; + color: whitesmoke; + border: 1px solid whitesmoke; } + .block-list li.is-dark, + .block-list.is-dark > li { background: #363636; color: #fff; } - .block-list.is-dark.is-outlined li { - background: transparent; - color: #363636; - border: 1px solid #363636; } - .block-list.is-dark.has-radius li { - border-radius: 4px; } - .block-list.is-primary li { + .block-list li.is-dark.is-outlined, + .block-list li.is-dark.is-outlined > li, + .block-list.is-dark > li.is-outlined, + .block-list.is-dark > li.is-outlined > li { + background: transparent; + color: #363636; + border: 1px solid #363636; } + .block-list li.is-primary, + .block-list.is-primary > li { background: #00d1b2; color: #fff; } - .block-list.is-primary.is-outlined li { - background: transparent; - color: #00d1b2; - border: 1px solid #00d1b2; } - .block-list.is-primary.has-radius li { - border-radius: 4px; } - .block-list.is-link li { + .block-list li.is-primary.is-outlined, + .block-list li.is-primary.is-outlined > li, + .block-list.is-primary > li.is-outlined, + .block-list.is-primary > li.is-outlined > li { + background: transparent; + color: #00d1b2; + border: 1px solid #00d1b2; } + .block-list li.is-link, + .block-list.is-link > li { background: #3273dc; color: #fff; } - .block-list.is-link.is-outlined li { - background: transparent; - color: #3273dc; - border: 1px solid #3273dc; } - .block-list.is-link.has-radius li { - border-radius: 4px; } - .block-list.is-info li { + .block-list li.is-link.is-outlined, + .block-list li.is-link.is-outlined > li, + .block-list.is-link > li.is-outlined, + .block-list.is-link > li.is-outlined > li { + background: transparent; + color: #3273dc; + border: 1px solid #3273dc; } + .block-list li.is-info, + .block-list.is-info > li { background: #3298dc; color: #fff; } - .block-list.is-info.is-outlined li { - background: transparent; - color: #3298dc; - border: 1px solid #3298dc; } - .block-list.is-info.has-radius li { - border-radius: 4px; } - .block-list.is-success li { + .block-list li.is-info.is-outlined, + .block-list li.is-info.is-outlined > li, + .block-list.is-info > li.is-outlined, + .block-list.is-info > li.is-outlined > li { + background: transparent; + color: #3298dc; + border: 1px solid #3298dc; } + .block-list li.is-success, + .block-list.is-success > li { background: #48c774; color: #fff; } - .block-list.is-success.is-outlined li { - background: transparent; - color: #48c774; - border: 1px solid #48c774; } - .block-list.is-success.has-radius li { - border-radius: 4px; } - .block-list.is-warning li { + .block-list li.is-success.is-outlined, + .block-list li.is-success.is-outlined > li, + .block-list.is-success > li.is-outlined, + .block-list.is-success > li.is-outlined > li { + background: transparent; + color: #48c774; + border: 1px solid #48c774; } + .block-list li.is-warning, + .block-list.is-warning > li { background: #ffdd57; color: rgba(0, 0, 0, 0.7); } - .block-list.is-warning.is-outlined li { - background: transparent; - color: #ffdd57; - border: 1px solid #ffdd57; } - .block-list.is-warning.has-radius li { - border-radius: 4px; } - .block-list.is-danger li { + .block-list li.is-warning.is-outlined, + .block-list li.is-warning.is-outlined > li, + .block-list.is-warning > li.is-outlined, + .block-list.is-warning > li.is-outlined > li { + background: transparent; + color: #ffdd57; + border: 1px solid #ffdd57; } + .block-list li.is-danger, + .block-list.is-danger > li { background: #f14668; color: #fff; } - .block-list.is-danger.is-outlined li { - background: transparent; - color: #f14668; - border: 1px solid #f14668; } - .block-list.is-danger.has-radius li { - border-radius: 4px; } + .block-list li.is-danger.is-outlined, + .block-list li.is-danger.is-outlined > li, + .block-list.is-danger > li.is-outlined, + .block-list.is-danger > li.is-outlined > li { + background: transparent; + color: #f14668; + border: 1px solid #f14668; } diff --git a/docs/index.html b/docs/index.html index d366829..af59cb8 100644 --- a/docs/index.html +++ b/docs/index.html @@ -203,6 +203,35 @@

How to use

+
+

List Item Overrides

+

In v0.3 you can override the classes on a list item

+
+
+

li.is-large

+ +
+
+

li.is-primary

+ +
+
+

li.is-primary.is-outlined

+ +
+

Combinations

@@ -223,10 +252,11 @@

How to use

-

is-large is-outlined is-danger is-centered

-
diff --git a/package.json b/package.json index 7ae5eb4..47e25a7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bulma-block-list", - "version": "0.2.0", + "version": "0.3.0", "description": "A simple scss package extending Bulma with block style list elements", "homepage": "https://github.com/chrisrhymes/bulma-block-list#readme", "bugs": { diff --git a/src/block-list.scss b/src/block-list.scss index 16e9016..828fe05 100644 --- a/src/block-list.scss +++ b/src/block-list.scss @@ -11,42 +11,41 @@ $block-list-separator: 0.25rem !default; margin-bottom: $block-list-separator; } - &.is-left { - li { - text-align: left; - } + li.is-left, + &.is-left > li { + text-align: left; } - &.is-centered { - li { - text-align: center; - } + li.is-centered, + &.is-centered > li { + text-align: center; } - &.is-right { - li { - text-align: right; - } + li.is-right, + &.is-right > li { + text-align: right; } - &.is-small { - li { - font-size: $small-font-size; - padding: ($gap / 3); - } + li.is-small, + &.is-small > li { + font-size: $small-font-size; + padding: ($gap / 3); } - - &.is-normal { - li { - font-size: $body-font-size; - } + + li.is-normal, + &.is-normal > li { + font-size: $body-font-size; } - &.is-large { - li { - font-size: $size-large; - } + li.is-large, + &.is-large > li { + font-size: $size-large; + } + + li.has-radius, + &.has-radius > li { + border-radius: $radius; } @each $name, $pair in $colors { @@ -54,26 +53,17 @@ $block-list-separator: 0.25rem !default; $color: nth($pair, 1); $color-invert: nth($pair, 2); - &.is-#{$name} { - li { - background: $color; - color: $color-invert; - } - - &.is-outlined { - li { - background: transparent; - color: $color; - border: 1px solid $color; - } - } + li.is-#{$name}, + &.is-#{$name} > li { + background: $color; + color: $color-invert; - &.has-radius { - li { - border-radius: $radius; - } + &.is-outlined, + &.is-outlined > li { + background: transparent; + color: $color; + border: 1px solid $color; } } } - } \ No newline at end of file diff --git a/src/demo.scss b/src/demo.scss index edcdbc7..4b42804 100644 --- a/src/demo.scss +++ b/src/demo.scss @@ -1,3 +1,3 @@ @charset "utf-8"; -@import "node_modules/bulma/bulma.sass"; +@import "node_modules/bulma/bulma"; @import "block-list.scss"; \ No newline at end of file