murb_design_system 0.1.0 → 0.2.0
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/.ruby-version +1 -0
- data/CHANGELOG.md +23 -1
- data/Gemfile +1 -0
- data/Gemfile.lock +61 -20
- data/README.md +16 -6
- data/_navigation.html.erb +15 -0
- data/basis.html.erb +340 -0
- data/bin/build +41 -0
- data/bin/watch +25 -0
- data/blocks.html.erb +161 -0
- data/dist/.gitkeep +0 -0
- data/dist/GLOBE---1850-2024-MO.png +0 -0
- data/doc/calculations.ods +0 -0
- data/html2canvas.min.js +20 -0
- data/index.html.erb +127 -0
- data/layout.html.erb +84 -0
- data/lib/murb_design_system/version.rb +1 -1
- data/navigation.html.erb +80 -0
- data/print.html.erb +76 -0
- data/promo.html.erb +247 -0
- data/vendor/assets/stylesheets/article.scss +115 -0
- data/vendor/assets/stylesheets/buttons.scss +64 -35
- data/vendor/assets/stylesheets/cards.scss +4 -8
- data/vendor/assets/stylesheets/devise.scss +1 -0
- data/vendor/assets/stylesheets/forms.scss +93 -15
- data/vendor/assets/stylesheets/grid.scss +78 -0
- data/vendor/assets/stylesheets/html.scss +325 -13
- data/vendor/assets/stylesheets/invoice.scss +10 -2
- data/vendor/assets/stylesheets/list-variants.scss +83 -0
- data/vendor/assets/stylesheets/meta.scss +30 -0
- data/vendor/assets/stylesheets/microformats.scss +39 -0
- data/vendor/assets/stylesheets/navigation.scss +75 -7
- data/vendor/assets/stylesheets/notice.scss +63 -5
- data/vendor/assets/stylesheets/print.scss +53 -5
- data/vendor/assets/stylesheets/tables.scss +39 -1
- data/vendor/assets/stylesheets/utils.scss +54 -5
- data/vendor/assets/stylesheets/variables.scss +55 -13
- data/vendor/assets/stylesheets/works.scss +3 -3
- metadata +52 -8
- data/vendor/assets/stylesheets/customers.scss +0 -3
|
@@ -1,15 +1,73 @@
|
|
|
1
|
-
@import
|
|
1
|
+
@import "variables";
|
|
2
2
|
|
|
3
|
-
.notice,
|
|
3
|
+
.notice,
|
|
4
|
+
.alert,
|
|
5
|
+
.callout {
|
|
4
6
|
max-width: 50em;
|
|
5
7
|
margin: 2em auto;
|
|
6
8
|
padding: 1em;
|
|
9
|
+
// border-radius: $borderRadius/2;
|
|
7
10
|
}
|
|
8
11
|
|
|
9
12
|
.notice {
|
|
10
|
-
|
|
13
|
+
color: $textColor;
|
|
14
|
+
background: $noticeBackgroundColor;
|
|
11
15
|
}
|
|
12
16
|
|
|
13
17
|
.alert {
|
|
14
|
-
|
|
15
|
-
|
|
18
|
+
color: $textColor;
|
|
19
|
+
background: $alertBackgroundColor;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.callout {
|
|
23
|
+
color: $textColor;
|
|
24
|
+
background: $backgroundColor;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.callout .callout,
|
|
28
|
+
.alert .alert,
|
|
29
|
+
.notice .notice {
|
|
30
|
+
color: $textColor;
|
|
31
|
+
background: $white;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@media (prefers-color-scheme: dark) {
|
|
35
|
+
.callout {
|
|
36
|
+
color: $nightTextColor;
|
|
37
|
+
background: $offDark;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.callout .callout,
|
|
41
|
+
.alert .alert,
|
|
42
|
+
.notice .notice {
|
|
43
|
+
color: $nightTextColor;
|
|
44
|
+
background: $nightMainBackgroundColor;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.grid--full-width.expand {
|
|
49
|
+
color: $textColor;
|
|
50
|
+
background: $mainBackgroundColor;
|
|
51
|
+
border-radius: $borderRadius;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@media (prefers-color-scheme: dark) {
|
|
55
|
+
.grid--full-width.expand {
|
|
56
|
+
color: $nightTextColor;
|
|
57
|
+
background: $nightMainBackgroundColor;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
div,
|
|
62
|
+
section {
|
|
63
|
+
&.notice,
|
|
64
|
+
&.alert,
|
|
65
|
+
&.callout {
|
|
66
|
+
padding: $padding;
|
|
67
|
+
border-radius: $borderRadius;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&:not(.u-columns) > *:first-child {
|
|
71
|
+
margin-top: 0;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
@@ -1,44 +1,92 @@
|
|
|
1
|
+
@import "variables";
|
|
2
|
+
|
|
1
3
|
$print-font-size: 12.5px;
|
|
2
4
|
|
|
3
5
|
.print-preview {
|
|
4
|
-
|
|
6
|
+
background: $white;
|
|
7
|
+
color: #000;
|
|
8
|
+
box-shadow: $boxShadow;
|
|
5
9
|
width: 210mm;
|
|
6
10
|
padding: 1.5cm;
|
|
7
11
|
font-size: $print-font-size;
|
|
8
12
|
|
|
9
|
-
.not-for-print
|
|
13
|
+
.not-for-print,
|
|
14
|
+
u-not-for-print {
|
|
10
15
|
display: none;
|
|
11
16
|
}
|
|
12
17
|
}
|
|
13
18
|
|
|
19
|
+
@media (prefers-color-scheme: dark) {
|
|
20
|
+
.print-preview {
|
|
21
|
+
box-shadow: $nightBoxShadow;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
hr.page {
|
|
26
|
+
border: none;
|
|
27
|
+
border-top: 1px solid $borderColor;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.u-only-for-print {
|
|
31
|
+
display: none;
|
|
32
|
+
}
|
|
33
|
+
|
|
14
34
|
@media print {
|
|
15
|
-
|
|
35
|
+
html {
|
|
16
36
|
background: none;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
hr.page {
|
|
40
|
+
border: none;
|
|
41
|
+
border-top: none;
|
|
42
|
+
page-break-after: always;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
html {
|
|
17
46
|
font-size: $print-font-size;
|
|
18
47
|
}
|
|
48
|
+
|
|
49
|
+
body {
|
|
50
|
+
background: none;
|
|
51
|
+
|
|
52
|
+
margin: 10mm 10mm 10mm 10mm;
|
|
53
|
+
}
|
|
54
|
+
|
|
19
55
|
main {
|
|
20
56
|
box-shadow: none;
|
|
57
|
+
background: none;
|
|
21
58
|
}
|
|
59
|
+
|
|
22
60
|
nav {
|
|
23
61
|
display: none;
|
|
24
62
|
}
|
|
25
63
|
|
|
26
|
-
.not-for-print
|
|
64
|
+
.not-for-print,
|
|
65
|
+
.u-not-for-print {
|
|
27
66
|
display: none;
|
|
28
67
|
}
|
|
29
68
|
|
|
69
|
+
.u-only-for-print {
|
|
70
|
+
display: block !important;
|
|
71
|
+
}
|
|
72
|
+
|
|
30
73
|
.invoice {
|
|
31
74
|
padding: 0;
|
|
32
75
|
box-shadow: none;
|
|
33
76
|
}
|
|
34
77
|
|
|
35
|
-
.preview,
|
|
78
|
+
.preview,
|
|
79
|
+
.print-preview {
|
|
36
80
|
box-shadow: none;
|
|
37
81
|
width: auto;
|
|
38
82
|
padding: 0;
|
|
83
|
+
|
|
39
84
|
.invoice {
|
|
40
85
|
box-shadow: none;
|
|
41
86
|
}
|
|
42
87
|
}
|
|
43
88
|
}
|
|
44
89
|
|
|
90
|
+
@page {
|
|
91
|
+
margin: 1cm;
|
|
92
|
+
}
|
|
@@ -1,3 +1,41 @@
|
|
|
1
|
-
td
|
|
1
|
+
td,
|
|
2
|
+
th {
|
|
3
|
+
line-height: 1.25;
|
|
4
|
+
padding: 0.25em;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
td {
|
|
8
|
+
vertical-align: top;
|
|
9
|
+
|
|
10
|
+
&.center {
|
|
11
|
+
text-align: center;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
td.number,
|
|
16
|
+
th.number {
|
|
2
17
|
text-align: right;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
th small {
|
|
21
|
+
font-weight: normal;
|
|
22
|
+
line-height: 1;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
thead {
|
|
26
|
+
th {
|
|
27
|
+
vertical-align: bottom;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
th[aria-sort="ascending"]::after {
|
|
31
|
+
content: '▲';
|
|
32
|
+
opacity: 0.75;
|
|
33
|
+
margin: 0 0.5em;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
th[aria-sort="descending"]::after {
|
|
37
|
+
content: '▼';
|
|
38
|
+
opacity: 0.75;
|
|
39
|
+
margin: 0 0.5em;
|
|
40
|
+
}
|
|
3
41
|
}
|
|
@@ -1,11 +1,60 @@
|
|
|
1
|
+
@import 'variables';
|
|
2
|
+
|
|
1
3
|
.u-columns {
|
|
2
4
|
display: flex;
|
|
3
|
-
flex-
|
|
5
|
+
flex-direction: column;
|
|
4
6
|
align-items: start;
|
|
5
|
-
justify-content:
|
|
7
|
+
justify-content: center;
|
|
8
|
+
gap: $gap;
|
|
9
|
+
margin-bottom: $margin;
|
|
6
10
|
|
|
7
11
|
& > * {
|
|
8
|
-
flex
|
|
9
|
-
max-width:
|
|
12
|
+
flex: 1 1 0%;
|
|
13
|
+
max-width: 100%;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
& > aside, & > .u-column--reduced {
|
|
17
|
+
flex: 0.5 0.5 0%;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&:has(> aside):has(> main) {
|
|
21
|
+
max-width: ($padding * 2 + $mainWidth);
|
|
22
|
+
margin: auto;
|
|
23
|
+
& > * {
|
|
24
|
+
max-width: 100%;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
main {
|
|
28
|
+
flex-grow: 3;
|
|
29
|
+
}
|
|
30
|
+
aside {
|
|
31
|
+
margin-top: 1em;
|
|
32
|
+
flex-grow: 1;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&:has(> main > article > h1) {
|
|
36
|
+
@media(min-width: 60em) {
|
|
37
|
+
aside {
|
|
38
|
+
margin-top: 4em;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.u-right {
|
|
47
|
+
float: right;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@media(min-width: 40em) {
|
|
51
|
+
.u-columns {
|
|
52
|
+
flex-direction: row;
|
|
53
|
+
|
|
54
|
+
&>* {
|
|
55
|
+
max-width: 50%;
|
|
56
|
+
}
|
|
10
57
|
}
|
|
11
|
-
|
|
58
|
+
.u-column-offset--fourth {
|
|
59
|
+
margin-left: calc(25% + 0.666rem); }
|
|
60
|
+
}
|
|
@@ -1,25 +1,67 @@
|
|
|
1
|
-
$fontFamily:
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
$lineHeight: 1.5;
|
|
5
|
-
$mainWidth: 80em;
|
|
1
|
+
$fontFamily:
|
|
2
|
+
"Helvetica Neue", Helvetica, "Nimbus Sans", "Nimbus Sans L", Inter, Roboto,
|
|
3
|
+
"Arial Nova", Arial, sans-serif;
|
|
6
4
|
|
|
7
|
-
$white: #fff;
|
|
8
|
-
$darkGreen: #006266;
|
|
9
|
-
$red: #dd0000;
|
|
10
|
-
$lightRed: #ff9999;
|
|
11
|
-
$green: #009432;
|
|
12
|
-
$lightGreen: #A3CB38;
|
|
13
|
-
$lighterGreen: #C4E538;
|
|
14
5
|
$offBlack: #111;
|
|
6
|
+
$dark: #222;
|
|
7
|
+
$offDark: #333;
|
|
8
|
+
$darkGrey: #666;
|
|
15
9
|
$grey: #bbb;
|
|
16
10
|
$lightGrey: #ddd;
|
|
17
11
|
$lighterGrey: #eee;
|
|
12
|
+
$offWhite: #fefefe;
|
|
13
|
+
$white: #fff;
|
|
14
|
+
$darkerGreen: #004151;
|
|
15
|
+
$red: #dd0000;
|
|
16
|
+
$redDefinition: #ff0000;
|
|
17
|
+
$lightRed: #ff4444;
|
|
18
|
+
$lighterRed: #ff9999;
|
|
19
|
+
$darkGreen: #09762d;
|
|
20
|
+
$green: #009432;
|
|
21
|
+
$lightGreen: #a3cb38;
|
|
22
|
+
$lighterGreen: #c4e538;
|
|
18
23
|
|
|
24
|
+
$gap: 1em;
|
|
25
|
+
$padding: 1em;
|
|
26
|
+
$margin: 1em;
|
|
27
|
+
|
|
28
|
+
$textColor: $offBlack;
|
|
29
|
+
$nightTextColor: $offWhite;
|
|
30
|
+
$selectableColor: $darkerGreen;
|
|
31
|
+
$selectableColorHover: $offBlack;
|
|
32
|
+
$nightSelectableColor: $lightGreen;
|
|
33
|
+
$nightSelectableColorHover: $lighterGreen;
|
|
34
|
+
|
|
35
|
+
$selectableColorContrast: $white;
|
|
36
|
+
$lineHeight: 1.6666;
|
|
37
|
+
$mainWidth: 80em;
|
|
19
38
|
$borderRadius: 1em;
|
|
39
|
+
$metaOpacity: 0.6666;
|
|
20
40
|
|
|
41
|
+
$backgroundColor: $lighterGrey;
|
|
42
|
+
$nightBackgroundColor: $offBlack;
|
|
43
|
+
$mainBackgroundColor: $white;
|
|
44
|
+
$nightMainBackgroundColor: $dark;
|
|
21
45
|
$primaryColor: $darkGreen;
|
|
46
|
+
$primaryColorContrast: $white;
|
|
22
47
|
$primaryHoverColor: $green;
|
|
23
|
-
|
|
48
|
+
$secondaryColor: $lightGrey;
|
|
49
|
+
$secondaryHoverColor: $grey;
|
|
50
|
+
$secondaryColorContrast: $textColor;
|
|
51
|
+
$alertColor: $red;
|
|
52
|
+
$alertColorContrast: $white;
|
|
24
53
|
$borderColor: $lighterGrey;
|
|
54
|
+
$inputBorderColor: $grey;
|
|
55
|
+
$disabledColor: $lighterGrey;
|
|
56
|
+
|
|
57
|
+
$articleTextScaling: 1.3333; // perfect fours
|
|
58
|
+
$articleTextScalingMin: 1.6666;
|
|
59
|
+
$articleTextScalingMax: 2;
|
|
60
|
+
|
|
61
|
+
$alertBackgroundColor: #d1afac;
|
|
62
|
+
$noticeBackgroundColor: #acd1af;
|
|
63
|
+
|
|
64
|
+
$elementScaleUp: scale(1.04);
|
|
25
65
|
|
|
66
|
+
$boxShadow: 0 0 1em rgba(0, 0, 0, 0.1);
|
|
67
|
+
$nightBoxShadow: 0 0 1em rgba(255, 255, 255, 0.1);
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
@import
|
|
1
|
+
@import "variables";
|
|
2
2
|
// Place all the styles related to the works controller here.
|
|
3
3
|
// They will automatically be included in application.css.
|
|
4
4
|
// You can use Sass (SCSS) here: https://sass-lang.com/
|
|
5
5
|
|
|
6
6
|
.work .stock_number {
|
|
7
7
|
padding: 0.25em;
|
|
8
|
+
color: $textColor;
|
|
8
9
|
background: $lighterGrey;
|
|
9
10
|
display: inline-block;
|
|
10
11
|
}
|
|
@@ -14,7 +15,6 @@
|
|
|
14
15
|
right: 0em;
|
|
15
16
|
margin: 0;
|
|
16
17
|
border-radius: 0 0 $borderRadius 0;
|
|
17
|
-
|
|
18
18
|
}
|
|
19
19
|
.card p {
|
|
20
20
|
margin: 0;
|
|
@@ -24,4 +24,4 @@ header.work {
|
|
|
24
24
|
.stock_number {
|
|
25
25
|
float: right;
|
|
26
26
|
}
|
|
27
|
-
}
|
|
27
|
+
}
|
metadata
CHANGED
|
@@ -1,15 +1,42 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: murb_design_system
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.2.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- murb
|
|
8
|
-
autorequire:
|
|
9
8
|
bindir: exe
|
|
10
9
|
cert_chain: []
|
|
11
|
-
date:
|
|
12
|
-
dependencies:
|
|
10
|
+
date: 1980-01-02 00:00:00.000000000 Z
|
|
11
|
+
dependencies:
|
|
12
|
+
- !ruby/object:Gem::Dependency
|
|
13
|
+
name: sassc
|
|
14
|
+
requirement: !ruby/object:Gem::Requirement
|
|
15
|
+
requirements:
|
|
16
|
+
- - ">="
|
|
17
|
+
- !ruby/object:Gem::Version
|
|
18
|
+
version: '0'
|
|
19
|
+
type: :development
|
|
20
|
+
prerelease: false
|
|
21
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
22
|
+
requirements:
|
|
23
|
+
- - ">="
|
|
24
|
+
- !ruby/object:Gem::Version
|
|
25
|
+
version: '0'
|
|
26
|
+
- !ruby/object:Gem::Dependency
|
|
27
|
+
name: listen
|
|
28
|
+
requirement: !ruby/object:Gem::Requirement
|
|
29
|
+
requirements:
|
|
30
|
+
- - ">="
|
|
31
|
+
- !ruby/object:Gem::Version
|
|
32
|
+
version: '0'
|
|
33
|
+
type: :development
|
|
34
|
+
prerelease: false
|
|
35
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
36
|
+
requirements:
|
|
37
|
+
- - ">="
|
|
38
|
+
- !ruby/object:Gem::Version
|
|
39
|
+
version: '0'
|
|
13
40
|
description: a very simple and basic design system in progress used for projects by
|
|
14
41
|
murb
|
|
15
42
|
email:
|
|
@@ -19,6 +46,7 @@ extensions: []
|
|
|
19
46
|
extra_rdoc_files: []
|
|
20
47
|
files:
|
|
21
48
|
- ".rubocop.yml"
|
|
49
|
+
- ".ruby-version"
|
|
22
50
|
- CHANGELOG.md
|
|
23
51
|
- CODE_OF_CONDUCT.md
|
|
24
52
|
- Gemfile
|
|
@@ -26,17 +54,35 @@ files:
|
|
|
26
54
|
- LICENSE.txt
|
|
27
55
|
- README.md
|
|
28
56
|
- Rakefile
|
|
57
|
+
- _navigation.html.erb
|
|
58
|
+
- basis.html.erb
|
|
59
|
+
- bin/build
|
|
29
60
|
- bin/console
|
|
30
61
|
- bin/setup
|
|
62
|
+
- bin/watch
|
|
63
|
+
- blocks.html.erb
|
|
64
|
+
- dist/.gitkeep
|
|
65
|
+
- dist/GLOBE---1850-2024-MO.png
|
|
66
|
+
- doc/calculations.ods
|
|
67
|
+
- html2canvas.min.js
|
|
68
|
+
- index.html.erb
|
|
69
|
+
- layout.html.erb
|
|
31
70
|
- lib/murb_design_system.rb
|
|
32
71
|
- lib/murb_design_system/version.rb
|
|
72
|
+
- navigation.html.erb
|
|
73
|
+
- print.html.erb
|
|
74
|
+
- promo.html.erb
|
|
75
|
+
- vendor/assets/stylesheets/article.scss
|
|
33
76
|
- vendor/assets/stylesheets/buttons.scss
|
|
34
77
|
- vendor/assets/stylesheets/cards.scss
|
|
35
|
-
- vendor/assets/stylesheets/customers.scss
|
|
36
78
|
- vendor/assets/stylesheets/devise.scss
|
|
37
79
|
- vendor/assets/stylesheets/forms.scss
|
|
80
|
+
- vendor/assets/stylesheets/grid.scss
|
|
38
81
|
- vendor/assets/stylesheets/html.scss
|
|
39
82
|
- vendor/assets/stylesheets/invoice.scss
|
|
83
|
+
- vendor/assets/stylesheets/list-variants.scss
|
|
84
|
+
- vendor/assets/stylesheets/meta.scss
|
|
85
|
+
- vendor/assets/stylesheets/microformats.scss
|
|
40
86
|
- vendor/assets/stylesheets/murb_design_system.css
|
|
41
87
|
- vendor/assets/stylesheets/navigation.scss
|
|
42
88
|
- vendor/assets/stylesheets/notice.scss
|
|
@@ -53,7 +99,6 @@ licenses:
|
|
|
53
99
|
metadata:
|
|
54
100
|
homepage_uri: https://murb.nl
|
|
55
101
|
source_code_uri: https://gitlab.com/murb-org/murb-design-system
|
|
56
|
-
post_install_message:
|
|
57
102
|
rdoc_options: []
|
|
58
103
|
require_paths:
|
|
59
104
|
- lib
|
|
@@ -68,8 +113,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
68
113
|
- !ruby/object:Gem::Version
|
|
69
114
|
version: '0'
|
|
70
115
|
requirements: []
|
|
71
|
-
rubygems_version:
|
|
72
|
-
signing_key:
|
|
116
|
+
rubygems_version: 4.0.16
|
|
73
117
|
specification_version: 4
|
|
74
118
|
summary: murb's design system
|
|
75
119
|
test_files: []
|