GIPainter-helpers 0.2.3 → 0.2.5

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.
@@ -1,187 +1,135 @@
1
- //-----------------------------------
2
- // HELPER
3
- // PADDINGS & MARGINS CLASSES GENERATION
4
- //-----------------------------------
5
-
6
- // From Bootstrap 4
7
-
8
- /*----------------
9
- Margin and Padding
10
- ----------------*/
11
-
12
- // Grid breakpoints
13
- //
14
- // Define the minimum dimensions at which your layout will change,
15
- // adapting to different screen sizes, for use in media queries.
16
- $grid-breakpoints: (
17
- xs: 0,
18
- sm: 576px,
19
- md: 768px,
20
- lg: 992px,
21
- xl: 1200px
22
- ) !default;
23
-
24
- // Minimum breakpoint width. Null for the smallest (first) breakpoint.
25
- //
26
- // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px))
27
- // 576px
28
- @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
29
- $min: map-get($breakpoints, $name);
30
- @return if($min != 0, $min, null);
31
- }
32
-
33
- // Maximum breakpoint width. Null for the largest (last) breakpoint.
34
- // The maximum value is calculated as the minimum of the next one less 0.1.
35
- //
36
- // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px))
37
- // 767px
38
- @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
39
- $next: breakpoint-next($name, $breakpoints);
40
- @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
41
- }
42
-
43
- // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
44
- // Useful for making responsive utilities.
45
- //
46
- // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px))
47
- // "" (Returns a blank string)
48
- // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px))
49
- // "-sm"
50
- @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
51
- @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
52
- }
53
-
54
- // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
55
- // Makes the @content apply to the given breakpoint and wider.
56
- @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
57
- $min: breakpoint-min($name, $breakpoints);
58
- @if $min {
59
- @media (min-width: $min) {
60
- @content;
61
- }
62
- } @else {
63
- @content;
64
- }
65
- }
66
-
67
- // Spacing
68
- //
69
- // Control the default styling of most Bootstrap elements by modifying these
70
- // variables. Mostly focused on spacing.
71
- // You can add more entries to the $spacers map, should you need more variation.
72
-
73
- $spacer: 1rem !default;
74
- $spacer-x: $spacer !default;
75
- $spacer-y: $spacer !default;
76
- $spacers: (
77
- 0: (
78
- x: 0,
79
- y: 0
80
- ),
81
- 1: (
82
- x: ($spacer-x * .25),
83
- y: ($spacer-y * .25)
84
- ),
85
- 2: (
86
- x: ($spacer-x * .5),
87
- y: ($spacer-y * .5)
88
- ),
89
- 3: (
90
- x: $spacer-x,
91
- y: $spacer-y
92
- ),
93
- 4: (
94
- x: ($spacer-x * 1.5),
95
- y: ($spacer-y * 1.5)
96
- ),
97
- 5: (
98
- x: ($spacer-x * 3),
99
- y: ($spacer-y * 3)
100
- )
101
- ) !default;
102
-
103
- ////
104
- /// @access public
105
- /// @group Margin/Padding
106
- /// @type Margin & Paddings
107
- ////
108
-
109
- /// Margins & Paddings wicth all breakpoints, from xs to xl and X-Y positions.
110
- ///
111
- /// ! Max Padding/Margin Values : 5
112
- /// @example css - class="mg/pd(Pos)-(value)"
113
- /// .mgt-2 {
114
- /// margin-top: 2px;
115
- /// }
116
- /// @example css - class="mg(Pos-X/Y)-(breakpoint)-(value)"
117
- /// .mgy-sm-4 {
118
- /// @media (min-width: 576px) {
119
- /// margin-top: 4px;
120
- /// margin-bottom: 4px;
121
- /// }
122
- /// }
123
-
124
- $GI_spacing : mg/pd(Pos)-(value);
125
-
126
- @each $breakpoint in map-keys($grid-breakpoints) {
127
- @include media-breakpoint-up($breakpoint) {
128
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
129
-
130
- @each $prop, $abbrev in (margin: mg, padding: pd) {
131
- @each $size, $lengths in $spacers {
132
- $length-x: map-get($lengths, x);
133
- $length-y: map-get($lengths, y);
134
-
135
- .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length-y $length-x !important; }
136
- .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top: $length-y !important; }
137
- .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right: $length-x !important; }
138
- .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length-y !important; }
139
- .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left: $length-x !important; }
140
- .#{$abbrev}x#{$infix}-#{$size} {
141
- #{$prop}-right: $length-x !important;
142
- #{$prop}-left: $length-x !important;
143
- }
144
- .#{$abbrev}y#{$infix}-#{$size} {
145
- #{$prop}-top: $length-y !important;
146
- #{$prop}-bottom: $length-y !important;
147
- }
148
- }
149
- }
150
-
151
- // Some special margin utils
152
- .m#{$infix}-auto { margin: auto !important; }
153
- .mt#{$infix}-auto { margin-top: auto !important; }
154
- .mr#{$infix}-auto { margin-right: auto !important; }
155
- .mb#{$infix}-auto { margin-bottom: auto !important; }
156
- .ml#{$infix}-auto { margin-left: auto !important; }
157
- .mx#{$infix}-auto {
158
- margin-right: auto !important;
159
- margin-left: auto !important;
160
- }
161
- .my#{$infix}-auto {
162
- margin-top: auto !important;
163
- margin-bottom: auto !important;
164
- }
165
- }
166
- }
167
-
168
- /*----------------
169
- Display utilities
170
- ----------------*/
171
-
172
- @each $breakpoint in map-keys($grid-breakpoints) {
173
- @include media-breakpoint-up($breakpoint) {
174
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
175
-
176
- .d#{$infix}-none { display: none !important; }
177
- .d#{$infix}-inline { display: inline !important; }
178
- .d#{$infix}-inline-block { display: inline-block !important; }
179
- .d#{$infix}-block { display: block !important; }
180
- .d#{$infix}-table { display: table !important; }
181
- .d#{$infix}-table-cell { display: table-cell !important; }
182
- .d#{$infix}-flex { display: flex !important; }
183
- .d#{$infix}-inline-flex { display: inline-flex !important; }
184
- }
185
- }
186
-
187
-
1
+ //-----------------------------------
2
+ // HELPER
3
+ // PADDINGS & MARGINS CLASSES GENERATION
4
+ //-----------------------------------
5
+
6
+ // From Bootstrap 4
7
+
8
+ /*----------------
9
+ Margin and Padding
10
+ ----------------*/
11
+
12
+ ////
13
+ /// @access public
14
+ /// @group Margin/Padding
15
+ /// @type Margin & Paddings
16
+ ////
17
+
18
+ /// Margins & Paddings wicth all breakpoints, from xs to xl and X-Y positions.
19
+ ///
20
+ /// ! Max Padding/Margin Values : 5
21
+ /// @example css - class="mg/pd(Pos)-(value)"
22
+ /// .mgt-2 {
23
+ /// margin-top: 2px;
24
+ /// }
25
+ /// @example css - class="mg(Pos-X/Y)-(breakpoint)-(value)"
26
+ /// .mgy-sm-4 {
27
+ /// @media (min-width: 576px) {
28
+ /// margin-top: 4px;
29
+ /// margin-bottom: 4px;
30
+ /// }
31
+ /// }
32
+
33
+ @each $prop, $abbrev in (margin: mg, padding: pd) {
34
+ @each $size, $lengths in $spacers {
35
+ $length-x: map-get($lengths, x);
36
+ $length-y: map-get($lengths, y);
37
+
38
+ .#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x; }
39
+ .#{$abbrev}t-#{$size} { #{$prop}-top: $length-y; }
40
+ .#{$abbrev}r-#{$size} { #{$prop}-right: $length-x; }
41
+ .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y; }
42
+ .#{$abbrev}l-#{$size} { #{$prop}-left: $length-x; }
43
+ .#{$abbrev}x-#{$size} {
44
+ #{$prop}-right: $length-x;
45
+ #{$prop}-left: $length-x;
46
+ }
47
+ .#{$abbrev}y-#{$size} {
48
+ #{$prop}-top: $length-y;
49
+ #{$prop}-bottom: $length-y;
50
+ }
51
+ }
52
+ }
53
+
54
+ // Some special margin utils
55
+ .m-auto { margin: auto; }
56
+ .mt-auto { margin-top: auto; }
57
+ .mr-auto { margin-right: auto; }
58
+ .mb-auto { margin-bottom: auto; }
59
+ .ml-auto { margin-left: auto; }
60
+ .mx-auto {
61
+ margin-right: auto;
62
+ margin-left: auto;
63
+ }
64
+ .my-auto {
65
+ margin-top: auto;
66
+ margin-bottom: auto;
67
+ }
68
+
69
+ @each $breakpoint-name, $breakpoint-value in $default_breakpoints {
70
+ @include mquery($breakpoint-value) {
71
+ @each $prop, $abbrev in (margin: mg, padding: pd) {
72
+ @each $size, $lengths in $spacers {
73
+ $length-x: map-get($lengths, x);
74
+ $length-y: map-get($lengths, y);
75
+
76
+ .#{$abbrev}#{$breakpoint-name}-#{$size} { #{$prop}: $length-y $length-x; }
77
+ .#{$abbrev}t#{$breakpoint-name}-#{$size} { #{$prop}-top: $length-y; }
78
+ .#{$abbrev}r#{$breakpoint-name}-#{$size} { #{$prop}-right: $length-x; }
79
+ .#{$abbrev}b#{$breakpoint-name}-#{$size} { #{$prop}-bottom: $length-y; }
80
+ .#{$abbrev}l#{$breakpoint-name}-#{$size} { #{$prop}-left: $length-x; }
81
+ .#{$abbrev}x#{$breakpoint-name}-#{$size} {
82
+ #{$prop}-right: $length-x;
83
+ #{$prop}-left: $length-x;
84
+ }
85
+ .#{$abbrev}y#{$breakpoint-name}-#{$size} {
86
+ #{$prop}-top: $length-y;
87
+ #{$prop}-bottom: $length-y;
88
+ }
89
+ }
90
+ }
91
+
92
+ // Some special margin utils
93
+ .m#{$breakpoint-name}-auto { margin: auto; }
94
+ .mt#{$breakpoint-name}-auto { margin-top: auto; }
95
+ .mr#{$breakpoint-name}-auto { margin-right: auto; }
96
+ .mb#{$breakpoint-name}-auto { margin-bottom: auto; }
97
+ .ml#{$breakpoint-name}-auto { margin-left: auto; }
98
+ .mx#{$breakpoint-name}-auto {
99
+ margin-right: auto;
100
+ margin-left: auto;
101
+ }
102
+ .my#{$breakpoint-name}-auto {
103
+ margin-top: auto;
104
+ margin-bottom: auto;
105
+ }
106
+ }
107
+ }
108
+
109
+ /*----------------
110
+ Display utilities
111
+ ----------------*/
112
+
113
+ .d-none { display: none; }
114
+ .d-inline { display: inline; }
115
+ .d-inline-block { display: inline-block; }
116
+ .d-block { display: block; }
117
+ .d-table { display: table; }
118
+ .d-table-cell { display: table-cell; }
119
+ .d-flex { display: flex; }
120
+ .d-inline-flex { display: inline-flex; }
121
+
122
+ @each $breakpoint-name, $breakpoint-value in $default_breakpoints {
123
+ @include mquery($breakpoint-value) {
124
+ .d#{$breakpoint-name}-none { display: none; }
125
+ .d#{$breakpoint-name}-inline { display: inline; }
126
+ .d#{$breakpoint-name}-inline-block { display: inline-block; }
127
+ .d#{$breakpoint-name}-block { display: block; }
128
+ .d#{$breakpoint-name}-table { display: table; }
129
+ .d#{$breakpoint-name}-table-cell { display: table-cell; }
130
+ .d#{$breakpoint-name}-flex { display: flex; }
131
+ .d#{$breakpoint-name}-inline-flex { display: inline-flex; }
132
+ }
133
+ }
134
+
135
+
@@ -1,180 +1,147 @@
1
- //-----------------------------------
2
- // HELPER
3
- // TYPOGRAPHY CLASSES GENERATION
4
- //-----------------------------------
5
-
6
- ////
7
- /// @access public
8
- /// @group Typography
9
- /// @type typography
10
- ////
11
-
12
- //** Default Typography
13
-
14
- /// @prop {typography} font-family-sans-serif [$font-family-sans-serif]
15
- /// @prop {typography} font-family-serif [$font-family-serif]
16
- /// @prop {typography} gray-font-family-monospace [$font-family-monospace]
17
- /// @prop {typography} gray-font-family-base [$font-family-base]
18
-
19
- $default_typo: (
20
- font-family-sans-serif: $font-family-sans-serif,
21
- font-family-serif: $font-family-serif,
22
- font-family-monospace: $font-family-monospace,
23
- font-family-base: $font-family-base
24
- );
25
-
26
- /*----------------
27
- Fonts Family
28
- ----------------*/
29
-
30
- @each $name, $value in $default_typo {
31
- .#{"" + $name} {
32
- font-family: $value;
33
- }
34
- }
35
-
36
- //** Default Typography size
37
-
38
- /// @prop {typography} font-size-base [$font-size-base]
39
- /// @prop {typography} font-size-large [$font-size-large]
40
- /// @prop {typography} font-size-small [$font-size-small]
41
-
42
- $default_typo_size: (
43
- font-size-base: $font-size-base,
44
- font-size-large: $font-size-large,
45
- font-size-small: $font-size-small
46
- );
47
-
48
- /*----------------
49
- Fonts sizes
50
- ----------------*/
51
-
52
- @each $name, $value in $default_typo_size {
53
- .#{"" + $name} {
54
- font-size: $value;
55
- }
56
- }
57
-
58
- .small {
59
- font-size: floor((100% * $font-size-small / $font-size-base));
60
- }
61
-
62
- /*----------------
63
- Lead-Sizes
64
- ----------------*/
65
-
66
- .lead {
67
- margin-bottom: $line-height-computed;
68
- @include font-size( floor(($font-size-base * 1.15)));
69
- font-weight: 300;
70
- line-height: 1.4;
71
-
72
- @media (min-width: $screen-sm) {
73
- @include font-size($font-size-base * 1.5);
74
- }
75
- }
76
-
77
- $max-lead : 28;
78
-
79
- @for $i from 10 through $max-lead{
80
-
81
- .lead-#{"" + $i}{
82
- font-size: $i + px;
83
- line-height: $i;
84
- }
85
- }
86
-
87
- /*----------------
88
- Fonts Weight & Styles
89
- ----------------*/
90
-
91
- $style: normal, bold, bolder;
92
- @each $i in $style {
93
- .#{$i}{
94
- font-weight: #{$i};
95
- }
96
- }
97
-
98
- //Emphasis
99
- .italic{
100
- font-style: italic;
101
- }
102
-
103
- //Strong
104
- .strong{
105
- font-family: inherit;
106
- font-weight: bold;
107
- }
108
-
109
- /*----------------
110
- Text Align
111
- ----------------*/
112
-
113
- $style: left, center, right, justify;
114
- @each $i in $style {
115
- .#{$i}{
116
- text-align: #{$i};
117
- }
118
- }
119
-
120
- .text-nowrap{
121
- white-space: nowrap;
122
- }
123
-
124
- .truncate {
125
- @include truncate;
126
- }
127
-
128
- /*----------------
129
- Text Transform
130
- ----------------*/
131
-
132
- $style: lowercase, capitalize, uppercase;
133
- @each $i in $style {
134
- .#{$i}{
135
- text-transform: #{$i};
136
- }
137
- }
138
-
139
- /*----------------
140
- Text Decoration
141
- ----------------*/
142
-
143
- $style: underline, none;
144
- @each $i in $style {
145
- .decoration-#{$i}{
146
- text-decoration: #{$i};
147
- }
148
- }
149
-
150
-
151
-
152
- .mark {
153
- background-color: $brand-warning;
154
- padding: .2em;
155
- }
156
-
157
- //Horizontal Rule
158
- .separator{
159
- clear: both;
160
- margin: 0;
161
- border: 0;
162
- height: 2px;
163
- background: $gray;
164
- }
165
-
166
- // Abbreviations and acronyms
167
- .initialism {
168
- font-size: 90%;
169
- text-transform: uppercase;
170
- }
171
-
172
- //Deleted
173
- .delete{
174
- text-decoration: line-through;
175
- }
176
-
177
- //Underline
178
- .underline{
179
- text-decoration: underline;
1
+ //-----------------------------------
2
+ // HELPER
3
+ // TYPOGRAPHY CLASSES GENERATION
4
+ //-----------------------------------
5
+
6
+ ////
7
+ /// @access public
8
+ /// @group Typography
9
+ /// @type typography
10
+ ////
11
+
12
+ /*----------------
13
+ Fonts Family
14
+ ----------------*/
15
+
16
+ @each $name, $value in $default_typo {
17
+ .#{"" + $name} {
18
+ font-family: $value;
19
+ }
20
+ }
21
+
22
+ /*----------------
23
+ Fonts sizes
24
+ ----------------*/
25
+
26
+ @each $name, $value in $default_typo_size {
27
+ .#{"" + $name} {
28
+ @include font-size($value);
29
+ }
30
+ }
31
+
32
+ .small {
33
+ @include font-size($font-size-small);
34
+ }
35
+
36
+ /*----------------
37
+ Lead-Sizes
38
+ ----------------*/
39
+
40
+ .lead {
41
+ margin-bottom: $line-height-computed;
42
+ @include font-size( floor($font-size-base * 1.15));
43
+ @include line-height( floor($font-size-base * 1.15));
44
+ font-weight: 300;
45
+
46
+ @include mquery($screen-sm) {
47
+ @include font-size($font-size-base * 1.5);
48
+ }
49
+ }
50
+
51
+ @for $i from 10 through $max-lead{
52
+ .lead-#{"" + $i}{
53
+ @include font-size($i);
54
+ @include line-height($i);
55
+ }
56
+ }
57
+
58
+ /*----------------
59
+ Fonts Weight & Styles
60
+ ----------------*/
61
+
62
+ @each $i in $weight-style {
63
+ .#{$i}{
64
+ font-weight: #{$i};
65
+ }
66
+ }
67
+
68
+ //Emphasis
69
+ .italic{
70
+ font-style: italic;
71
+ }
72
+
73
+ //Strong
74
+ .strong{
75
+ font-family: inherit;
76
+ font-weight: bold;
77
+ }
78
+
79
+ /*----------------
80
+ Text Align
81
+ ----------------*/
82
+
83
+ @each $i in $align-style {
84
+ .#{$i}{
85
+ text-align: #{$i};
86
+ }
87
+ }
88
+
89
+ .text-nowrap{
90
+ white-space: nowrap;
91
+ }
92
+
93
+ .truncate {
94
+ @include truncate;
95
+ }
96
+
97
+ /*----------------
98
+ Text Transform
99
+ ----------------*/
100
+
101
+ @each $i in $style {
102
+ .#{$i}{
103
+ text-transform: #{$i};
104
+ }
105
+ }
106
+
107
+ /*----------------
108
+ Text Decoration
109
+ ----------------*/
110
+
111
+ @each $i in $style {
112
+ .decoration-#{$i}{
113
+ text-decoration: #{$i};
114
+ }
115
+ }
116
+
117
+
118
+
119
+ .mark {
120
+ background-color: $brand-warning;
121
+ padding: .2em;
122
+ }
123
+
124
+ //Horizontal Rule
125
+ .separator{
126
+ clear: both;
127
+ margin: 0;
128
+ border: 0;
129
+ height: 2px;
130
+ background: $gray;
131
+ }
132
+
133
+ // Abbreviations and acronyms
134
+ .initialism {
135
+ font-size: 90%;
136
+ text-transform: uppercase;
137
+ }
138
+
139
+ //Deleted
140
+ .delete{
141
+ text-decoration: line-through;
142
+ }
143
+
144
+ //Underline
145
+ .underline{
146
+ text-decoration: underline;
180
147
  }