codefabrik-styleguide 0.1.12 → 0.1.13
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.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/README.md +0 -2
- data/lib/codefabrik/styleguide/version.rb +1 -1
- data/vendor/assets/stylesheets/codefabrik/styleguide/02_layout.scss +9 -5
- data/vendor/assets/stylesheets/codefabrik/styleguide/04_typo.scss +6 -2
- data/vendor/assets/stylesheets/codefabrik/styleguide/05_buttons.scss +10 -5
- data/vendor/assets/stylesheets/codefabrik/styleguide/06_tables.scss +25 -5
- data/vendor/assets/stylesheets/codefabrik/styleguide/07_forms.scss +1 -1
- data/vendor/assets/stylesheets/codefabrik/styleguide/08_components.scss +26 -3
- data/vendor/assets/stylesheets/codefabrik/styleguide/09_colors.scss +11 -0
- data/vendor/assets/stylesheets/codefabrik/styleguide.scss +21 -5
- data/views/index.erb +34 -0
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0aa2182a9a3fadb921a4ea5c1da23d96852e875712a509edc643d4b1455504f1
|
|
4
|
+
data.tar.gz: '0618e440b1c133db6f0ebb0c511f7d2c6cf78db44984908e79c573b28f1842e2'
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c118d78fbe37dbb51e3dd5d8b8b0f13d5b17f795187cfcee982338dcc54f805d20ca7e15e82c7b02375496bc84403c5049dad945390e0bda2fc4fb4476f4e3e9
|
|
7
|
+
data.tar.gz: 171c062498328ca33b76f6e5430fea0eee0e395c5f46a9ce8ab3c348d7dfa56ecdcc37c31bd801826759d50caa46acdfdff6499bb268aec0374ca713fcc2599f
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
|
@@ -33,8 +33,6 @@ The possible overrides are the following:
|
|
|
33
33
|
$media_breakpoint: 75rem !default;
|
|
34
34
|
$primary_color: #A0E7E5 !default;
|
|
35
35
|
$text_on_primary_color: black !default;
|
|
36
|
-
$secondary_color: #FFAEBC !default;
|
|
37
|
-
$text_on_secondary_color: black !default;
|
|
38
36
|
$border_color: #8f8f9d !default;
|
|
39
37
|
$default_distance: 1rem !default;
|
|
40
38
|
$background_color: #FDFDFD !default;
|
|
@@ -2,13 +2,13 @@ body {
|
|
|
2
2
|
background-color: $background_color;
|
|
3
3
|
|
|
4
4
|
@media (prefers-color-scheme: dark) {
|
|
5
|
-
background-color: $
|
|
5
|
+
background-color: map-get($dark, 100);
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
header, footer {
|
|
10
10
|
width: 100%;
|
|
11
|
-
background-color: $
|
|
11
|
+
background-color: map-get($primary, 400);
|
|
12
12
|
color: $text_on_primary_color;
|
|
13
13
|
padding: $default_distance;
|
|
14
14
|
|
|
@@ -16,6 +16,10 @@ header, footer {
|
|
|
16
16
|
flex-direction: column;
|
|
17
17
|
align-items: center;
|
|
18
18
|
|
|
19
|
+
@media (prefers-color-scheme: dark) {
|
|
20
|
+
background-color: map-get($dark, 400);
|
|
21
|
+
}
|
|
22
|
+
|
|
19
23
|
.logo {
|
|
20
24
|
height: 3rem;
|
|
21
25
|
}
|
|
@@ -85,13 +89,13 @@ header, footer {
|
|
|
85
89
|
margin: 0;
|
|
86
90
|
|
|
87
91
|
&.active {
|
|
88
|
-
border-left: 0.25 * $default_distance solid $
|
|
92
|
+
border-left: 0.25 * $default_distance solid map-get($primary, 100);
|
|
89
93
|
border-bottom: none;
|
|
90
|
-
background-color: $
|
|
94
|
+
background-color: map-get($primary, 400);
|
|
91
95
|
}
|
|
92
96
|
|
|
93
97
|
&:hover {
|
|
94
|
-
background-color: $
|
|
98
|
+
background-color: map-get($primary, 400);
|
|
95
99
|
}
|
|
96
100
|
}
|
|
97
101
|
}
|
|
@@ -22,10 +22,14 @@ li {
|
|
|
22
22
|
|
|
23
23
|
a {
|
|
24
24
|
line-height: inherit;
|
|
25
|
-
color: $
|
|
25
|
+
color: map-get($primary, 100);
|
|
26
26
|
font-size: 1 * $default_distance;
|
|
27
27
|
text-underline-offset: $default_distance * 0.15;
|
|
28
28
|
text-decoration-thickness: $default_distance * 0.08;
|
|
29
|
+
|
|
30
|
+
@media (prefers-color-scheme: dark) {
|
|
31
|
+
color: map-get($primary, 500);
|
|
32
|
+
}
|
|
29
33
|
}
|
|
30
34
|
|
|
31
35
|
h1, h2, h3, h4, h5, h6 {
|
|
@@ -105,7 +109,7 @@ blockquote {
|
|
|
105
109
|
}
|
|
106
110
|
|
|
107
111
|
.backdrop {
|
|
108
|
-
background-color: $
|
|
112
|
+
background-color: map-get($primary, 100);
|
|
109
113
|
color: $text_on_primary_color;
|
|
110
114
|
}
|
|
111
115
|
|
|
@@ -4,16 +4,21 @@
|
|
|
4
4
|
border: none;
|
|
5
5
|
padding: 0.8em 1em;
|
|
6
6
|
cursor: pointer;
|
|
7
|
-
background-color: $
|
|
7
|
+
background-color: map-get($primary, 100);
|
|
8
8
|
color: $text_on_primary_color;
|
|
9
9
|
font-size: 0.8 * $default_distance;
|
|
10
10
|
|
|
11
|
+
@media (prefers-color-scheme: dark) {
|
|
12
|
+
background-color: map-get($primary, 500);
|
|
13
|
+
color: black;
|
|
14
|
+
}
|
|
15
|
+
|
|
11
16
|
&:hover {
|
|
12
|
-
background-color:
|
|
17
|
+
background-color: map-get($primary, 200);
|
|
13
18
|
}
|
|
14
19
|
|
|
15
20
|
&:active {
|
|
16
|
-
background-color:
|
|
21
|
+
background-color: map-get($primary, 300);
|
|
17
22
|
}
|
|
18
23
|
|
|
19
24
|
&.small {
|
|
@@ -28,8 +33,8 @@
|
|
|
28
33
|
|
|
29
34
|
&.outline {
|
|
30
35
|
background-color: transparent;
|
|
31
|
-
border: 1px solid $
|
|
32
|
-
color: $
|
|
36
|
+
border: 1px solid map-get($primary, 100);
|
|
37
|
+
color: map-get($primary, 100);
|
|
33
38
|
|
|
34
39
|
&:hover {
|
|
35
40
|
background-color: scale-color(white, $lightness: -5%);
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
.table {
|
|
2
2
|
width: 100%;
|
|
3
3
|
display: table;
|
|
4
|
-
border-bottom: 2px solid $
|
|
4
|
+
border-bottom: 2px solid map-get($primary, 500);
|
|
5
5
|
overflow-x: scroll;
|
|
6
6
|
|
|
7
|
+
@media (prefers-color-scheme: dark) {
|
|
8
|
+
border-bottom: 2px solid map-get($dark, 300);
|
|
9
|
+
}
|
|
10
|
+
|
|
7
11
|
&:not(:first-child) {
|
|
8
12
|
margin-top: 1rem;
|
|
9
13
|
}
|
|
@@ -12,7 +16,11 @@
|
|
|
12
16
|
display: table-header-group;
|
|
13
17
|
position: sticky;
|
|
14
18
|
top: 0;
|
|
15
|
-
background-color: $
|
|
19
|
+
background-color: map-get($primary, 500);
|
|
20
|
+
|
|
21
|
+
@media (prefers-color-scheme: dark) {
|
|
22
|
+
background-color: map-get($dark, 300);
|
|
23
|
+
}
|
|
16
24
|
|
|
17
25
|
.tr {
|
|
18
26
|
display: table-row;
|
|
@@ -33,21 +41,33 @@
|
|
|
33
41
|
display: table-row;
|
|
34
42
|
|
|
35
43
|
&:nth-child(2n+1) {
|
|
36
|
-
background: $background_color;
|
|
44
|
+
background-color: $background_color;
|
|
45
|
+
|
|
46
|
+
@media (prefers-color-scheme: dark) {
|
|
47
|
+
background-color: map-get($dark, 200);
|
|
48
|
+
}
|
|
37
49
|
}
|
|
38
50
|
|
|
39
51
|
.td {
|
|
40
52
|
display: table-cell;
|
|
41
53
|
padding: 0.5 * $default_distance;
|
|
42
|
-
border-right: 2px solid $
|
|
54
|
+
border-right: 2px solid map-get($primary, 500);
|
|
43
55
|
vertical-align: middle;
|
|
44
56
|
|
|
45
57
|
@media screen and (min-width: $media_breakpoint) {
|
|
46
58
|
padding: $default_distance;
|
|
47
59
|
}
|
|
48
60
|
|
|
61
|
+
@media (prefers-color-scheme: dark) {
|
|
62
|
+
border-right: 2px solid map-get($dark, 300);
|
|
63
|
+
}
|
|
64
|
+
|
|
49
65
|
&:first-child {
|
|
50
|
-
border-left: 2px solid $
|
|
66
|
+
border-left: 2px solid map-get($primary, 500);
|
|
67
|
+
|
|
68
|
+
@media (prefers-color-scheme: dark) {
|
|
69
|
+
border-left: 2px solid map-get($dark, 300);
|
|
70
|
+
}
|
|
51
71
|
}
|
|
52
72
|
}
|
|
53
73
|
}
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
.progress {
|
|
2
2
|
width: 100%;
|
|
3
|
-
border: 1px solid $
|
|
3
|
+
border: 1px solid map-get($primary, 100);
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.progress__inner {
|
|
7
|
-
background-color: $
|
|
7
|
+
background-color: map-get($primary, 100);
|
|
8
8
|
padding: 0.2em;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
+
.box {
|
|
12
|
+
width: 150px;
|
|
13
|
+
height: 150px;
|
|
14
|
+
}
|
|
15
|
+
|
|
11
16
|
summary {
|
|
12
17
|
cursor: pointer;
|
|
13
18
|
margin-bottom: 0.5em;
|
|
@@ -23,15 +28,23 @@ summary {
|
|
|
23
28
|
background-color: $background_color;
|
|
24
29
|
border: 2px solid transparent;
|
|
25
30
|
|
|
31
|
+
@media (prefers-color-scheme: dark) {
|
|
32
|
+
background-color: map-get($dark, 300);
|
|
33
|
+
}
|
|
34
|
+
|
|
26
35
|
a {
|
|
27
36
|
color: $text_on_primary_color;
|
|
28
37
|
text-decoration: none;
|
|
29
38
|
padding: 1rem;
|
|
30
39
|
display: block;
|
|
40
|
+
|
|
41
|
+
@media (prefers-color-scheme: dark) {
|
|
42
|
+
color: white;
|
|
43
|
+
}
|
|
31
44
|
}
|
|
32
45
|
|
|
33
46
|
&.active {
|
|
34
|
-
border: 2px solid $
|
|
47
|
+
border: 2px solid map-get($primary, 100);
|
|
35
48
|
}
|
|
36
49
|
|
|
37
50
|
&.finish {
|
|
@@ -79,6 +92,11 @@ section.card {
|
|
|
79
92
|
&[data-status=saved], &[data-status=good] {
|
|
80
93
|
border-left: 5px solid $success_color;
|
|
81
94
|
}
|
|
95
|
+
|
|
96
|
+
@media (prefers-color-scheme: dark) {
|
|
97
|
+
background-color: map-get($dark, 200);
|
|
98
|
+
border: none;
|
|
99
|
+
}
|
|
82
100
|
}
|
|
83
101
|
|
|
84
102
|
.breadcrumbs {
|
|
@@ -86,6 +104,11 @@ section.card {
|
|
|
86
104
|
border: 2px solid $border_color;
|
|
87
105
|
padding: 1rem;
|
|
88
106
|
|
|
107
|
+
@media (prefers-color-scheme: dark) {
|
|
108
|
+
background-color: map-get($dark, 300);
|
|
109
|
+
border: none;
|
|
110
|
+
}
|
|
111
|
+
|
|
89
112
|
.separator {
|
|
90
113
|
color: $border_color;
|
|
91
114
|
font-size: 0.7rem;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
$media_breakpoint: 75rem !default;
|
|
2
|
-
$primary_color: #
|
|
2
|
+
$primary_color: #2196f3 !default;
|
|
3
|
+
$dark_color: #121212 !default;
|
|
3
4
|
$text_on_primary_color: black !default;
|
|
4
|
-
$secondary_color: #FFAEBC !default;
|
|
5
|
-
$text_on_secondary_color: black !default;
|
|
6
5
|
$border_color: #8f8f9d !default;
|
|
7
6
|
$default_distance: 1rem !default;
|
|
8
7
|
$background_color: #FDFDFD !default;
|
|
@@ -11,12 +10,28 @@ $font: 'sans-serif' !default;
|
|
|
11
10
|
$font_color: #333 !default;
|
|
12
11
|
$font_color_dark: #EFEFEF !default;
|
|
13
12
|
|
|
13
|
+
$primary: (
|
|
14
|
+
100: $primary_color,
|
|
15
|
+
200: scale-color($primary_color, $lightness: 20%),
|
|
16
|
+
300: scale-color($primary_color, $lightness: 30%),
|
|
17
|
+
400: scale-color($primary_color, $lightness: 40%),
|
|
18
|
+
500: scale-color($primary_color, $lightness: 50%),
|
|
19
|
+
600: scale-color($primary_color, $lightness: 60%),
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
$dark: (
|
|
23
|
+
100: $dark_color,
|
|
24
|
+
200: scale-color($dark_color, $lightness: 10%),
|
|
25
|
+
300: scale-color($dark_color, $lightness: 20%),
|
|
26
|
+
400: scale-color($dark_color, $lightness: 30%),
|
|
27
|
+
500: scale-color($dark_color, $lightness: 40%),
|
|
28
|
+
600: scale-color($dark_color, $lightness: 50%),
|
|
29
|
+
);
|
|
30
|
+
|
|
14
31
|
$error_color: scale-color(red, $lightness: 50%);
|
|
15
32
|
$warning_color: scale-color(orange, $lightness: 50%);
|
|
16
33
|
$success_color: scale-color(green, $lightness: 20%);
|
|
17
34
|
|
|
18
|
-
$primary_color_light: scale-color($primary_color, $lightness: 50%);
|
|
19
|
-
|
|
20
35
|
@import 'styleguide/01_reset';
|
|
21
36
|
@import 'styleguide/02_layout';
|
|
22
37
|
@import 'styleguide/03_grid';
|
|
@@ -25,3 +40,4 @@ $primary_color_light: scale-color($primary_color, $lightness: 50%);
|
|
|
25
40
|
@import 'styleguide/06_tables';
|
|
26
41
|
@import 'styleguide/07_forms';
|
|
27
42
|
@import 'styleguide/08_components';
|
|
43
|
+
@import 'styleguide/09_colors';
|
data/views/index.erb
CHANGED
|
@@ -85,6 +85,40 @@
|
|
|
85
85
|
<li>Edgar Mitchell</li>
|
|
86
86
|
<li>Alan Shepard</li>
|
|
87
87
|
</ul>
|
|
88
|
+
|
|
89
|
+
<div class="table">
|
|
90
|
+
<div class="thead">
|
|
91
|
+
<div class="tr">
|
|
92
|
+
<div class="th">One</div><div class="th">Two</div><div class="th">Three</div><div class="th">Four</div>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="tbody">
|
|
96
|
+
<div class="tr">
|
|
97
|
+
<div class="td">Un</div><div class="td">Deux</div><div class="td">Trois</div><div class="td">Quatre</div>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="tr">
|
|
100
|
+
<div class="td">Uno</div><div class="td">Due</div><div class="td">Tre</div><div class="td">Quattro</div>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
<div class="grid grid-6 mt-3">
|
|
106
|
+
<div class="box bg-primary-100">primary-100</div>
|
|
107
|
+
<div class="box bg-primary-200">primary-200</div>
|
|
108
|
+
<div class="box bg-primary-300">primary-300</div>
|
|
109
|
+
<div class="box bg-primary-400">primary-400</div>
|
|
110
|
+
<div class="box bg-primary-500">primary-500</div>
|
|
111
|
+
<div class="box bg-primary-600">primary-600</div>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<div class="grid grid-6 mt-3">
|
|
115
|
+
<div class="box bg-dark-100">dark-100</div>
|
|
116
|
+
<div class="box bg-dark-200">dark-200</div>
|
|
117
|
+
<div class="box bg-dark-300">dark-300</div>
|
|
118
|
+
<div class="box bg-dark-400">dark-400</div>
|
|
119
|
+
<div class="box bg-dark-500">dark-500</div>
|
|
120
|
+
<div class="box bg-dark-600">dark-600</div>
|
|
121
|
+
</div>
|
|
88
122
|
</main>
|
|
89
123
|
|
|
90
124
|
<footer class="mt-3">
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: codefabrik-styleguide
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.13
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Lukas_Skywalker
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2023-
|
|
11
|
+
date: 2023-12-28 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: dartsass-rails
|
|
@@ -94,6 +94,7 @@ files:
|
|
|
94
94
|
- vendor/assets/stylesheets/codefabrik/styleguide/06_tables.scss
|
|
95
95
|
- vendor/assets/stylesheets/codefabrik/styleguide/07_forms.scss
|
|
96
96
|
- vendor/assets/stylesheets/codefabrik/styleguide/08_components.scss
|
|
97
|
+
- vendor/assets/stylesheets/codefabrik/styleguide/09_colors.scss
|
|
97
98
|
- views/card.erb
|
|
98
99
|
- views/index.erb
|
|
99
100
|
homepage: https://code-fabrik.ch
|