claritas-web-framework 6.0.0-alpha-13 → 6.0.0-alpha-14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.html +4 -16
- package/package.json +4 -4
- package/scss/mixins/_button.scss +32 -2
- package/scss/modules/_button.scss +23 -5
package/index.html
CHANGED
|
@@ -8,21 +8,9 @@
|
|
|
8
8
|
</head>
|
|
9
9
|
|
|
10
10
|
<body>
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<label class="form--label" for="exampleFile1"
|
|
16
|
-
>Choose your file...</label
|
|
17
|
-
>
|
|
18
|
-
</div>
|
|
19
|
-
</div>
|
|
20
|
-
|
|
21
|
-
<div class="form--field">
|
|
22
|
-
<label class="form--label" for="exampleFile2">Choose your file...</label>
|
|
23
|
-
<div class="form--control">
|
|
24
|
-
<input type="file" id="exampleFile2" name="exampleFile2" />
|
|
25
|
-
</div>
|
|
26
|
-
</div>
|
|
11
|
+
<button class="button button--link button--danger">Click me!</button>
|
|
12
|
+
<button class="button button--unstyled button--danger">Click me!</button>
|
|
13
|
+
<button class="button button--outline button--danger">Click me!</button>
|
|
14
|
+
<button class="button button--danger">Click me!</button>
|
|
27
15
|
</body>
|
|
28
16
|
</html>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "claritas-web-framework",
|
|
3
|
-
"version": "6.0.0-alpha-
|
|
4
|
-
"updated": "
|
|
3
|
+
"version": "6.0.0-alpha-14",
|
|
4
|
+
"updated": "27/07/2022",
|
|
5
5
|
"description": "The CSS framework built for Claritas front end.",
|
|
6
6
|
"main": "index.js",
|
|
7
7
|
"scripts": {
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
"postcss-preset-env": "^7.7.2",
|
|
35
35
|
"postcss-scss": "^4.0.4",
|
|
36
36
|
"prettier": "^2.7.1",
|
|
37
|
-
"sass": "^1.
|
|
37
|
+
"sass": "^1.54.0",
|
|
38
38
|
"sass-loader": "^13.0.2",
|
|
39
|
-
"webpack": "^5.
|
|
39
|
+
"webpack": "^5.74.0",
|
|
40
40
|
"webpack-cli": "^4.10.0",
|
|
41
41
|
"webpack-dev-server": "^4.9.3"
|
|
42
42
|
}
|
package/scss/mixins/_button.scss
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
color: $hover-color;
|
|
37
37
|
@include gradient-bg($hover-background);
|
|
38
38
|
|
|
39
|
-
&:not(.button--
|
|
39
|
+
&:not(.button--unstyled) {
|
|
40
40
|
box-shadow: 0 0 0 $button-focus-width rgba(mix($color, $background, 15%), 0.5);
|
|
41
41
|
}
|
|
42
42
|
}
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
@mixin button-
|
|
108
|
+
@mixin button-unstyled-variant(
|
|
109
109
|
$color,
|
|
110
110
|
$color-hover: shift-color($color, $link-shade-percentage),
|
|
111
111
|
$active-color: shade-color($color, $link-shade-percentage)
|
|
@@ -139,6 +139,36 @@
|
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
141
|
|
|
142
|
+
@mixin button-link-variant(
|
|
143
|
+
$color,
|
|
144
|
+
$color-hover: shift-color($color, $link-shade-percentage),
|
|
145
|
+
$active-color: shade-color($color, $link-shade-percentage)
|
|
146
|
+
) {
|
|
147
|
+
color: $color;
|
|
148
|
+
border-color: transparent;
|
|
149
|
+
background-color: transparent;
|
|
150
|
+
|
|
151
|
+
&:hover {
|
|
152
|
+
color: $color-hover;
|
|
153
|
+
background-color: rgba($color, 0.1);
|
|
154
|
+
border-color: transparent;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
&:active,
|
|
158
|
+
&.active,
|
|
159
|
+
&.dropdown-toggle.show {
|
|
160
|
+
color: $active-color;
|
|
161
|
+
background-color: rgba($color, 0.1);
|
|
162
|
+
border-color: transparent;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
&:disabled,
|
|
166
|
+
&.disabled {
|
|
167
|
+
color: $color;
|
|
168
|
+
background-color: transparent;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
142
172
|
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
|
143
173
|
padding: $padding-y $padding-x;
|
|
144
174
|
@include font-size($font-size);
|
|
@@ -45,12 +45,18 @@
|
|
|
45
45
|
&.button--unstyled {
|
|
46
46
|
background-color: transparent;
|
|
47
47
|
border-color: transparent;
|
|
48
|
+
|
|
49
|
+
&:hover {
|
|
50
|
+
color: shade-color($body-color, 20%);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&.button--unstyled {
|
|
48
55
|
box-shadow: none;
|
|
49
56
|
text-decoration: $link-decoration;
|
|
50
57
|
|
|
51
58
|
&:hover {
|
|
52
59
|
text-decoration: $link-hover-decoration;
|
|
53
|
-
color: shade-color($body-color, 20%);
|
|
54
60
|
}
|
|
55
61
|
|
|
56
62
|
&:active,
|
|
@@ -61,6 +67,12 @@
|
|
|
61
67
|
}
|
|
62
68
|
}
|
|
63
69
|
|
|
70
|
+
&.button--link {
|
|
71
|
+
&:hover {
|
|
72
|
+
background-color: rgba($body-color, 0.1);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
64
76
|
&.button--unstyled {
|
|
65
77
|
padding: 0;
|
|
66
78
|
}
|
|
@@ -92,10 +104,13 @@
|
|
|
92
104
|
@include button-outline-variant($value);
|
|
93
105
|
}
|
|
94
106
|
|
|
95
|
-
&.button--link
|
|
96
|
-
&.button--unstyled {
|
|
107
|
+
&.button--link {
|
|
97
108
|
@include button-link-variant($value);
|
|
98
109
|
}
|
|
110
|
+
|
|
111
|
+
&.button--unstyled {
|
|
112
|
+
@include button-unstyled-variant($value);
|
|
113
|
+
}
|
|
99
114
|
}
|
|
100
115
|
}
|
|
101
116
|
|
|
@@ -107,10 +122,13 @@
|
|
|
107
122
|
@include button-outline-variant($value);
|
|
108
123
|
}
|
|
109
124
|
|
|
110
|
-
&.button--link
|
|
111
|
-
&.button--unstyled {
|
|
125
|
+
&.button--link {
|
|
112
126
|
@include button-link-variant($value);
|
|
113
127
|
}
|
|
128
|
+
|
|
129
|
+
&.button--unstyled {
|
|
130
|
+
@include button-unstyled-variant($value);
|
|
131
|
+
}
|
|
114
132
|
}
|
|
115
133
|
}
|
|
116
134
|
|