Skip to content

Commit 284ad99

Browse files
chrisrhymeschrisrhymes
committed
List item overrides
1 parent 1827cf2 commit 284ad99

File tree

7 files changed

+188
-126
lines changed

7 files changed

+188
-126
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
node_modules
22
package-lock.json
3-
.DS_Store
3+
.DS_Store
4+
.idea

‎README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,16 @@ A simple scss package extending Bulma with block style list elements
1717
</ul>
1818
```
1919

20+
## List Item Overrides
21+
22+
In v0.3 you can override the list item styles.
23+
24+
```html
25+
<ul class="block-list is-small">
26+
<li>Item one</li>
27+
<li class="is-primary is-outlined is-large">Item two</li>
28+
<li>Item three</li>
29+
</ul>
30+
```
31+
2032
For examples see [csrhymes.com/bulma-block-list](https://www.csrhymes.com/bulma-block-list)

‎docs/demo.css

Lines changed: 105 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -7107,106 +7107,135 @@ label.panel-block {
71077107
padding: 16px;
71087108
background: whitesmoke;
71097109
margin-bottom: 0.25rem; }
7110-
.block-list.is-left li {
7110+
.block-list li.is-left,
7111+
.block-list.is-left > li {
71117112
text-align: left; }
7112-
.block-list.is-centered li {
7113+
.block-list li.is-centered,
7114+
.block-list.is-centered > li {
71137115
text-align: center; }
7114-
.block-list.is-right li {
7116+
.block-list li.is-right,
7117+
.block-list.is-right > li {
71157118
text-align: right; }
7116-
.block-list.is-small li {
7119+
.block-list li.is-small,
7120+
.block-list.is-small > li {
71177121
font-size: 0.875em;
71187122
padding: 10.66667px; }
7119-
.block-list.is-normal li {
7123+
.block-list li.is-normal,
7124+
.block-list.is-normal > li {
71207125
font-size: 1em; }
7121-
.block-list.is-large li {
7126+
.block-list li.is-large,
7127+
.block-list.is-large > li {
71227128
font-size: 1.5rem; }
7123-
.block-list.is-white li {
7129+
.block-list li.has-radius,
7130+
.block-list.has-radius > li {
7131+
border-radius: 4px; }
7132+
.block-list li.is-white,
7133+
.block-list.is-white > li {
71247134
background: white;
71257135
color: #0a0a0a; }
7126-
.block-list.is-white.is-outlined li {
7127-
background: transparent;
7128-
color: white;
7129-
border: 1px solid white; }
7130-
.block-list.is-white.has-radius li {
7131-
border-radius: 4px; }
7132-
.block-list.is-black li {
7136+
.block-list li.is-white.is-outlined,
7137+
.block-list li.is-white.is-outlined > li,
7138+
.block-list.is-white > li.is-outlined,
7139+
.block-list.is-white > li.is-outlined > li {
7140+
background: transparent;
7141+
color: white;
7142+
border: 1px solid white; }
7143+
.block-list li.is-black,
7144+
.block-list.is-black > li {
71337145
background: #0a0a0a;
71347146
color: white; }
7135-
.block-list.is-black.is-outlined li {
7136-
background: transparent;
7137-
color: #0a0a0a;
7138-
border: 1px solid #0a0a0a; }
7139-
.block-list.is-black.has-radius li {
7140-
border-radius: 4px; }
7141-
.block-list.is-light li {
7147+
.block-list li.is-black.is-outlined,
7148+
.block-list li.is-black.is-outlined > li,
7149+
.block-list.is-black > li.is-outlined,
7150+
.block-list.is-black > li.is-outlined > li {
7151+
background: transparent;
7152+
color: #0a0a0a;
7153+
border: 1px solid #0a0a0a; }
7154+
.block-list li.is-light,
7155+
.block-list.is-light > li {
71427156
background: whitesmoke;
71437157
color: rgba(0, 0, 0, 0.7); }
7144-
.block-list.is-light.is-outlined li {
7145-
background: transparent;
7146-
color: whitesmoke;
7147-
border: 1px solid whitesmoke; }
7148-
.block-list.is-light.has-radius li {
7149-
border-radius: 4px; }
7150-
.block-list.is-dark li {
7158+
.block-list li.is-light.is-outlined,
7159+
.block-list li.is-light.is-outlined > li,
7160+
.block-list.is-light > li.is-outlined,
7161+
.block-list.is-light > li.is-outlined > li {
7162+
background: transparent;
7163+
color: whitesmoke;
7164+
border: 1px solid whitesmoke; }
7165+
.block-list li.is-dark,
7166+
.block-list.is-dark > li {
71517167
background: #363636;
71527168
color: #fff; }
7153-
.block-list.is-dark.is-outlined li {
7154-
background: transparent;
7155-
color: #363636;
7156-
border: 1px solid #363636; }
7157-
.block-list.is-dark.has-radius li {
7158-
border-radius: 4px; }
7159-
.block-list.is-primary li {
7169+
.block-list li.is-dark.is-outlined,
7170+
.block-list li.is-dark.is-outlined > li,
7171+
.block-list.is-dark > li.is-outlined,
7172+
.block-list.is-dark > li.is-outlined > li {
7173+
background: transparent;
7174+
color: #363636;
7175+
border: 1px solid #363636; }
7176+
.block-list li.is-primary,
7177+
.block-list.is-primary > li {
71607178
background: #00d1b2;
71617179
color: #fff; }
7162-
.block-list.is-primary.is-outlined li {
7163-
background: transparent;
7164-
color: #00d1b2;
7165-
border: 1px solid #00d1b2; }
7166-
.block-list.is-primary.has-radius li {
7167-
border-radius: 4px; }
7168-
.block-list.is-link li {
7180+
.block-list li.is-primary.is-outlined,
7181+
.block-list li.is-primary.is-outlined > li,
7182+
.block-list.is-primary > li.is-outlined,
7183+
.block-list.is-primary > li.is-outlined > li {
7184+
background: transparent;
7185+
color: #00d1b2;
7186+
border: 1px solid #00d1b2; }
7187+
.block-list li.is-link,
7188+
.block-list.is-link > li {
71697189
background: #3273dc;
71707190
color: #fff; }
7171-
.block-list.is-link.is-outlined li {
7172-
background: transparent;
7173-
color: #3273dc;
7174-
border: 1px solid #3273dc; }
7175-
.block-list.is-link.has-radius li {
7176-
border-radius: 4px; }
7177-
.block-list.is-info li {
7191+
.block-list li.is-link.is-outlined,
7192+
.block-list li.is-link.is-outlined > li,
7193+
.block-list.is-link > li.is-outlined,
7194+
.block-list.is-link > li.is-outlined > li {
7195+
background: transparent;
7196+
color: #3273dc;
7197+
border: 1px solid #3273dc; }
7198+
.block-list li.is-info,
7199+
.block-list.is-info > li {
71787200
background: #3298dc;
71797201
color: #fff; }
7180-
.block-list.is-info.is-outlined li {
7181-
background: transparent;
7182-
color: #3298dc;
7183-
border: 1px solid #3298dc; }
7184-
.block-list.is-info.has-radius li {
7185-
border-radius: 4px; }
7186-
.block-list.is-success li {
7202+
.block-list li.is-info.is-outlined,
7203+
.block-list li.is-info.is-outlined > li,
7204+
.block-list.is-info > li.is-outlined,
7205+
.block-list.is-info > li.is-outlined > li {
7206+
background: transparent;
7207+
color: #3298dc;
7208+
border: 1px solid #3298dc; }
7209+
.block-list li.is-success,
7210+
.block-list.is-success > li {
71877211
background: #48c774;
71887212
color: #fff; }
7189-
.block-list.is-success.is-outlined li {
7190-
background: transparent;
7191-
color: #48c774;
7192-
border: 1px solid #48c774; }
7193-
.block-list.is-success.has-radius li {
7194-
border-radius: 4px; }
7195-
.block-list.is-warning li {
7213+
.block-list li.is-success.is-outlined,
7214+
.block-list li.is-success.is-outlined > li,
7215+
.block-list.is-success > li.is-outlined,
7216+
.block-list.is-success > li.is-outlined > li {
7217+
background: transparent;
7218+
color: #48c774;
7219+
border: 1px solid #48c774; }
7220+
.block-list li.is-warning,
7221+
.block-list.is-warning > li {
71967222
background: #ffdd57;
71977223
color: rgba(0, 0, 0, 0.7); }
7198-
.block-list.is-warning.is-outlined li {
7199-
background: transparent;
7200-
color: #ffdd57;
7201-
border: 1px solid #ffdd57; }
7202-
.block-list.is-warning.has-radius li {
7203-
border-radius: 4px; }
7204-
.block-list.is-danger li {
7224+
.block-list li.is-warning.is-outlined,
7225+
.block-list li.is-warning.is-outlined > li,
7226+
.block-list.is-warning > li.is-outlined,
7227+
.block-list.is-warning > li.is-outlined > li {
7228+
background: transparent;
7229+
color: #ffdd57;
7230+
border: 1px solid #ffdd57; }
7231+
.block-list li.is-danger,
7232+
.block-list.is-danger > li {
72057233
background: #f14668;
72067234
color: #fff; }
7207-
.block-list.is-danger.is-outlined li {
7208-
background: transparent;
7209-
color: #f14668;
7210-
border: 1px solid #f14668; }
7211-
.block-list.is-danger.has-radius li {
7212-
border-radius: 4px; }
7235+
.block-list li.is-danger.is-outlined,
7236+
.block-list li.is-danger.is-outlined > li,
7237+
.block-list.is-danger > li.is-outlined,
7238+
.block-list.is-danger > li.is-outlined > li {
7239+
background: transparent;
7240+
color: #f14668;
7241+
border: 1px solid #f14668; }

‎docs/index.html

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,35 @@ <h2>How to use</h2>
203203
</ul>
204204
</div>
205205

206+
<div class="column is-12">
207+
<p class="title is-4">List Item Overrides</p>
208+
<p>In v0.3 you can override the classes on a list item</p>
209+
</div>
210+
<div class="column is-4">
211+
<p class="title is-5">li.is-large</p>
212+
<ul class="block-list">
213+
<li>Item one</li>
214+
<li class="is-large">Item two</li>
215+
<li>Item three</li>
216+
</ul>
217+
</div>
218+
<div class="column is-4">
219+
<p class="title is-5">li.is-primary</p>
220+
<ul class="block-list">
221+
<li>Item one</li>
222+
<li class="is-primary">Item two</li>
223+
<li>Item three</li>
224+
</ul>
225+
</div>
226+
<div class="column is-4">
227+
<p class="title is-5">li.is-primary.is-outlined</p>
228+
<ul class="block-list">
229+
<li>Item one</li>
230+
<li class="is-primary is-outlined">Item two</li>
231+
<li>Item three</li>
232+
</ul>
233+
</div>
234+
206235
<div class="column is-12">
207236
<p class="title is-4">Combinations</p>
208237
</div>
@@ -223,10 +252,11 @@ <h2>How to use</h2>
223252
</ul>
224253
</div>
225254
<div class="column is-4">
226-
<p class="title is-5">is-large is-outlined is-danger is-centered</p>
227-
<ul class="block-list is-large is-outlined is-danger is-centered">
255+
<p class="title is-5">ul.is-danger.is-centered</p>
256+
<p class="subtitle">li.is-outlined.is-large</p>
257+
<ul class="block-list is-centered is-danger">
228258
<li>Item one</li>
229-
<li>Item two</li>
259+
<li class="is-danger is-outlined is-large">Item two</li>
230260
<li>Item three</li>
231261
</ul>
232262
</div>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "bulma-block-list",
3-
"version": "0.2.0",
3+
"version": "0.3.0",
44
"description": "A simple scss package extending Bulma with block style list elements",
55
"homepage": "https://github.com/chrisrhymes/bulma-block-list#readme",
66
"bugs": {

0 commit comments

Comments
 (0)