github-docs 0.0.17 → 0.0.18

Sign up to get free protection for your applications and to get access to all the features.
@@ -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
+ /* ... */