github-docs 0.0.17 → 0.0.18

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.
@@ -0,0 +1,201 @@
1
+ @function getFirstColor($list) {
2
+ @each $item in $list {
3
+ @if (type-of($item) == 'list') {
4
+ $item: getFirstColor($item);
5
+ }
6
+ @if (type-of($item) == 'color') {
7
+ @return $item;
8
+ }
9
+ }
10
+ @return null;
11
+ }
12
+
13
+ @function mergeColorMaps($map1, $map2) {
14
+ $merged: $map1;
15
+ @if type-of($map2) == 'map' {
16
+ @each $name, $components in $map2 {
17
+ @if (type-of($name) == 'string') {
18
+ $value: getColorVariations($components);
19
+ @if $value {
20
+ $merged: map-merge($merged, ($name: $value));
21
+ }
22
+ }
23
+ }
24
+ }
25
+ @return $merged;
26
+ }
27
+
28
+ @function getColorVariations($components) {
29
+ /**
30
+ * Get color variations from a single color or list of colors
31
+ * @param {color|list} components - list requires atlest one element
32
+ * @return null | $color-base, $color-invert, $color-light, $color-dark, $gradient)
33
+ */
34
+ @if (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1 {
35
+ $color-base: null;
36
+ $color-invert: null;
37
+ $color-light: null;
38
+ $color-dark: null;
39
+ $gradient: null;
40
+
41
+ // The param can either be a single color
42
+ // or a list of 2 colors
43
+ @if type-of($components) == 'color' {
44
+ $color-base: $components;
45
+ $color-invert: findColorInvert($color-base);
46
+ $color-light: findLightColor($color-base);
47
+ $color-dark: findDarkColor($color-base);
48
+ }
49
+ @else if type-of($components) == 'list' {
50
+ $color-base: nth($components, 1);
51
+ // base, invert, light, dark, and graident are provided
52
+ @if length($components) > 4 {
53
+ $color-invert: nth($components, 2);
54
+ $color-light: nth($components, 3);
55
+ $color-dark: nth($components, 4);
56
+ $gradient: nth($components, 5);
57
+ }
58
+ // base, invert, light, and dark are provided
59
+ @else if length($components) > 3 {
60
+ $color-invert: nth($components, 2);
61
+ $color-light: nth($components, 3);
62
+ $color-dark: nth($components, 4);
63
+ }
64
+ // base, invert, and light are provided
65
+ @else if length($components) > 2 {
66
+ $color-invert: nth($components, 2);
67
+ $color-light: nth($components, 3);
68
+ $color-dark: findDarkColor($color-base);
69
+ }
70
+ // base, invert|gradient provided
71
+ @else {
72
+ @if type-of(nth($components, 2)) == 'color' {
73
+ $color-invert: nth($components, 2);
74
+ }
75
+ @else {
76
+ $color-invert: findColorInvert($color-base);
77
+ $gradient: nth($components, 2);
78
+ }
79
+ $color-light: findLightColor($color-base);
80
+ $color-dark: findDarkColor($color-base);
81
+ }
82
+ }
83
+ @if (type-of($gradient) == 'list') {
84
+ // removes brackets around gradient
85
+ // $list: ();
86
+ // $gradient: join($list, $gradient);
87
+ $gradient: linear-gradient($gradient);
88
+ }
89
+ // We only want to merge the map if the color base is an actual color
90
+ @if type-of($color-base) == 'color' {
91
+ @return ($color-base, $color-invert, $color-light, $color-dark, $gradient);
92
+ }
93
+ }
94
+ @return null;
95
+ }
96
+
97
+ @function colorOverride($default, $color, $property) {
98
+ // UNUSED
99
+ @if (map-get($btn-color-settings, "#{$color}-#{$property}")) {
100
+ @return map-get($btn-color-settings, "#{$color}-#{$property}");
101
+ }
102
+ @else {
103
+ @return $default;
104
+ }
105
+ }
106
+
107
+ @function powerNumber($number, $exp) {
108
+ $value: 1;
109
+ @if $exp > 0 {
110
+ @for $i from 1 through $exp {
111
+ $value: $value * $number;
112
+ }
113
+ }
114
+ @else if $exp < 0 {
115
+ @for $i from 1 through -$exp {
116
+ $value: $value / $number;
117
+ }
118
+ }
119
+ @return $value;
120
+ }
121
+
122
+ @function colorLuminance($color) {
123
+ @if type-of($color) != 'color' {
124
+ @return 0.55;
125
+ }
126
+ $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color));
127
+ @each $name, $value in $color-rgb {
128
+ $adjusted: 0;
129
+ $value: $value / 255;
130
+ @if $value < 0.03928 {
131
+ $value: $value / 12.92;
132
+ }
133
+ @else {
134
+ $value: ($value + .055) / 1.055;
135
+ $value: powerNumber($value, 2);
136
+ }
137
+ $color-rgb: map-merge($color-rgb, ($name: $value));
138
+ }
139
+ @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722);
140
+ }
141
+
142
+ @function encodecolor($string) {
143
+ @if type-of($string) == 'color' {
144
+ $hex: str-slice(ie-hex-str($string), 4);
145
+ $string:unquote("#{$hex}");
146
+ }
147
+ $string: '%23' + $string;
148
+ @return $string;
149
+ }
150
+
151
+ @function findLightColor($color) {
152
+ @if type-of($color) == 'color' {
153
+ $l: 96%;
154
+ @if lightness($color) > 96% {
155
+ $l: lightness($color);
156
+ }
157
+ @return change-color($color, $lightness: $l);
158
+ }
159
+ @return $body-background;
160
+ }
161
+
162
+ @function findDarkColor($color) {
163
+ @if type-of($color) == 'color' {
164
+ $base-l: 29%;
165
+ $luminance: colorLuminance($color);
166
+ $luminance-delta: (0.53 - $luminance);
167
+ $target-l: round($base-l + ($luminance-delta * 53));
168
+ @return change-color($color, $lightness: max($base-l, $target-l));
169
+ }
170
+ @return $text-strong;
171
+ }
172
+
173
+ @function findColorInvert($color) {
174
+ @if (colorLuminance($color) > 0.55) {
175
+ @return rgba(#000, 0.7);
176
+ }
177
+ @else {
178
+ @return #fff;
179
+ }
180
+ }
181
+
182
+ @function cherryRgba($color, $alpha) {
183
+ @if type-of($color) != 'color' {
184
+ @return $color;
185
+ }
186
+ @return rgba($color, $alpha);
187
+ }
188
+
189
+ @function cherryDarken($color, $amount) {
190
+ @if type-of($color) != 'color' {
191
+ @return $color;
192
+ }
193
+ @return darken($color, $amount);
194
+ }
195
+
196
+ @function cherryLighten($color, $amount) {
197
+ @if type-of($color) != 'color' {
198
+ @return $color;
199
+ }
200
+ @return lighten($color, $amount);
201
+ }
@@ -0,0 +1,14 @@
1
+ @import "variables.scss";
2
+ @import "variables-computed.scss";
3
+ @import "base-normalize.scss";
4
+ @import "buttons.scss";
5
+ @import "columns.scss";
6
+ @import "elements.scss";
7
+ @import "forms.scss";
8
+ @import "forms-vue-select.scss";
9
+ @import "layout.scss";
10
+ @import "modal.scss";
11
+ @import "utilities.scss";
12
+ @import "spacing.scss";
13
+ @import "tooltips.scss";
14
+ @import "typography.scss";
@@ -0,0 +1,207 @@
1
+ $wrapper-width: 1200px !default;
2
+ $wrapper-padding: 45px !default;
3
+
4
+ /* ---- Wrapper ---------------------- */
5
+
6
+ .wrapper {
7
+ margin: 0 auto;
8
+ max-width: $wrapper-width;
9
+ }
10
+ .ham1,
11
+ .wrapper {
12
+ padding-left: $wrapper-padding;
13
+ padding-right: $wrapper-padding;
14
+ }
15
+ @media (max-width: 550px) {
16
+ .wrapper {
17
+ padding-left: $wrapper-padding * 0.7;//30px
18
+ padding-right: $wrapper-padding * 0.7;
19
+ }
20
+ }
21
+
22
+ /* ---- Media block ------------------ */
23
+
24
+ /*
25
+ Hint: imploy new layouts within modules via .media-layout-xx
26
+ From: philipwalton.github.io/solved-by-flexbox/demos/media-object */
27
+
28
+ .media {
29
+ display: -ms-flexbox;
30
+ display: flex;
31
+ -ms-flex-align: start;
32
+ align-items: flex-start;
33
+ }
34
+ .media>img,
35
+ .media>.media-img {
36
+ margin-right: 1rem;
37
+ }
38
+ .media>.media-bd {
39
+ -ms-flex: 1;
40
+ flex: 1;
41
+ }
42
+ .media>.media-end {
43
+ margin-left: 1rem;
44
+ }
45
+
46
+ /* modifiers */
47
+
48
+ .media-right>img,
49
+ .media-right>.media-img {
50
+ -ms-flex-order: 1;
51
+ order: 1;
52
+ margin-right: 0;
53
+ margin-left: 1rem;
54
+ }
55
+ .media-center {
56
+ -ms-flex-align: center;
57
+ align-items: center;
58
+ }
59
+
60
+ /* ---- Cards ------------------------ */
61
+
62
+ .card {
63
+ position: relative;
64
+ display: block;
65
+ text-align: left;
66
+ margin: 0px 0px 2em;
67
+ border-radius: 5px;
68
+ box-shadow: 0 0 60px rgba(0, 0, 0, 0.08);
69
+ transition: transform 0.3s ease;
70
+ transform: translateZ(0);
71
+ }
72
+ .card-image {
73
+ display: block;
74
+ }
75
+ .card-image-cover {
76
+ position: relative;
77
+ padding-bottom: 68%;
78
+ }
79
+ .no-image {
80
+ padding-top: 1em;
81
+ padding-bottom: 0;
82
+ }
83
+ .card-image img {
84
+ position: absolute;
85
+ width: 100%;
86
+ height: 100%;
87
+ border-radius: 5px 5px 0 0;
88
+ vertical-align: top;
89
+ }
90
+ .card-image-cover img {
91
+ width: 100%;
92
+ height: 100%;
93
+ position: absolute;
94
+ }
95
+ .card-image-only img {
96
+ border-radius: 5px;
97
+ }
98
+ .card-body {
99
+ padding: 8%;
100
+ padding: 27px;
101
+ /* flex: 1 1 0%; */
102
+ }
103
+ .card-text {
104
+ -ms-flex: 1 1 auto;
105
+ flex: 1 1 auto;
106
+ }
107
+ .card-title {
108
+ margin-bottom: 0.5em;
109
+ }
110
+ .card-time {
111
+ display: block;
112
+ font-size: 0.75em;
113
+ line-height: 1.5em;
114
+ margin-bottom: 1em;
115
+ }
116
+ .card-btn {
117
+ display: block;
118
+ font-size: 14px;
119
+ line-height: 1.5em;
120
+ padding: 13px;
121
+ text-align: center;
122
+ border-radius: 5px;
123
+ margin-bottom: 0.3em;
124
+ border: 1px solid #e1e4eb;
125
+ transition: all 0.3s ease;
126
+ }
127
+
128
+ /* Hover */
129
+
130
+ .card:hover {
131
+ -ms-transform: translateY(-3px);
132
+ transform: translateY(-3px);
133
+ }
134
+ .card-btn:hover {
135
+ background-color: #e1e4eb3d
136
+ }
137
+
138
+ /* Card styles */
139
+
140
+ .cards-style2 .card {
141
+ transition: opacity 0.3s ease;
142
+ }
143
+ .cards-style2 .card:hover {
144
+ transform: none;
145
+ opacity: 0.8;
146
+ }
147
+
148
+ /* Card layouts */
149
+
150
+ .card-deck {
151
+ display: -ms-flexbox;
152
+ display: flex;
153
+ -ms-flex-flow: row wrap;
154
+ flex-flow: row wrap;
155
+ margin-right: -15px;
156
+ margin-left: -15px;
157
+ }
158
+ .card-deck .card {
159
+ display: -ms-flexbox;
160
+ display: flex;
161
+ -ms-flex: 1 1 0px;
162
+ flex: 1 1 0;
163
+ -ms-flex-direction: column;
164
+ flex-direction: column;
165
+ min-width: 0;
166
+ margin-right: 15px;
167
+ margin-left: 15px;
168
+ }
169
+ .card-columns {
170
+ position: relative;
171
+ margin: 0 auto 1.5em;
172
+ }
173
+ .card-columns:after {
174
+ content: "";
175
+ clear: both;
176
+ display: block;
177
+ }
178
+ .card-columns .card {
179
+ width: 333px;
180
+ margin: 0;
181
+ }
182
+ @media (max-width: 800px) {
183
+ .card-columns {
184
+ width: auto !important;
185
+ height: auto !important;
186
+ margin-bottom: 0;
187
+ }
188
+ .card-columns .card {
189
+ position: relative !important;
190
+ width: 100%;
191
+ max-width: 400px;
192
+ top: auto !important;
193
+ left: auto !important;
194
+ margin: 0 auto 1.5em;
195
+ }
196
+ }
197
+ @media (max-width: 590px) {
198
+ .card {
199
+ margin: 0px 0px 1.5em;
200
+ }
201
+ .card-image.has-image {
202
+ padding-bottom: 55%;
203
+ }
204
+ .card-btn {
205
+ margin-top: 9%;
206
+ }
207
+ }
@@ -0,0 +1,82 @@
1
+ /* ---- Modal ------------------------ */
2
+
3
+ .modal {
4
+ display: block;
5
+ position: fixed;
6
+ top: 0;
7
+ bottom: 0;
8
+ left: -101%;
9
+ width: 100%;
10
+ z-index: 20;
11
+ transition: all 0s 0.3s linear;
12
+ text-align: center;
13
+ }
14
+ .modal .overlay {
15
+ background-color: rgba(255, 255, 255, 0.93);
16
+ position: absolute;
17
+ top: 0;
18
+ bottom: 0;
19
+ left: 0;
20
+ right: 0;
21
+ opacity: 0.001;
22
+ transition: all 0.3s ease;
23
+ }
24
+ .modal .table {
25
+ width: 100%;
26
+ }
27
+ .modal .table .td {
28
+ padding: 0 1rem;
29
+ }
30
+ .modal .table > div {}
31
+ .modal .modal-body-wrapper {
32
+ position: relative;
33
+ max-width: 923px;
34
+ margin: 0 auto 100px;
35
+ border-radius: 6px;
36
+ opacity: 0.001;
37
+ transform: scale(0.96);
38
+ transition: all 0.2s ease;
39
+ }
40
+ .modal .modal-header,
41
+ .modal .modal-body {
42
+ // padding: 14px 60px;
43
+ background-color: rgba(255, 255, 255, 0);
44
+ }
45
+ .modal .modal-header {
46
+ text-align: center;
47
+ position: relative;
48
+ margin-bottom: 0;
49
+ }
50
+ .modal .modal-header .x1 {
51
+ top: 0.9rem;
52
+ right: 0.9rem;
53
+ &:hover {}
54
+ }
55
+ .modal .modal-body {
56
+ margin: 0;
57
+ min-height: 0;
58
+ }
59
+ @media (max-width: 550px) {
60
+ .modal .modal-body-wrapper {
61
+ margin-bottom: 1rem;
62
+ }
63
+ }
64
+
65
+ /* Modal active */
66
+
67
+ .modal.active {
68
+ left: 0;
69
+ transition: all 0s 0s linear;
70
+ }
71
+ .modal.active .overlay {
72
+ opacity: 0.999;
73
+ transition: all 0.2s ease;
74
+ }
75
+ .modal.active .modal-body-wrapper {
76
+ opacity: 0.999;
77
+ transform: translateY(0);
78
+ transition: all 0.3s ease;
79
+ }
80
+
81
+ /* Modal types */
82
+ /* ... */