Skip to content

Commit a499322

Browse files
UnderlineWordsUnderlineWords
committed
v1.2.5 updates
1 parent d079418 commit a499322

File tree

11 files changed

+381
-158
lines changed

11 files changed

+381
-158
lines changed

‎dist/punica.css

+225-41
Large diffs are not rendered by default.

‎dist/punica.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/components/pagination.html

+51-3
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,55 @@
205205
<div class="panel pure">
206206
<div class="content center align">
207207
<div class="buttons">
208-
<a class="button success" href="javascript:">
208+
<a class="button" href="javascript:">
209+
<span class="material-icons">keyboard_arrow_left</span>
210+
</a>
211+
<a class="button" href="javascript:">1</a>
212+
<a class="button active" href="javascript:">2</a>
213+
<a class="button" href="javascript:">3</a>
214+
<div class="dropdown top right">
215+
<a tabindex="0" class="button toggle">
216+
<span class="material-icons">keyboard_arrow_up</span>
217+
</a>
218+
<ul class="menu">
219+
<div class="title">Per Page</div>
220+
<li class="item"><a href="#">10 items</a></li>
221+
<li class="item"><a href="#">20 items</a></li>
222+
<li class="item"><a href="#">30 items</a></li>
223+
</ul>
224+
</div>
225+
<a class="button" href="javascript:">56</a>
226+
<a class="button" href="javascript:">57</a>
227+
<a class="button" href="javascript:">58</a>
228+
<a class="button" href="javascript:">
229+
<span class="material-icons">keyboard_arrow_right</span>
230+
</a>
231+
</div>
232+
</div>
233+
<div class="content center align">
234+
<div class="buttons primary">
235+
<a class="button" href="javascript:">
236+
<span class="material-icons">keyboard_arrow_left</span>
237+
</a>
238+
<a class="button" href="javascript:">1</a>
239+
<a class="button active" href="javascript:">2</a>
240+
<a class="button" href="javascript:">3</a>
241+
<button class="button inactive">
242+
<span class="material-icons">
243+
settings_ethernet
244+
</span>
245+
</button>
246+
<a class="button" href="javascript:">56</a>
247+
<a class="button" href="javascript:">57</a>
248+
<a class="button" href="javascript:">58</a>
249+
<a class="button" href="javascript:">
250+
<span class="material-icons">keyboard_arrow_right</span>
251+
</a>
252+
</div>
253+
</div>
254+
<div class="content center align">
255+
<div class="buttons">
256+
<a class="button warning" href="javascript:">
209257
<span class="material-icons">keyboard_arrow_left</span>
210258
</a>
211259
<a class="button" href="javascript:">1</a>
@@ -215,7 +263,7 @@
215263
<a class="button" href="javascript:">56</a>
216264
<a class="button" href="javascript:">57</a>
217265
<a class="button" href="javascript:">58</a>
218-
<a class="button success" href="javascript:">
266+
<a class="button warning" href="javascript:">
219267
<span class="material-icons">keyboard_arrow_right</span>
220268
</a>
221269
</div>
@@ -375,7 +423,7 @@
375423
</a>
376424
</div>
377425
<p></p>
378-
<div class="buttons">
426+
<div class="buttons primary">
379427
<a class="button" href="javascript:">
380428
<span class="material-icons">keyboard_arrow_left</span>
381429
</a>

‎docs/css/punica.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/elements/button.html

+32-63
Original file line numberDiff line numberDiff line change
@@ -158,61 +158,14 @@
158158
<div class="button">Default</div>
159159
<button class="button primary">Primary</button>
160160
<a class="button success">Success</a>
161+
<div class="button warning">Warning</div>
161162
<div class="button error">Error</div>
162163
<div class="button dark">Dark</div>
164+
<div class="button active">Active</div>
163165
<div class="button disabled">Disabled</div>
164166
<div class="button link">Link</div>
165167
<div class="button secondary">Secondary</div>
166168
</div>
167-
<div class="content">
168-
<div id="highlighter_295520" class="syntaxhighlighter nogutter xml">
169-
<table border="0" cellpadding="0" cellspacing="0">
170-
<tbody>
171-
<tr>
172-
<td class="code">
173-
<div class="container">
174-
<div class="line number1 index0 alt2"><code class="xml plain">&lt;</code><code
175-
class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code
176-
class="xml plain">=</code><code class="xml string">"button"</code><code
177-
class="xml plain">&gt;Default&lt;/</code><code class="xml keyword">div</code><code
178-
class="xml plain">&gt;</code></div>
179-
<div class="line number2 index1 alt1"><code class="xml plain">&lt;</code><code
180-
class="xml keyword">button</code>&nbsp;<code class="xml color1">class</code><code
181-
class="xml plain">=</code><code class="xml string">"button&nbsp;primary"</code><code
182-
class="xml plain">&gt;Primary&lt;/</code><code class="xml keyword">button</code><code
183-
class="xml plain">&gt;</code></div>
184-
<div class="line number3 index2 alt2"><code class="xml plain">&lt;</code><code
185-
class="xml keyword">a</code>&nbsp;<code class="xml color1">class</code><code
186-
class="xml plain">=</code><code class="xml string">"button&nbsp;success"</code><code
187-
class="xml plain">&gt;Success&lt;/</code><code class="xml keyword">a</code><code
188-
class="xml plain">&gt;</code></div>
189-
<div class="line number4 index3 alt1"><code class="xml plain">&lt;</code><code
190-
class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code
191-
class="xml plain">=</code><code class="xml string">"button&nbsp;error"</code><code
192-
class="xml plain">&gt;Error&lt;/</code><code class="xml keyword">div</code><code
193-
class="xml plain">&gt;</code></div>
194-
<div class="line number5 index4 alt2"><code class="xml plain">&lt;</code><code
195-
class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code
196-
class="xml plain">=</code><code class="xml string">"button&nbsp;disabled"</code><code
197-
class="xml plain">&gt;Disabled&lt;/</code><code class="xml keyword">div</code><code
198-
class="xml plain">&gt;</code></div>
199-
<div class="line number6 index5 alt1"><code class="xml plain">&lt;</code><code
200-
class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code
201-
class="xml plain">=</code><code class="xml string">"button&nbsp;link"</code><code
202-
class="xml plain">&gt;Link&lt;/</code><code class="xml keyword">div</code><code
203-
class="xml plain">&gt;</code></div>
204-
<div class="line number7 index6 alt2"><code class="xml plain">&lt;</code><code
205-
class="xml keyword">div</code>&nbsp;<code class="xml color1">class</code><code
206-
class="xml plain">=</code><code class="xml string">"button&nbsp;secondary"</code><code
207-
class="xml plain">&gt;Secondary&lt;/</code><code class="xml keyword">div</code><code
208-
class="xml plain">&gt;</code></div>
209-
</div>
210-
</td>
211-
</tr>
212-
</tbody>
213-
</table>
214-
</div>
215-
</div>
216169

217170
<!-- BUTTON SIZES -->
218171
<div class="content">
@@ -261,13 +214,13 @@ <h3 class="bordered">
261214
</div>
262215
<div class="buttons secondary">
263216
<button class="button">
264-
Secondary Button
217+
Secondary
265218
</button>
266219
<a href="javascript:" class="button active">
267-
Secondary Button
220+
Secondary
268221
</a>
269222
<button class="button">
270-
Secondary Button
223+
Secondary
271224
</button>
272225
</div>
273226
<p></p>
@@ -648,11 +601,11 @@ <h3 class="bordered">
648601
A button can be used to trigger a dropdown menu.
649602
</p>
650603
<div class="panel pure">
651-
<div class="content bg-grid align center">
604+
<div class="content">
652605
<div class="buttons">
653-
<div class="dropdown small">
606+
<div class="dropdown">
654607
<a tabindex="0" class="button toggle">
655-
Dropdown <span class="material-icons">keyboard_arrow_down</span>
608+
Default Dropdown <span class="material-icons">keyboard_arrow_down</span>
656609
</a>
657610
<ul class="menu">
658611
<li class="item"><a href="#">Dropdown 1</a></li>
@@ -662,8 +615,8 @@ <h3 class="bordered">
662615
</div>
663616
</div>
664617
<div class="buttons secondary small ml-20">
665-
<div class="button">Dropdown</div>
666-
<div class="dropdown right small">
618+
<div class="button">Small Dropdown</div>
619+
<div class="dropdown right">
667620
<a tabindex="0" class="button toggle">
668621
<span class="material-icons">keyboard_arrow_down</span>
669622
</a>
@@ -674,12 +627,12 @@ <h3 class="bordered">
674627
</ul>
675628
</div>
676629
</div>
677-
<div class="buttons small ml-20">
678-
<div class="button">
679-
<span class="material-icons">drafts</span>
630+
<div class="buttons mini ml-20">
631+
<div class="button primary">
632+
<span class="material-icons mr-5">drafts</span> Mini
680633
</div>
681634
<div class="button inactive">254</div>
682-
<div class="dropdown right top small">
635+
<div class="dropdown right top">
683636
<a tabindex="0" class="button toggle">
684637
<span class="material-icons">keyboard_arrow_up</span>
685638
</a>
@@ -690,8 +643,24 @@ <h3 class="bordered">
690643
</ul>
691644
</div>
692645
</div>
693-
<div class="buttons small ml-20">
694-
<div class="dropdown small">
646+
<div class="buttons mini ml-20">
647+
<div class="dropdown">
648+
<a tabindex="0" class="button toggle">
649+
<span class="material-icons">keyboard_arrow_down</span>
650+
</a>
651+
<ul class="menu">
652+
<li class="item"><a href="#">Dropdown 1</a></li>
653+
<li class="item"><a href="#">Dropdown 2</a></li>
654+
<li class="item"><a href="#">Dropdown 3</a></li>
655+
</ul>
656+
</div>
657+
<div class="button inactive">254</div>
658+
<div class="button secondary">
659+
<span class="material-icons">drafts</span>
660+
</div>
661+
</div>
662+
<div class="buttons primary mini ml-20">
663+
<div class="dropdown">
695664
<a tabindex="0" class="button toggle">
696665
<span class="material-icons">keyboard_arrow_down</span>
697666
</a>

‎src/Components/Tabnav/Tabnav.scss

+10-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*****************************************************
1+
/*****************************************************
22
PUNICA CSS > COMPONENTS : TABNAV *********************/
33

44
@if $components-tabnav {
@@ -23,21 +23,26 @@ PUNICA CSS > COMPONENTS : TABNAV *********************/
2323
border-radius: 0 !important;
2424
margin-bottom: -$tabnav-border-bottom-width;
2525
line-height: initial;
26-
font-weight: initial;
2726
font-size: $tabnav-item-button-size;
28-
transition: border-bottom-color .15s;
27+
font-weight: initial;
28+
transition: border-bottom-color, color .2s;
29+
color: darken($main-grey-color, 5%);
2930
&:hover {
3031
color: darken($main-font-color, 8%);
3132
border-bottom-color: darken($main-secondary-bg, 16%);
32-
transition: border-bottom-color .15s;
33+
transition: border-bottom-color, color .2s;
34+
}
35+
&.#{$button-class-disabled} {
36+
opacity: .45;
3337
}
3438
&.#{$tabnav-active} {
3539
color: $primary-color;
3640
border-bottom-color: $primary-color;
41+
font-weight: 700;
3742
i, [class^="material-icons"] {
3843
color: initial;
3944
}
4045
}
4146
}
4247
}
43-
}
48+
}

‎src/Elements/Button/Button.scss

+25-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*****************************************************
1+
/*****************************************************
22
PUNICA CSS > ELEMENTS : BUTTON ***********************/
33
@import "mixins";
44

@@ -45,18 +45,23 @@ PUNICA CSS > ELEMENTS : BUTTON ***********************/
4545
}
4646
&:focus {
4747
background: $button-bg-color;
48-
> i,
48+
> i,
4949
> [class^="material-icons"] {
5050
color: $primary-color;
5151
}
5252
}
5353
&.#{$button-class-active} {
54-
color: $main-invert-color;
54+
color: $button-text-color;
5555
background: $button-bg-active;
5656
background-image: $button-bg-hover-image;
5757
text-decoration: none;
58+
&:focus,
59+
&:hover {
60+
color: $button-hover-text-color;
61+
background: $button-bg-hover;
62+
}
5863
i, [class^="material-icons"] {
59-
color: $main-invert-color;
64+
color: $button-text-color;
6065
text-shadow: $button-icon-shadow;
6166
}
6267
}
@@ -73,7 +78,7 @@ PUNICA CSS > ELEMENTS : BUTTON ***********************/
7378
&.#{$theme-name} {
7479
@include button-types($theme-color);
7580
}
76-
}
81+
}
7782
}
7883
// Button Link
7984
@include link-button();
@@ -152,6 +157,17 @@ PUNICA CSS > ELEMENTS : BUTTON ***********************/
152157
@include button-sizes(true);
153158
}
154159

160+
// button styles
161+
@if $elements-button-types {
162+
@each $theme-name, $theme-color in $button-styles {
163+
&.#{$theme-name} > .#{$button-class},
164+
&.#{$theme-name} > .#{$dropdown-name} > .#{$button-class} {
165+
@include button-types($theme-color);
166+
border: $button-border-width solid darken($theme-color, 6%);
167+
}
168+
}
169+
}
170+
155171
// Button Link
156172
@include link-button();
157173

@@ -160,14 +176,14 @@ PUNICA CSS > ELEMENTS : BUTTON ***********************/
160176
@if $elements-button-dropdown {
161177
.#{$dropdown-name}:last-child:not(:first-child),
162178
.#{$dropdown-name}:last-child:not(:first-child) > .#{$button-class} {
163-
border-bottom-left-radius: 0;
179+
border-bottom-left-radius: 0;
164180
border-top-left-radius: 0;
165181
margin-left: -1px;
166182
}
167183
.#{$dropdown-name}:last-child,
168184
.#{$dropdown-name}:last-child > .#{$button-class}:first-child,
169185
.#{$dropdown-name}:last-child > .#{$button-class}:last-child {
170-
border-bottom-right-radius: $button-border-radius;
186+
border-bottom-right-radius: $button-border-radius;
171187
border-top-right-radius: $button-border-radius;
172188
}
173189
.#{$dropdown-name}:not(:first-child):not(:last-child) > .#{$button-class} {
@@ -216,7 +232,7 @@ PUNICA CSS > ELEMENTS : BUTTON ***********************/
216232
.#{$menu-name}:hover {
217233
display: block;
218234
}
219-
// if button groups is enable
235+
// if button groups is enable
220236
@if $elements-button-group {
221237
.#{$button-class-group} {
222238
.#{$dropdown-toggle}:nth-last-child(2) {
@@ -236,4 +252,4 @@ PUNICA CSS > ELEMENTS : BUTTON ***********************/
236252
//
237253
}
238254
}
239-
}
255+
}

0 commit comments

Comments
 (0)