Skip to content

Commit a2d9c5a

Browse files
author
AMJones
committed
Adds component and theme functions.
1 parent e8d7735 commit a2d9c5a

File tree

4 files changed

+119
-32
lines changed

4 files changed

+119
-32
lines changed

‎composer.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"css"
1111
],
1212
"homepage": "https://www.github.com/strapless/base",
13-
"version": "1.0.3",
13+
"version": "1.1.0",
1414
"authors": [
1515
{
1616
"name": "Aaron M Jones",

‎scss/functions/_getset.scss‎

Lines changed: 87 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,50 @@
3333
@return map-get($CONSTANTS, $name);
3434
}
3535

36-
@function feature($key) {
37-
@if map-has-key($features,$key) {
38-
@return map-get($features,$key);
36+
@function component($c) {
37+
$cKey: quote($c);
38+
@if map-has-key($components, $cKey) {
39+
$component: map-get($components, $cKey);
40+
@if type-of($component) == "map" {
41+
@if map-has-key($component, "_enabled") {
42+
@return map-get($component, "_enabled");
43+
} @else {
44+
@error "The component `#{$c}` does not indicate whether or not it is enabled.";
45+
}
46+
} @else {
47+
@return $component;
48+
}
49+
}
50+
51+
@error "The component `#{$c}` does not exist in the `$components` map.";
52+
}
53+
54+
@function component-feature($c,$f) {
55+
$cKey: quote($c);
56+
@if not(map-has-key($components,$cKey)) {
57+
@error "The component `#{$c} does not seem to exist within the `$components` map."
58+
} @else {
59+
$component: map-get($components, $cKey);
60+
@if type-of($component) != "map" {
61+
@error "The component `#{$c}` does not have individual features.";
62+
} @else {
63+
$fKey: quote($f);
64+
@if not(map-has-key($component),$fKey) {
65+
@error "The component `#{$c}` does not have a feature named `#{$f}`.";
66+
} @else {
67+
@return map-get($component, $fKey);
68+
}
69+
}
70+
}
71+
}
72+
73+
@function theme($prop) {
74+
$pKey: quote($prop);
75+
@if (map-has-key($theme, $pKey)) {
76+
@return map-get($theme, $pKey);
3977
}
4078

41-
@error "The feature `#{$key}` does not exist in the $features map.";
79+
@error "The property `#{$prop}` is not a key in the `$theme` map.";
4280
}
4381

4482
// region /////////////////////////////////////////////////////////////// Other Functions
@@ -61,17 +99,56 @@
6199

62100
// endregion //////////////////////////////////////////////////////////// End Other Functions
63101

64-
65-
66102
// endregion //////////////////////////////////////////////////////////// End Getter Functions
67103

68104
// region /////////////////////////////////////////////////////////////// Setter Functions
69105

70-
@mixin set-feature($key,$value) {
71-
@if not(variable-exists(features)) {
72-
@error "You may not use the `set-feature` mixin prior without the $features map. Please include `root-variables` prior to this usage."
106+
@mixin set-component($c,$v) {
107+
@if not(variable-exists(components)) {
108+
@error "You may not use the `set-component` mixin prior without the $components map. Please include `root-variables` prior to this usage."
73109
} @else {
74-
$features: set-map-key($features,$key,$value);
110+
@if type-of($v) != "bool" {
111+
@error "You may only set a component to TRUE or FALSE, indicating whether it is enabled";
112+
} @else {
113+
$cKey: quote($c);
114+
@if not(map-has-key($components,$cKey)) {
115+
$components: set-map-key($components, $cKey, $v);
116+
} @else {
117+
$component: map-get($components, $cKey);
118+
@if type-of($component) == "map" {
119+
$component: set-map-key($component, "_enabled", $v);
120+
$components: set-map-key($components, $cKey, $component);
121+
} @else {
122+
$components: set-map-key($components, $cKey, $v);
123+
}
124+
}
125+
}
126+
}
127+
}
128+
129+
@mixin set-component-feature($c, $f, $v) {
130+
@if not(variable_exists(components)) {
131+
@error "You may not use the `set-component-feature` mixin prior without the $components map. Please include `root-variables` prior to this usage."
132+
} @else {
133+
@if type-of($v) != "bool" {
134+
@error "You may only set a component feature to TRUE or FALSE, indicating whether it is enabled";
135+
} @else {
136+
$cKey: quote($c);
137+
@if not(map-has-key($components, $cKey)) {
138+
@error "The component `#{$c} does not seem to exist in the `$components` map!";
139+
} @else {
140+
$component: map-get($components, $cKey);
141+
$fKey: quote($f);
142+
$new : null;
143+
@if type_of($component) != "map" {
144+
$new: ("_enabled": $component, $fKey: $v);
145+
} @else {
146+
$new: set-map-key($component,$fKey,$v);
147+
}
148+
149+
$components: set-map-key($components, $cKey, $new);
150+
}
151+
}
75152
}
76153
}
77154

‎scss/mixins/_rounding.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11

22
@mixin border-radius($radius: $border-radius) {
3-
@if feature(rounded) {
3+
@if theme("rounded") {
44
border-radius: $radius;
55
}
66
}
77

8-
@mixin border-top-radius($radius) {
9-
@if feature(rounded) {
8+
@mixin border-top-radius($radius: $border-radius) {
9+
@if theme("rounded") {
1010
border-top-right-radius: $radius;
1111
border-top-left-radius: $radius;
1212
}
1313
}
1414

15-
@mixin border-right-radius($radius) {
16-
@if feature(rounded) {
15+
@mixin border-right-radius($radius: $border-radius) {
16+
@if theme("rounded") {
1717
border-bottom-right-radius: $radius;
1818
border-top-right-radius: $radius;
1919
}
2020
}
2121

22-
@mixin border-bottom-radius($radius) {
23-
@if feature(rounded) {
22+
@mixin border-bottom-radius($radius: $border-radius) {
23+
@if theme("rounded") {
2424
border-bottom-right-radius: $radius;
2525
border-bottom-left-radius: $radius;
2626
}
2727
}
2828

29-
@mixin border-left-radius($radius) {
30-
@if feature(rounded) {
29+
@mixin border-left-radius($radius: $border-radius) {
30+
@if theme("rounded") {
3131
border-bottom-left-radius: $radius;
3232
border-top-left-radius: $radius;
3333
}

‎scss/variables/_root-variables.scss‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,28 @@ $spacing: (
3030

3131
// region /////////////////////////////////////////////////////////////// Features
3232

33-
$features: (
34-
touch: false,
35-
rounded: true,
36-
shadows: true,
37-
transitions: true,
38-
print: true,
39-
grid: true,
40-
font-icons: true,
41-
svg-icons: false,
42-
font-awesome-icons: false,
43-
unicode-icons: false,
44-
) !global;
33+
$components: (
34+
"card": true,
35+
"display": true,
36+
"flexbox": true,
37+
"grid": true,
38+
"icons": (
39+
"_enabled": true,
40+
"font": true,
41+
"svg": false,
42+
"font-awesome": true,
43+
"unicode": false,
44+
),
45+
"print": true
46+
) !global;
47+
48+
49+
$theme: (
50+
"touch": false,
51+
"rounded": true,
52+
"shadows": true,
53+
"transitions": true,
54+
) !global;
4555

4656
// endregion //////////////////////////////////////////////////////////// End Features
4757

0 commit comments

Comments
 (0)