Skip to content
This repository was archived by the owner on Nov 10, 2022. It is now read-only.

Commit 390aa9e

Browse files
ALPIXELMaikiALPIXELMaiki
committed
v4.3.0
1 parent 7eb1263 commit 390aa9e

18 files changed

+597
-642
lines changed

‎CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# ChuckCSS Changelog
22

3+
## 4.3.0
4+
* Changed :
5+
* Alerts design
6+
* Icons Duotone for FontAwesome (animations and colors settings)
7+
* Titles margins in settings
8+
39
##4.2.0
410
* Added:
511
* Change cursor when modal is open

‎chuckcss/components/alerts.less

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -10,37 +10,45 @@
1010
1111
<div class="alert alert-{type}">
1212
<button data-close-alert role="button"><i class="fas fa-times"></i></button>
13-
<i class="fab fa-apple"></i>
13+
<i class="fab fa-apple"></i>
1414
<div>
1515
<strong>Primary color</strong> alert with <strong>FontAwesome icon</strong>.
1616
</div>
1717
</div>
1818
*/
19-
._setAlertStyles(@textColor, @borderColor) {
20-
border-top: @alert[btw] solid @borderColor;
19+
._setAlertStyles(@textColor, @borderColor, @backgroundColor) {
2120
color: @textColor;
21+
background: @backgroundColor;
22+
border:unit(@alert[bw],px) solid @borderColor;
2223

2324
p,div,ul,
24-
[data-close-alert],
2525
a {
2626
color: @textColor;
27-
27+
2828
&.btn {
2929
text-decoration: none;
3030
._btn(@textColor);
3131
color: white;
3232
}
3333
}
34+
35+
[data-close-alert] {
36+
color: @textColor;
37+
}
3438
}
3539

3640
.alert {
3741
display: flex;
38-
align-items: center;
3942
margin: @alert[ma];
4043
font-size: @alert[fs];
4144
border-radius:unit(@alert[br],px);
4245
background-color: white;
43-
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2);
46+
box-shadow: 0px 2px 5px 0px @alert[bs];
47+
position: relative;
48+
49+
&[data-closable] {
50+
cursor: url("data:image/svg+xml,%3Csvg width='19' height='19' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.514.535l-6.42 6.42L2.677.536a1.517 1.517 0 00-2.14 0 1.517 1.517 0 000 2.14l6.42 6.419-6.42 6.419a1.517 1.517 0 000 2.14 1.517 1.517 0 002.14 0l6.419-6.42 6.419 6.42a1.517 1.517 0 002.14 0 1.517 1.517 0 000-2.14l-6.42-6.42 6.42-6.418a1.517 1.517 0 000-2.14 1.516 1.516 0 00-2.14 0z' fill='000000' fill-rule='nonzero'/%3E%3C/svg%3E"), auto;
51+
}
4452

4553
// Alerts content
4654
& > div {
@@ -64,56 +72,45 @@
6472
// Alerts main left icon
6573
& > i {
6674
padding: @alert[pa];
75+
padding-right: 0;
6776
font-size:3rem;
6877
}
6978

7079
// Alerts close button
7180
[data-close-alert] {
81+
position: absolute;
82+
top: 0;
83+
right: 0;
7284
border:0;
7385
cursor:pointer;
74-
padding: @alert[pa];
86+
padding: @alert[pa] / 2;
7587
opacity: 0.4;
7688
order:2;
7789
background-color: transparent;
7890
._transition;
7991

80-
&:hover {
81-
opacity: 1;
82-
}
83-
8492
i {
85-
._reset;
93+
display: block;
94+
width: 20px;
95+
height: 20px;
96+
}
8697

87-
&:before {
88-
._reset;
89-
font-size: @text[fs]*1.5;
90-
}
98+
&:hover {
99+
opacity: 1;
91100
}
92101
}
93102

94103
/* Alerts types */
95-
&-primary {
96-
._setAlertStyles(@alert[pr-tc], @alert[pr-bc]);
97-
}
98104
&-info {
99-
._setAlertStyles(@alert[in-tc], @alert[in-bc]);
105+
._setAlertStyles(@alert[in-tc], @alert[in-bc], @alert[in-bg]);
100106
}
101107
&-warning {
102-
._setAlertStyles(@alert[wa-tc], @alert[wa-bc]);
108+
._setAlertStyles(@alert[wa-tc], @alert[wa-bc], @alert[wa-bg]);
103109
}
104110
&-error {
105-
._setAlertStyles(@alert[er-tc], @alert[er-bc]);
111+
._setAlertStyles(@alert[er-tc], @alert[er-bc], @alert[er-bg]);
106112
}
107113
&-success {
108-
._setAlertStyles(@alert[su-tc], @alert[su-bc]);
114+
._setAlertStyles(@alert[su-tc], @alert[su-bc], @alert[su-bg]);
109115
}
110-
111-
// Screens > 767px
112-
._media-s-up({
113-
114-
// Alerts main left icon
115-
& > i {
116-
font-size: 6rem;
117-
}
118-
});
119-
}
116+
}

‎chuckcss/elements/titles.less

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ h1,
1212
font-size: @h1[fs];
1313
line-height: @h1[lh];
1414
font-weight: @h1[fw];
15+
margin: @h1[ma];
1516

1617
// screens >= 359px
1718
._media-xs-up({ font-size: @h1[fs-s]; });
@@ -32,6 +33,7 @@ h2,
3233
font-size: @h2[fs];
3334
line-height: @h2[lh];
3435
font-weight: @h2[fw];
36+
margin: @h2[ma];
3537

3638
// screens >= 359px
3739
._media-xs-up({ font-size: @h2[fs-s]; });
@@ -52,6 +54,7 @@ h3,
5254
font-size: @h3[fs];
5355
line-height: @h3[lh];
5456
font-weight: @h3[fw];
57+
margin: @h3[ma];
5558

5659
// screens >= 359px
5760
._media-xs-up({ font-size: @h3[fs-s]; });
@@ -72,6 +75,7 @@ h4,
7275
font-size: @h4[fs];
7376
line-height: @h4[lh];
7477
font-weight: @h4[fw];
78+
margin: @h4[ma];
7579

7680
// screens >= 359px
7781
._media-xs-up({ font-size: @h4[fs-s]; });
@@ -92,6 +96,7 @@ h5,
9296
font-size: @h5[fs];
9397
line-height: @h5[lh];
9498
font-weight: @h5[fw];
99+
margin: @h5[ma];
95100

96101
// screens >= 359px
97102
._media-xs-up({ font-size: @h5[fs-s]; });
@@ -112,6 +117,7 @@ h6,
112117
font-size: @h6[fs];
113118
line-height: @h6[lh];
114119
font-weight: @h6[fw];
120+
margin: @h6[ma];
115121

116122
// screens >= 359px
117123
._media-xs-up({
@@ -142,11 +148,9 @@ h3, .h3-like,
142148
h4, .h4-like,
143149
h5, .h5-like,
144150
h6, .h6-like {
145-
margin: 0;
146-
147151
small {
148152
font-weight: @subtitle[fw];
149153
color: @subtitle[mc];
150154
font-size: @subtitle[fs];
151155
}
152-
}
156+
}

‎chuckcss/front-light.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! ChuckCSS v4.2.0 */
1+
/*! ChuckCSS v4.3.0 */
22
/*
33
== ChuckCSS Framework : Light version ==
44
@What: A mobile-first, responsive CSS framework, compiled with LESS and Autoprefixer, based on FlexBox grids

‎chuckcss/front.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! ChuckCSS v4.2.0 */
1+
/*! ChuckCSS v4.3.0 */
22
/*
33
== ChuckCSS Framework ==
44
@What: A mobile-first, responsive CSS framework, compiled with LESS and Autoprefixer, based on FlexBox grids

‎chuckcss/main/animations.less

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@
2828
@description: animate spinner loader
2929
***** */
3030
@keyframes loaderSpinner {
31-
0% {
32-
._rotate(0deg)
31+
0% {
32+
._rotate(0deg)
3333
}
34-
100% {
35-
._rotate(360deg)
34+
100% {
35+
._rotate(360deg)
3636
}
3737
}
3838

@@ -92,3 +92,17 @@ img[data-loaded="true"],
9292
opacity: 1;
9393
}
9494
}
95+
96+
97+
/* *****
98+
@name: drawIcon
99+
@description: Drawing animation for FontAwesome icons when .animated class is added to the icon
100+
***** */
101+
@keyframes drawIcon {
102+
from {
103+
stroke-dashoffset: 1;
104+
}
105+
to {
106+
stroke-dashoffset: 0;
107+
}
108+
}

‎chuckcss/main/functions.less

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@
2727
@Generator: http://www.colorzilla.com/gradient-editor/
2828
***** */
2929
._bg-vertical(@from:#000, @to:#fff) {
30-
background: @from; /* Old browsers */
31-
background: linear-gradient(to bottom, @from 0%, @to 100%); /* W3C */
30+
background: @from; /* Old browsers */
31+
background: linear-gradient(to bottom, @from 0%, @to 100%); /* W3C */
3232
}
3333
._bg-horizontal(@from:#000, @to:#fff) {
34-
background: @from; /* Old browsers */
35-
background: linear-gradient(to right, @from 0%, @to 100%); /* W3C */
34+
background: @from; /* Old browsers */
35+
background: linear-gradient(to right, @from 0%, @to 100%); /* W3C */
3636
}
3737
/* *****
3838
@name: ._clearfix

‎chuckcss/main/icons.less

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,58 @@
22
== FONTAWESOME ==
33
*/
44
// Icons placement
5+
.fa-thin,
6+
.fa-light,
7+
.fa-regular,
8+
.fa-solid,
9+
.fa-duotone,
10+
.fa-brand,
511
.fa,
612
.far,
713
.fal,
814
.fas,
915
.fab,
10-
[class*="ion-"] {
16+
.fad {
1117
// Add a small margin to the right
1218
&.icon-left {
13-
margin-right: @icon[mal];
19+
margin-right: #icon.margin[left];
1420
}
1521

1622
// Add a small margin to the left
1723
&.icon-right {
18-
margin-left: @icon[mar];
24+
margin-left: #icon.margin[right];
25+
}
26+
27+
// Animated drawing icon
28+
&.animated {
29+
path {
30+
fill: transparent;
31+
stroke-dasharray: 1;
32+
stroke-dashoffset: 1;
33+
stroke: #000000;
34+
stroke-width: 10;
35+
animation: drawIcon 4s ease-in-out forwards;
36+
}
37+
}
38+
}
39+
40+
41+
// FontAwesome SVG elements
42+
.fa-duotone {
43+
--fa-primary-opacity: #icon.duotone-theme[fa-primary-opacity];
44+
--fa-secondary-opacity: #icon.duotone-theme[fa-secondary-opacity];
45+
--fa-primary-color: #icon.duotone-theme[fa-primary-color];
46+
--fa-secondary-color: #icon.duotone-theme[fa-secondary-color];
47+
48+
.fa-primary,
49+
.fa-secondary {
50+
._transition;
51+
}
52+
53+
&:hover {
54+
--fa-primary-opacity: #icon.duotone-theme-hover[fa-primary-opacity];
55+
--fa-secondary-opacity: #icon.duotone-theme-hover[fa-secondary-opacity];
56+
--fa-primary-color: #icon.duotone-theme-hover[fa-primary-color];
57+
--fa-secondary-color: #icon.duotone-theme-hover[fa-secondary-color];
1958
}
2059
}

0 commit comments

Comments
 (0)