gerillass 1.2.4 → 1.3.0

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.
Files changed (10) hide show
  1. package/package.json +6 -5
  2. package/scss/_gerillass-prefix.scss +13 -12
  3. package/scss/_gerillass.scss +1 -0
  4. package/scss/library/_background-dots.scss +4 -4
  5. package/scss/library/_ratio-box.scss +2 -2
  6. package/scss/library/_responsive-video.scss +2 -2
  7. package/scss/library/_triangle.scss +4 -4
  8. package/scss/utilities/_clear-unit.scss +1 -1
  9. package/scss/utilities/_convert-to-em.scss +1 -1
  10. package/scss/utilities/_remify.scss +1 -1
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "author": "Halil İbrahim Çakıroğlu",
7
7
  "main": "scss/_gerillass.scss",
8
8
  "license": "Apache-2.0",
9
- "version": "1.2.4",
9
+ "version": "1.3.0",
10
10
  "repository": {
11
11
  "type": "git",
12
12
  "url": "https://github.com/selfishprimate/gerillass"
@@ -40,10 +40,11 @@
40
40
  "test": "jest"
41
41
  },
42
42
  "dependencies": {
43
- "glob": "^7.1.6",
44
- "jest": "^26.1.0",
45
- "node-sass": "^4.14.1",
46
- "sass-true": "^5.0.0"
43
+ "glob": "^7.2.0",
44
+ "jest": "^27.5.1",
45
+ "sass": "^1.49.7",
46
+ "sass-loader": "^12.5.0",
47
+ "sass-true": "^6.0.1"
47
48
  },
48
49
  "devDependencies": {
49
50
  "gulp": "^4.0.2",
package/scss/_gerillass-prefix.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @charset "UTF-8";
2
+ @use "sass:math";
2
3
 
3
4
  @mixin gls-adaptive($gutter: 30px) {
4
5
  $actual-breakpoints: map-remove($map-for-breakpoints, "xsmall");
@@ -107,21 +108,21 @@
107
108
  @if $diagonal == true {
108
109
  background-image: radial-gradient($color $size, transparent 0),
109
110
  radial-gradient($color $size, transparent 0);
110
- background-position: ($gutter / 2) ($gutter / 2),
111
+ background-position: math.div($gutter, 2) math.div($gutter, 2),
111
112
  ($gutter * 2) ($gutter * 2);
112
113
  } @else if $diagonal == false {
113
114
  background-image: radial-gradient($color $size, transparent 0);
114
- background-position: ($gutter / 2) ($gutter / 2);
115
+ background-position: math.div($gutter, 2) math.div($gutter, 2);
115
116
  }
116
117
  } @else if $color {
117
118
  @if $diagonal == true {
118
119
  background-image: radial-gradient(nth($color, 1) $size, transparent 0),
119
120
  radial-gradient(nth($color, length($color)) $size, transparent 0);
120
- background-position: ($gutter / 2) ($gutter / 2),
121
+ background-position: math.div($gutter, 2) math.div($gutter, 2),
121
122
  ($gutter * 2) ($gutter * 2);
122
123
  } @else if $diagonal == false {
123
124
  background-image: radial-gradient(nth($color, 1) $size, transparent 0);
124
- background-position: ($gutter / 2) ($gutter / 2);
125
+ background-position: math.div($gutter, 2) math.div($gutter, 2);
125
126
  @if length($color) > 1 {
126
127
  @error "Please do not pass more than one argument when you disable 'diagonal' property! Simply remove the argument(s) after '#{nth($color, 1)}' to resolve the problem.";
127
128
  }
@@ -975,10 +976,10 @@
975
976
  $width: __convertToNumber(str-slice($ratio, 1, $colon-index - 1));
976
977
  $height: __convertToNumber(str-slice($ratio, $colon-index + 1));
977
978
  }
978
- $calc: ($height / $width) * 100;
979
+ $calc: math.div($height, $width) * 100;
979
980
  padding-top: #{$calc * 1%};
980
981
  } @else if type-of($ratio) == number {
981
- padding-top: (1 / $ratio) * 100%;
982
+ padding-top: math.div(1, $ratio) * 100%;
982
983
  }
983
984
  }
984
985
  }
@@ -1129,10 +1130,10 @@
1129
1130
  $width: __convertToNumber(str-slice($ratio, 1, $colon-index - 1));
1130
1131
  $height: __convertToNumber(str-slice($ratio, $colon-index + 1));
1131
1132
  }
1132
- $calc: ($height / $width) * 100;
1133
+ $calc: math.div($height, $width) * 100;
1133
1134
  padding-top: #{$calc * 1%};
1134
1135
  } @else if type-of($ratio) == number {
1135
- padding-top: (1 / $ratio) * 100%;
1136
+ padding-top: math.div(1, $ratio) * 100%;
1136
1137
  }
1137
1138
  }
1138
1139
  }
@@ -1519,25 +1520,25 @@
1519
1520
  border-style: solid;
1520
1521
  @if $direction == "top"{
1521
1522
  border-color: transparent transparent $color;
1522
- border-width: 0 (nth($size, 1) / 2) if(length($size) == 2, nth($size, 2), nth($size, 1));
1523
+ border-width: 0 math.div(nth($size, 1), 2) if(length($size) == 2, nth($size, 2), nth($size, 1));
1523
1524
  } @else if $direction == "top-right" {
1524
1525
  border-color: transparent $color transparent transparent;
1525
1526
  border-width: 0 nth($size, 1) nth($size, 1) 0;
1526
1527
  } @else if $direction == "right" {
1527
1528
  border-color: transparent transparent transparent $color;
1528
- border-width: (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) 0 (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) nth($size, 1);
1529
+ border-width: math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) 0 math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) nth($size, 1);
1529
1530
  } @else if $direction == "bottom-right" {
1530
1531
  border-color: transparent transparent $color;
1531
1532
  border-width: 0 0 nth($size, 1) nth($size, 1);
1532
1533
  } @else if $direction == "bottom" {
1533
1534
  border-color: $color transparent transparent;
1534
- border-width: if(length($size) == 2, nth($size, 2), nth($size, 1)) (nth($size, 1) / 2) 0;
1535
+ border-width: if(length($size) == 2, nth($size, 2), nth($size, 1)) math.div(nth($size, 1), 2) 0;
1535
1536
  } @else if $direction == "bottom-left" {
1536
1537
  border-color: transparent transparent transparent $color;
1537
1538
  border-width: nth($size, 1) 0 0 nth($size, 1);
1538
1539
  } @else if $direction == "left" {
1539
1540
  border-color: transparent $color transparent transparent;
1540
- border-width: (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) nth($size, 1) (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) 0;
1541
+ border-width: math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) nth($size, 1) math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) 0;
1541
1542
  } @else if $direction == "top-left" {
1542
1543
  border-color: $color transparent transparent;
1543
1544
  border-width: nth($size, 1) nth($size, 1) 0 0;
package/scss/_gerillass.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @charset "UTF-8";
2
+ @use "sass:math";
2
3
 
3
4
  // https://www.gerillass.com/
4
5
  // Copyright 2020 by Halil İbrahim Çakıroğlu
package/scss/library/_background-dots.scss CHANGED
@@ -12,21 +12,21 @@
12
12
  @if $diagonal == true {
13
13
  background-image: radial-gradient($color $size, transparent 0),
14
14
  radial-gradient($color $size, transparent 0);
15
- background-position: ($gutter / 2) ($gutter / 2),
15
+ background-position: math.div($gutter, 2) math.div($gutter, 2),
16
16
  ($gutter * 2) ($gutter * 2);
17
17
  } @else if $diagonal == false {
18
18
  background-image: radial-gradient($color $size, transparent 0);
19
- background-position: ($gutter / 2) ($gutter / 2);
19
+ background-position: math.div($gutter, 2) math.div($gutter, 2);
20
20
  }
21
21
  } @else if $color {
22
22
  @if $diagonal == true {
23
23
  background-image: radial-gradient(nth($color, 1) $size, transparent 0),
24
24
  radial-gradient(nth($color, length($color)) $size, transparent 0);
25
- background-position: ($gutter / 2) ($gutter / 2),
25
+ background-position: math.div($gutter, 2) math.div($gutter, 2),
26
26
  ($gutter * 2) ($gutter * 2);
27
27
  } @else if $diagonal == false {
28
28
  background-image: radial-gradient(nth($color, 1) $size, transparent 0);
29
- background-position: ($gutter / 2) ($gutter / 2);
29
+ background-position: math.div($gutter, 2) math.div($gutter, 2);
30
30
  @if length($color) > 1 {
31
31
  @error "Please do not pass more than one argument when you disable 'diagonal' property! Simply remove the argument(s) after '#{nth($color, 1)}' to resolve the problem.";
32
32
  }
package/scss/library/_ratio-box.scss CHANGED
@@ -20,10 +20,10 @@
20
20
  $width: __convertToNumber(str-slice($ratio, 1, $colon-index - 1));
21
21
  $height: __convertToNumber(str-slice($ratio, $colon-index + 1));
22
22
  }
23
- $calc: ($height / $width) * 100;
23
+ $calc: math.div($height, $width) * 100;
24
24
  padding-top: #{$calc * 1%};
25
25
  } @else if type-of($ratio) == number {
26
- padding-top: (1 / $ratio) * 100%;
26
+ padding-top: math.div(1, $ratio) * 100%;
27
27
  }
28
28
  }
29
29
  }
package/scss/library/_responsive-video.scss CHANGED
@@ -20,10 +20,10 @@
20
20
  $width: __convertToNumber(str-slice($ratio, 1, $colon-index - 1));
21
21
  $height: __convertToNumber(str-slice($ratio, $colon-index + 1));
22
22
  }
23
- $calc: ($height / $width) * 100;
23
+ $calc: math.div($height, $width) * 100;
24
24
  padding-top: #{$calc * 1%};
25
25
  } @else if type-of($ratio) == number {
26
- padding-top: (1 / $ratio) * 100%;
26
+ padding-top: math.div(1, $ratio) * 100%;
27
27
  }
28
28
  }
29
29
  }
package/scss/library/_triangle.scss CHANGED
@@ -10,25 +10,25 @@
10
10
  border-style: solid;
11
11
  @if $direction == "top"{
12
12
  border-color: transparent transparent $color;
13
- border-width: 0 (nth($size, 1) / 2) if(length($size) == 2, nth($size, 2), nth($size, 1));
13
+ border-width: 0 math.div(nth($size, 1), 2) if(length($size) == 2, nth($size, 2), nth($size, 1));
14
14
  } @else if $direction == "top-right" {
15
15
  border-color: transparent $color transparent transparent;
16
16
  border-width: 0 nth($size, 1) nth($size, 1) 0;
17
17
  } @else if $direction == "right" {
18
18
  border-color: transparent transparent transparent $color;
19
- border-width: (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) 0 (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) nth($size, 1);
19
+ border-width: math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) 0 math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) nth($size, 1);
20
20
  } @else if $direction == "bottom-right" {
21
21
  border-color: transparent transparent $color;
22
22
  border-width: 0 0 nth($size, 1) nth($size, 1);
23
23
  } @else if $direction == "bottom" {
24
24
  border-color: $color transparent transparent;
25
- border-width: if(length($size) == 2, nth($size, 2), nth($size, 1)) (nth($size, 1) / 2) 0;
25
+ border-width: if(length($size) == 2, nth($size, 2), nth($size, 1)) math.div(nth($size, 1), 2) 0;
26
26
  } @else if $direction == "bottom-left" {
27
27
  border-color: transparent transparent transparent $color;
28
28
  border-width: nth($size, 1) 0 0 nth($size, 1);
29
29
  } @else if $direction == "left" {
30
30
  border-color: transparent $color transparent transparent;
31
- border-width: (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) nth($size, 1) (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) 0;
31
+ border-width: math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) nth($size, 1) math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) 0;
32
32
  } @else if $direction == "top-left" {
33
33
  border-color: $color transparent transparent;
34
34
  border-width: nth($size, 1) nth($size, 1) 0 0;
package/scss/utilities/_clear-unit.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @charset "UTF-8";
2
2
 
3
3
  @function __clearUnit($value) {
4
- @return $value / ($value * 0 + 1);
4
+ @return math.div($value, ($value * 0 + 1));
5
5
  }
package/scss/utilities/_convert-to-em.scss CHANGED
@@ -2,6 +2,6 @@
2
2
 
3
3
  @function __convertToEm($value) {
4
4
  $base-value: 16px;
5
- $rem-value: $value / $base-value;
5
+ $rem-value: math.div($value, $base-value);
6
6
  @return $rem-value + unquote("em");
7
7
  }
package/scss/utilities/_remify.scss CHANGED
@@ -2,6 +2,6 @@
2
2
 
3
3
  @function __remify($value) {
4
4
  $base-value: 16px;
5
- $rem-value: $value / $base-value;
5
+ $rem-value: math.div($value, $base-value);
6
6
  @return $rem-value * 1rem;
7
7
  }