github-docs 0.0.7 → 0.0.17

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,201 +0,0 @@
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
- }
@@ -1,14 +0,0 @@
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";
@@ -1,207 +0,0 @@
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
- }
@@ -1,82 +0,0 @@
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
- /* ... */