vipassana-design-standards 0.0.8 → 0.0.11
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/README.md +3 -0
- data/app/assets/stylesheets/custom-bootstrap-utilities.scss +114 -0
- data/app/assets/stylesheets/custom-bootstrap-variables.scss +121 -0
- data/app/assets/stylesheets/custom-bootstrap.scss +151 -0
- data/app/assets/stylesheets/fonts.css +6 -0
- data/app/assets/stylesheets/logo.css +13 -9
- data/app/assets/stylesheets/vds-header.scss +30 -0
- data/app/assets/stylesheets/vds-layout.scss +85 -0
- data/app/assets/stylesheets/vds-mixins.scss +5 -0
- data/app/assets/stylesheets/vds-sidenav.scss +43 -0
- data/app/assets/stylesheets/vds.scss +11 -0
- data/package.json +6 -2
- data/vipassana-design-standards.gemspec +1 -1
- metadata +10 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f3e6ebf0c1cf6d98b6a6a9a98f7f8c3cc15122a9d8242314ddfc97ccc7291dd0
|
|
4
|
+
data.tar.gz: 6b2fb67c7e7e026a8aa7c7cfb3d792af40596b8c91da87139065f6bf2d3f9be1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b6aac8f5f4fa6ba55d1b5bca7e46da55ed4e4c2d89287f9478f878f371638100a879ca64505786ded411b80f6b783a51bc28ec905a23d0c8b3bec3621712776d
|
|
7
|
+
data.tar.gz: 32f4983133bcbdb6272f6527bac42d28a980d69a4aa941abf020936d1ec1f3157cf284fcf4b5dc2ac3b5c7d52624ef701c602dd9977e7fe5c6b566af954a8422
|
data/README.md
CHANGED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
|
|
2
|
+
@use "sass:math";
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
// Generate missing CSS Variables
|
|
6
|
+
@each $color, $value in $blues {
|
|
7
|
+
--#{$prefix}#{$color}: #{$value};
|
|
8
|
+
}
|
|
9
|
+
@each $color, $value in $golds {
|
|
10
|
+
--#{$prefix}#{$color}: #{$value};
|
|
11
|
+
}
|
|
12
|
+
@each $color, $value in $greens {
|
|
13
|
+
--#{$prefix}#{$color}: #{$value};
|
|
14
|
+
}
|
|
15
|
+
@each $color, $value in $reds {
|
|
16
|
+
--#{$prefix}#{$color}: #{$value};
|
|
17
|
+
}
|
|
18
|
+
--bs-border-color: #{$border-color};
|
|
19
|
+
--bs-font-heading: #{$headings-font-family};
|
|
20
|
+
|
|
21
|
+
--bs-spacer-x: #{$spacer-x};
|
|
22
|
+
@include media-breakpoint-down(md) {
|
|
23
|
+
--bs-spacer-x: 1rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// adds other variables
|
|
27
|
+
--layout-padding: 1rem;
|
|
28
|
+
@include media-breakpoint-up(md) {
|
|
29
|
+
--layout-padding: 1.5rem;
|
|
30
|
+
}
|
|
31
|
+
@include media-breakpoint-up(xl) {
|
|
32
|
+
--layout-padding: 2rem;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Font-family helpers
|
|
37
|
+
.ff-normal {
|
|
38
|
+
font-family: $font-family-sans-serif;
|
|
39
|
+
}
|
|
40
|
+
.ff-heading {
|
|
41
|
+
font-family: $headings-font-family;
|
|
42
|
+
margin-bottom: -0.3em; // strange, but the Footlight font does not seems to be properly aligned with baseline
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Font-size helpers
|
|
46
|
+
.fs-normal {
|
|
47
|
+
font-size: 1rem !important;
|
|
48
|
+
}
|
|
49
|
+
// fs-09-rem, fs-085-em..
|
|
50
|
+
@for $i from 5 through 9 {
|
|
51
|
+
.fs-0#{$i}-rem {
|
|
52
|
+
font-size: #{math.div($i, 10)}rem !important;
|
|
53
|
+
}
|
|
54
|
+
.fs-0#{$i}-em {
|
|
55
|
+
font-size: #{math.div($i, 10)}em !important;
|
|
56
|
+
}
|
|
57
|
+
.fs-0#{$i}5-rem {
|
|
58
|
+
font-size: #{math.div($i, 10) + 0.05}rem !important;
|
|
59
|
+
}
|
|
60
|
+
.fs-0#{$i}5-em {
|
|
61
|
+
font-size: #{math.div($i, 10) + 0.05}em !important;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
// fs-11-rem, fs-125-em...
|
|
65
|
+
@for $i from 1 through 5 {
|
|
66
|
+
.fs-1#{$i}-rem {
|
|
67
|
+
font-size: #{1 + math.div($i, 10)}rem !important;
|
|
68
|
+
}
|
|
69
|
+
.fs-1#{$i}-em {
|
|
70
|
+
font-size: #{1 + math.div($i, 10)}em !important;
|
|
71
|
+
}
|
|
72
|
+
.fs-1#{$i}5-rem {
|
|
73
|
+
font-size: #{1.05 + math.div($i, 10)}rem !important;
|
|
74
|
+
}
|
|
75
|
+
.fs-1#{$i}5-em {
|
|
76
|
+
font-size: #{1.05 + math.div($i, 10)}em !important;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.full-width-sm {
|
|
81
|
+
@include media-breakpoint-down(md) {
|
|
82
|
+
margin-left: -1rem !important;
|
|
83
|
+
margin-right: -1rem !important;
|
|
84
|
+
width: calc(100% + 2rem) !important;
|
|
85
|
+
box-shadow: none !important;
|
|
86
|
+
--bs-card-border-radius: 0;
|
|
87
|
+
--bs-card-inner-border-radius: 0;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.btn-floating-sm {
|
|
92
|
+
@include media-breakpoint-down(md) {
|
|
93
|
+
position: fixed !important;
|
|
94
|
+
bottom: 3rem !important;
|
|
95
|
+
z-index: 200 !important;
|
|
96
|
+
right: 1rem !important;
|
|
97
|
+
box-shadow: 0 3px 1rem #21252985 !important;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// Make this section take the whole page when printing
|
|
102
|
+
@media print {
|
|
103
|
+
.full-page-print {
|
|
104
|
+
background-color: white;
|
|
105
|
+
height: 100%;
|
|
106
|
+
width: 100%;
|
|
107
|
+
position: fixed;
|
|
108
|
+
top: 0;
|
|
109
|
+
left: 0;
|
|
110
|
+
margin: 0;
|
|
111
|
+
padding: 2rem;
|
|
112
|
+
z-index: 500;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
// Color Palette
|
|
2
|
+
$blue-100: #f8f9fa; // #f8f9fa; // #ececec; // primevue #e8eaf6 //#f1eff1;
|
|
3
|
+
$blue-150: #f0f2f4; //#e6e5ec;
|
|
4
|
+
$blue-200: #D2D6DF; //#e6e5ec; //#ced4da;
|
|
5
|
+
$blue-300: #8586a2;
|
|
6
|
+
$blue-400: #707595;
|
|
7
|
+
$blue-500: #5b6588;
|
|
8
|
+
$blue-600: #47547b;
|
|
9
|
+
$blue-700: #32446e;
|
|
10
|
+
$blue-800: #1E3461;
|
|
11
|
+
$blue-900: #121f3a;
|
|
12
|
+
|
|
13
|
+
$blue: $blue-800;
|
|
14
|
+
|
|
15
|
+
$gold-100: #FCFAF7;
|
|
16
|
+
$gold-200: #f0e7d5;
|
|
17
|
+
$gold-300: #deccad;
|
|
18
|
+
$gold-400: #c6a364;
|
|
19
|
+
$gold-500: #B78730;
|
|
20
|
+
$gold-600: #9c6b14;
|
|
21
|
+
$gold-700: #7D550C;
|
|
22
|
+
$gold-800: #493613;
|
|
23
|
+
$gold-900: #241a09;
|
|
24
|
+
|
|
25
|
+
$gold: $gold-500;
|
|
26
|
+
|
|
27
|
+
$blues: (
|
|
28
|
+
"blue-100": $blue-100,
|
|
29
|
+
"blue-150": $blue-150,
|
|
30
|
+
"blue-200": $blue-200,
|
|
31
|
+
"blue-300": $blue-300,
|
|
32
|
+
"blue-400": $blue-400,
|
|
33
|
+
"blue-500": $blue-500,
|
|
34
|
+
"blue-600": $blue-600,
|
|
35
|
+
"blue-700": $blue-700,
|
|
36
|
+
"blue-800": $blue-800,
|
|
37
|
+
"blue-900": $blue-900
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
$golds: (
|
|
41
|
+
"gold-100": $gold-100,
|
|
42
|
+
"gold-200": $gold-200,
|
|
43
|
+
"gold-300": $gold-300,
|
|
44
|
+
"gold-400": $gold-400,
|
|
45
|
+
"gold-500": $gold-500,
|
|
46
|
+
"gold-600": $gold-600,
|
|
47
|
+
"gold-700": $gold-700,
|
|
48
|
+
"gold-800": $gold-800,
|
|
49
|
+
"gold-900": $gold-900
|
|
50
|
+
);
|
|
51
|
+
|
|
52
|
+
$green-200: #D5E4C3;
|
|
53
|
+
$green: #3d6b00;
|
|
54
|
+
$green-700: #203800;
|
|
55
|
+
|
|
56
|
+
$red-200: #ECCCCC;
|
|
57
|
+
$red: #8e3333;
|
|
58
|
+
$red-700: #720000;
|
|
59
|
+
|
|
60
|
+
$primary: $blue-800;
|
|
61
|
+
$secondary: $gold-500;
|
|
62
|
+
$info: $secondary;
|
|
63
|
+
|
|
64
|
+
$dark: #4F4d47;
|
|
65
|
+
$light: $blue-150;
|
|
66
|
+
|
|
67
|
+
$dark-100: tint-color($dark, 80%);
|
|
68
|
+
$dark-200: tint-color($dark, 60%);
|
|
69
|
+
$dark-300: tint-color($dark, 40%);
|
|
70
|
+
$dark-400: tint-color($dark, 20%);
|
|
71
|
+
$dark-500: $dark;
|
|
72
|
+
$dark-600: shade-color($dark, 20%);
|
|
73
|
+
$dark-700: shade-color($dark, 40%);
|
|
74
|
+
$dark-800: shade-color($dark, 60%);
|
|
75
|
+
$dark-900: shade-color($dark, 80%);
|
|
76
|
+
|
|
77
|
+
// Customize Bootstrap
|
|
78
|
+
$font-family-sans-serif: var(--vipassana-font-family), 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
79
|
+
$headings-font-family: var(--vipassana-headings-font-family), 'FootLight', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
80
|
+
$headings-color: $blue;
|
|
81
|
+
$headings-font-weight: 600;
|
|
82
|
+
$headings-line-height: 1.5;
|
|
83
|
+
|
|
84
|
+
$border-radius: .25rem;
|
|
85
|
+
$border-color: $blue-200;
|
|
86
|
+
$body-bg: $gold-100;
|
|
87
|
+
|
|
88
|
+
$spacer: 1rem;
|
|
89
|
+
$spacer-x: 1.5rem;
|
|
90
|
+
|
|
91
|
+
$input-bg: white;
|
|
92
|
+
$input-btn-padding-x: 1rem;
|
|
93
|
+
$input-btn-padding-x-sm: .75rem;
|
|
94
|
+
$input-border-color: $border-color;
|
|
95
|
+
|
|
96
|
+
$alert-border-width: 0;
|
|
97
|
+
|
|
98
|
+
$card-spacer-x: $spacer-x;
|
|
99
|
+
$card-cap-padding-x: $spacer-x;
|
|
100
|
+
$card-cap-padding-y: .75rem;
|
|
101
|
+
$card-border-width: 0;
|
|
102
|
+
|
|
103
|
+
$accordion-padding-x: $spacer-x;
|
|
104
|
+
|
|
105
|
+
$list-group-item-padding-x: $spacer-x;
|
|
106
|
+
|
|
107
|
+
$badge-font-weight: 400;
|
|
108
|
+
|
|
109
|
+
$offcanvas-horizontal-width: auto;
|
|
110
|
+
$offcanvas-padding-x: 1.5rem;
|
|
111
|
+
$offcanvas-transition-duration: .25s;
|
|
112
|
+
|
|
113
|
+
$modal-inner-padding: $spacer-x;
|
|
114
|
+
$modal-content-border-radius: $border-radius;
|
|
115
|
+
$modal-content-border-width: 0;
|
|
116
|
+
$modal-header-border-width: 0;
|
|
117
|
+
$modal-header-padding: 1rem $modal-inner-padding 0 $modal-inner-padding;
|
|
118
|
+
$modal-fade-transform: translate(0, 0) scale(.8);
|
|
119
|
+
$modal-transition: transform .15s ease-out;
|
|
120
|
+
|
|
121
|
+
$enable-negative-margins: true;
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
// Alerts
|
|
2
|
+
.alert-danger {
|
|
3
|
+
--bs-alert-color: #{$red-700};
|
|
4
|
+
--bs-alert-bg: #{$red-200};
|
|
5
|
+
}
|
|
6
|
+
.alert-success {
|
|
7
|
+
--bs-alert-color: #{$green-700};
|
|
8
|
+
--bs-alert-bg: #{$green-200};
|
|
9
|
+
}
|
|
10
|
+
.alert-primary {
|
|
11
|
+
--bs-alert-color: #{$blue-800};
|
|
12
|
+
--bs-alert-bg: #{$blue-200};
|
|
13
|
+
}
|
|
14
|
+
.alert-secondary {
|
|
15
|
+
--bs-alert-color: #{$gold-800};
|
|
16
|
+
--bs-alert-bg: #{$gold-200};
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Buttons
|
|
20
|
+
.btn {
|
|
21
|
+
display: inline-flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
}
|
|
24
|
+
.btn-secondary, .btn-info {
|
|
25
|
+
--bs-btn-color: white;
|
|
26
|
+
--bs-btn-hover-color: white;
|
|
27
|
+
--bs-btn-active-color: white;
|
|
28
|
+
--bs-btn-disabled-color: white;
|
|
29
|
+
}
|
|
30
|
+
.btn-light {
|
|
31
|
+
--bs-btn-color: $dark;
|
|
32
|
+
--bs-btn-hover-color: $dark;
|
|
33
|
+
--bs-btn-active-color: $dark;
|
|
34
|
+
--bs-btn-disabled-color: $dark;
|
|
35
|
+
--bs-btn-hover-bg: var(--bs-gray-200);
|
|
36
|
+
--bs-btn-bg: white;
|
|
37
|
+
}
|
|
38
|
+
.btn-outline-secondary:hover {
|
|
39
|
+
color: white;
|
|
40
|
+
}
|
|
41
|
+
.text-bg-secondary {
|
|
42
|
+
color: white !important;
|
|
43
|
+
}
|
|
44
|
+
// Button Ripple effect
|
|
45
|
+
.ripple-effect {
|
|
46
|
+
position: relative;
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
transform: translate3d(0, 0, 0);
|
|
49
|
+
&:after {
|
|
50
|
+
content: "";
|
|
51
|
+
display: block;
|
|
52
|
+
position: absolute;
|
|
53
|
+
width: 100%;
|
|
54
|
+
height: 100%;
|
|
55
|
+
top: 0;
|
|
56
|
+
left: 0;
|
|
57
|
+
pointer-events: none;
|
|
58
|
+
background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
|
|
59
|
+
background-repeat: no-repeat;
|
|
60
|
+
background-position: 50%;
|
|
61
|
+
transform: scale(10, 10);
|
|
62
|
+
opacity: 0;
|
|
63
|
+
transition: transform .3s, opacity 1s;
|
|
64
|
+
}
|
|
65
|
+
&:active:after {
|
|
66
|
+
transform: scale(0, 0);
|
|
67
|
+
opacity: .2;
|
|
68
|
+
transition: 0s;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
.btn:not(.btn-link) {
|
|
72
|
+
@extend .ripple-effect;
|
|
73
|
+
}
|
|
74
|
+
.btn.dropdown-toggle:after {
|
|
75
|
+
display: none; // remove caret
|
|
76
|
+
}
|
|
77
|
+
.btn[type=submit] {
|
|
78
|
+
width: 100%;
|
|
79
|
+
justify-content: center;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// Form
|
|
83
|
+
.form-check-input, .form-check-label {
|
|
84
|
+
cursor: pointer;
|
|
85
|
+
}
|
|
86
|
+
.form-floating > label {
|
|
87
|
+
width: 100%;
|
|
88
|
+
}
|
|
89
|
+
.form-label {
|
|
90
|
+
font-size: .9rem;
|
|
91
|
+
opacity: .8;
|
|
92
|
+
margin-bottom: 5px;
|
|
93
|
+
}
|
|
94
|
+
.form-select {
|
|
95
|
+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 18'%3e%3cpath fill='none' stroke='%23a1a1a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
|
96
|
+
}
|
|
97
|
+
.form-check {
|
|
98
|
+
margin-bottom: .25rem;
|
|
99
|
+
}
|
|
100
|
+
[dir="rtl"] {
|
|
101
|
+
.form-floating > .form-control ~ label {
|
|
102
|
+
transform-origin: right;
|
|
103
|
+
}
|
|
104
|
+
.form-floating > .form-control:focus ~ label {
|
|
105
|
+
transform: scale(0.85) translateY(-1rem) translateX(-0.15rem);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
.input-group-text {
|
|
109
|
+
background-color: var(--bs-light);
|
|
110
|
+
}
|
|
111
|
+
// mandatory asterix for required inputs
|
|
112
|
+
abbr[title], abbr[data-original-title] {
|
|
113
|
+
cursor: help;
|
|
114
|
+
color: var(--bs-danger);
|
|
115
|
+
border: none;
|
|
116
|
+
text-decoration: none !important;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
// Card
|
|
120
|
+
.card {
|
|
121
|
+
@extend .shadow-sm;
|
|
122
|
+
@include media-breakpoint-down(md) {
|
|
123
|
+
--bs-card-cap-padding-x: 1rem;
|
|
124
|
+
--bs-card-spacer-x: 1rem;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
// Modal
|
|
129
|
+
.modal .modal-dialog {
|
|
130
|
+
@extend .modal-fullscreen-md-down;
|
|
131
|
+
transform-origin: center bottom;
|
|
132
|
+
|
|
133
|
+
.modal-header {
|
|
134
|
+
.modal-title {
|
|
135
|
+
@extend .ff-heading;
|
|
136
|
+
@extend .fs-2;
|
|
137
|
+
@extend .text-primary;
|
|
138
|
+
}
|
|
139
|
+
.btn-close {
|
|
140
|
+
margin-top: 0;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
.modal-footer {
|
|
144
|
+
padding-top: 0;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// Other
|
|
149
|
+
.dropdown-item {
|
|
150
|
+
cursor: pointer;
|
|
151
|
+
}
|
|
@@ -52,6 +52,12 @@
|
|
|
52
52
|
font-weight: normal;
|
|
53
53
|
font-style: normal;
|
|
54
54
|
}
|
|
55
|
+
@font-face {
|
|
56
|
+
font-family: 'FootLight';
|
|
57
|
+
src: url('../fonts/FootlightMTProRegular.woff');
|
|
58
|
+
font-weight: 600;
|
|
59
|
+
font-style: normal;
|
|
60
|
+
}
|
|
55
61
|
@font-face {
|
|
56
62
|
font-family: 'Lato';
|
|
57
63
|
src: url('../fonts/Lato-Regular.woff');
|
|
@@ -3,25 +3,26 @@
|
|
|
3
3
|
align-items: center;
|
|
4
4
|
transform: scale(1);
|
|
5
5
|
transform-origin: left;
|
|
6
|
+
text-align: left;
|
|
6
7
|
|
|
7
8
|
--vipassana-logo-title-color: #9C6B14;
|
|
8
9
|
--vipassana-logo-tagline-color: #4F4D47;
|
|
9
10
|
|
|
10
11
|
--vipassana-logo-title-line-height: 1.1;
|
|
11
12
|
--vipassana-logo-tagline-line-height: 1.4;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
.vipassana-logo[data-disposition="left-two-lines"] {
|
|
17
|
-
--vipassana-logo-tagline-line-height: 1.25;
|
|
13
|
+
|
|
14
|
+
--vipassana-logo-title-font-size: 1.8em;
|
|
15
|
+
--vipassana-logo-tagline-font-size: 1.1em;
|
|
18
16
|
}
|
|
19
17
|
.vipassana-logo[data-disposition="left-two-lines"][data-tagline="true"] {
|
|
20
|
-
--vipassana-logo-title-line-height: 1.
|
|
18
|
+
--vipassana-logo-title-line-height: 1.1;
|
|
21
19
|
--vipassana-logo-tagline-line-height: 1.25;
|
|
20
|
+
--vipassana-logo-title-font-size: 1.7em;
|
|
21
|
+
--vipassana-logo-tagline-font-size: 1em;
|
|
22
22
|
}
|
|
23
23
|
.vipassana-logo[data-disposition="left-two-lines"][data-tagline="false"] {
|
|
24
24
|
--vipassana-logo-title-line-height: 1.15;
|
|
25
|
+
--vipassana-logo-title-font-size: 1.9em;
|
|
25
26
|
}
|
|
26
27
|
.vipassana-logo[data-reverse="true"] {
|
|
27
28
|
--vipassana-logo-tagline-line-height: 1.8;
|
|
@@ -30,6 +31,9 @@
|
|
|
30
31
|
--vipassana-logo-title-color: white;
|
|
31
32
|
--vipassana-logo-tagline-color: #ffffff90;
|
|
32
33
|
}
|
|
34
|
+
.vipassana-logo[data-disposition="auto"] {
|
|
35
|
+
max-width: 48em; /* the title will wrap if it's too long */
|
|
36
|
+
}
|
|
33
37
|
.vipassana-logo[data-disposition="centered"] {
|
|
34
38
|
flex-direction: column;
|
|
35
39
|
text-align: center;
|
|
@@ -67,7 +71,7 @@
|
|
|
67
71
|
color: var(--vipassana-logo-title-color);
|
|
68
72
|
font-family: var(--vipassana-headings-font-family);
|
|
69
73
|
line-height: var(--vipassana-logo-title-line-height);
|
|
70
|
-
font-size:
|
|
74
|
+
font-size: var(--vipassana-logo-title-font-size);
|
|
71
75
|
font-weight: normal;
|
|
72
76
|
margin: 0;
|
|
73
77
|
padding: 0;
|
|
@@ -115,7 +119,7 @@
|
|
|
115
119
|
color: var(--vipassana-logo-tagline-color);
|
|
116
120
|
font-family: var(--vipassana-font-family);
|
|
117
121
|
font-weight: 300;
|
|
118
|
-
font-size:
|
|
122
|
+
font-size: var(--vipassana-logo-tagline-font-size);
|
|
119
123
|
line-height: var(--vipassana-logo-tagline-line-height);
|
|
120
124
|
}
|
|
121
125
|
.vipassana-logo[data-tagline="false"] .logo-subtitle {
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
.vds-header {
|
|
2
|
+
text-align: center;
|
|
3
|
+
position: relative;
|
|
4
|
+
background-color: white;
|
|
5
|
+
color: $primary;
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
@extend .d-print-none;
|
|
9
|
+
|
|
10
|
+
border-bottom: 2px solid $secondary;
|
|
11
|
+
@include media-breakpoint-up(md) {
|
|
12
|
+
border-top: 1.25rem solid $primary;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.vds-container {
|
|
16
|
+
--header-y-padding: 1rem;
|
|
17
|
+
@include media-breakpoint-down(md) {
|
|
18
|
+
--header-y-padding: .5rem;
|
|
19
|
+
}
|
|
20
|
+
padding: var(--header-y-padding) var(--layout-padding);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.vds-logo svg {
|
|
24
|
+
max-height: 40px;
|
|
25
|
+
max-width: 100%;
|
|
26
|
+
@include media-breakpoint-up(md) {
|
|
27
|
+
max-height: 70px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
.vds-body {
|
|
2
|
+
--page-max-width: 100%;
|
|
3
|
+
|
|
4
|
+
&:not(.iframe) {
|
|
5
|
+
@include media-breakpoint-up(xl) {
|
|
6
|
+
--page-max-width: 900px;
|
|
7
|
+
&.with-sidenav {
|
|
8
|
+
--page-max-width: 1100px;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.vds-page {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-grow: 1;
|
|
16
|
+
|
|
17
|
+
.vds-page-content {
|
|
18
|
+
flex-grow: 1;
|
|
19
|
+
@extend .bg-body;
|
|
20
|
+
|
|
21
|
+
& > h1:first-child, & > h2:first-child {
|
|
22
|
+
margin-top: 0;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
// The container so eery part of the page have same content-width
|
|
30
|
+
.vds-container {
|
|
31
|
+
width: 100%;
|
|
32
|
+
max-width: var(--page-max-width);
|
|
33
|
+
margin-left: auto;
|
|
34
|
+
margin-right: auto;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// wait for vue to be loaded to display it
|
|
38
|
+
.vue-container {
|
|
39
|
+
--page-content-opacity: 0;
|
|
40
|
+
&.mounted {
|
|
41
|
+
--page-content-opacity: 1;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.vds-page-real-content {
|
|
45
|
+
transition: opacity .3s;
|
|
46
|
+
opacity: var(--page-content-opacity);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// Sticky footer
|
|
51
|
+
.vds-header-and-content {
|
|
52
|
+
min-height: 100%;
|
|
53
|
+
padding-bottom: 3.5rem;
|
|
54
|
+
position: relative;
|
|
55
|
+
display: flex;
|
|
56
|
+
flex-direction: column;
|
|
57
|
+
|
|
58
|
+
.vds-page-content {
|
|
59
|
+
padding: var(--layout-padding);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.vds-footer {
|
|
64
|
+
background-color: var(--bs-primary);
|
|
65
|
+
color: white;
|
|
66
|
+
margin-top: -3.5rem;
|
|
67
|
+
height: 3.5rem;
|
|
68
|
+
position: relative;
|
|
69
|
+
display: flex;
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
|
|
73
|
+
.vds-container {
|
|
74
|
+
padding: 0 var(--layout-padding);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
a {
|
|
78
|
+
color: white;
|
|
79
|
+
text-decoration: none;
|
|
80
|
+
&:hover {
|
|
81
|
+
color: white;
|
|
82
|
+
text-decoration: underline;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
.vds-sidenav {
|
|
2
|
+
background-color: $gold-200;
|
|
3
|
+
margin-right: 1rem;
|
|
4
|
+
padding: var(--layout-padding);
|
|
5
|
+
font-size: 1.25rem;
|
|
6
|
+
@extend .d-none;
|
|
7
|
+
@extend .d-lg-block;
|
|
8
|
+
@extend .d-print-none;
|
|
9
|
+
@extend .flex-shrink-0;
|
|
10
|
+
|
|
11
|
+
ul {
|
|
12
|
+
@extend .sticky-top;
|
|
13
|
+
top: 1rem;
|
|
14
|
+
z-index: 100;
|
|
15
|
+
|
|
16
|
+
a {
|
|
17
|
+
font-family: $headings-font-family;
|
|
18
|
+
font-weight: 600;
|
|
19
|
+
&.active {
|
|
20
|
+
color: $gold-600;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.vds-mobile-sidenav {
|
|
27
|
+
.locale-icon {
|
|
28
|
+
display: none;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.vds-sidenav, .vds-mobile-sidenav {
|
|
33
|
+
ul {
|
|
34
|
+
@extend .list-unstyled;
|
|
35
|
+
@extend .flex-column;
|
|
36
|
+
|
|
37
|
+
li {
|
|
38
|
+
a {
|
|
39
|
+
@extend .text-decoration-none;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
@import "./custom-bootstrap-variables.scss";
|
|
2
|
+
|
|
3
|
+
@import "bootstrap5/scss/bootstrap";
|
|
4
|
+
|
|
5
|
+
@import "./custom-bootstrap-utilities.scss";
|
|
6
|
+
@import "./custom-bootstrap.scss";
|
|
7
|
+
|
|
8
|
+
@import "./vds-mixins.scss";
|
|
9
|
+
@import "./vds-layout.scss";
|
|
10
|
+
@import "./vds-header.scss";
|
|
11
|
+
@import "./vds-sidenav.scss";
|
data/package.json
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vipassana-design-standards",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.11",
|
|
4
4
|
"description": "Vipassana design standards materials",
|
|
5
5
|
"homepage": "https://design-standards.dhamma.org",
|
|
6
|
-
"author": "Dhamma Workers"
|
|
6
|
+
"author": "Dhamma Workers",
|
|
7
|
+
"dependencies": {
|
|
8
|
+
"bootstrap5": "npm:bootstrap@5"
|
|
9
|
+
},
|
|
10
|
+
"sass": "app/assets/stylesheets/vds.scss"
|
|
7
11
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Gem::Specification.new do |gem|
|
|
4
4
|
gem.name = 'vipassana-design-standards'
|
|
5
|
-
gem.version = '0.0.
|
|
5
|
+
gem.version = '0.0.11'
|
|
6
6
|
# gem.license = 'MIT'
|
|
7
7
|
gem.summary = 'Include Vipassana SVG logos in your pages'
|
|
8
8
|
gem.description = 'A ruby module to offer inline SVG images for each language'
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: vipassana-design-standards
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.11
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Dhamma workers
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2023-05-
|
|
11
|
+
date: 2023-05-19 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description: A ruby module to offer inline SVG images for each language
|
|
14
14
|
email:
|
|
@@ -71,9 +71,17 @@ files:
|
|
|
71
71
|
- app/assets/images/wheels/wheel-2023.svg.js
|
|
72
72
|
- app/assets/javascripts/i18n.js
|
|
73
73
|
- app/assets/javascripts/index.js
|
|
74
|
+
- app/assets/stylesheets/custom-bootstrap-utilities.scss
|
|
75
|
+
- app/assets/stylesheets/custom-bootstrap-variables.scss
|
|
76
|
+
- app/assets/stylesheets/custom-bootstrap.scss
|
|
74
77
|
- app/assets/stylesheets/fonts.css
|
|
75
78
|
- app/assets/stylesheets/index.css
|
|
76
79
|
- app/assets/stylesheets/logo.css
|
|
80
|
+
- app/assets/stylesheets/vds-header.scss
|
|
81
|
+
- app/assets/stylesheets/vds-layout.scss
|
|
82
|
+
- app/assets/stylesheets/vds-mixins.scss
|
|
83
|
+
- app/assets/stylesheets/vds-sidenav.scss
|
|
84
|
+
- app/assets/stylesheets/vds.scss
|
|
77
85
|
- dist/Dhamma-Wheel.svg
|
|
78
86
|
- dist/design-standards-v0.3.pdf
|
|
79
87
|
- dist/favicon.png
|