Skip to content

Commit f4c8bbc

Browse files
author
AMJones
committed
Initial commit.
1 parent 1624378 commit f4c8bbc

File tree

6 files changed

+425
-0
lines changed

6 files changed

+425
-0
lines changed

‎composer.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "strapless/icons",
3+
"description": "CSS Classes, Mixins and Functions to manage icons for the StrapLess CSS Framework. Also usable for other CSS projects.",
4+
"keywords": [
5+
"sass",
6+
"scss",
7+
"strapless",
8+
"css",
9+
"icons",
10+
"svg",
11+
"font"
12+
],
13+
"homepage": "https://www.github.com/strapless/icons",
14+
"version": "1.0",
15+
"authors": [
16+
{
17+
"name": "Aaron M Jones",
18+
"homepage": "http://www.jonesiscoding.com"
19+
}
20+
],
21+
"license": "MIT",
22+
"require": {
23+
"strapless/colors": "^1.0",
24+
"strapless/base": "^1.1"
25+
}
26+
}

‎scss/_icons-functions.scss‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
@import "strapless/base/scss/base";
2+
@import "root-variables";
3+
4+
// region //////////////////////////////////////////////// Icon Getters
5+
6+
@function icon-feature($f) {
7+
@return component-feature("icons", $f);
8+
}
9+
10+
// @source - [@Stephn-R](https://github.com/sass/sass/issues/1395#issuecomment-57483844)
11+
// @description converts 1 or more characters into a unicode
12+
// @markup {scss}
13+
// unicode("e655"); // "\e655"
14+
@function unicode($str){
15+
@return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"");
16+
}
17+
18+
@function icon-content( $icon ) {
19+
$i: quote( $icon );
20+
@if map-has-key( $icon-characters, $icon ) {
21+
@return unicode( map-get( $icon-characters, $icon ) );
22+
}
23+
24+
@error 'The icon character map does not contain the icon: `#{$icon}`.';
25+
}
26+
27+
// endregion ///////////////////////////////////////////// End Icon Getters
28+
29+
// region //////////////////////////////////////////////// Font Awesome Detection Functions
30+
31+
@function has-font-awesome() {
32+
@if(variable-exists(fa-font-path)) {
33+
@if(variable-exists(fa-font-size-base)) {
34+
@if(variable_exists(fa-line-height-base)) {
35+
@return true;
36+
}
37+
}
38+
}
39+
40+
@return false;
41+
}
42+
43+
@function use-font-awesome() {
44+
@return (icon-feature("font-awesome") and has-font-awesome());
45+
}
46+
47+
// endregion ///////////////////////////////////////////// End Font Awesome Detection Functions
48+
49+
// region //////////////////////////////////////////////// Icon Variable Functions
50+
51+
@function get-icon-prefix() {
52+
@if variable-exists(icon-css-prefix) {
53+
//noinspection SassScssResolvedByNameOnly
54+
@return $icon-css-prefix;
55+
} @else if use-font-awesome() {
56+
//noinspection SassScssUnresolvedVariable
57+
@return $fa-css-prefix;
58+
} @else {
59+
@return ico;
60+
}
61+
}
62+
63+
@function get-icon-font-name() {
64+
@if variable-exists(icon-font-name) {
65+
//noinspection SassScssResolvedByNameOnly
66+
@return $icon-font-name;
67+
} @else if use-font-awesome() {
68+
//noinspection SassScssUnresolvedVariable
69+
@return FontAwesome;
70+
} @else {
71+
@return carrot;
72+
}
73+
}
74+
75+
@function get-icon-font-size() {
76+
@if variable-exists(icon-font-size) {
77+
//noinspection SassScssResolvedByNameOnly
78+
@return $icon-font-size;
79+
} @else if use-font-awesome() {
80+
//noinspection SassScssUnresolvedVariable
81+
@return $fa-font-size-base;
82+
} @else {
83+
@return 16px;
84+
}
85+
}
86+
87+
@function get-icon-line-height() {
88+
@if variable-exists(icon-line-height) {
89+
//noinspection SassScssResolvedByNameOnly
90+
@return $icon-font-size;
91+
} @else if use-font-awesome() {
92+
//noinspection SassScssUnresolvedVariable
93+
@return $fa-font-size-base;
94+
} @else {
95+
@return 16px;
96+
}
97+
}
98+
99+
// endregion ///////////////////////////////////////////// End Icon Variable Functions
100+
101+
// region //////////////////////////////////////////////// SVG Functions
102+
103+
// Encode symbols
104+
@function _url-encode($string) {
105+
$map: (
106+
"%": "%25",
107+
"<": "%3C",
108+
">": "%3E",
109+
" ": "%20",
110+
"!": "%21",
111+
"*": "%2A",
112+
"'": "%27",
113+
'"': "%22",
114+
"(": "%28",
115+
")": "%29",
116+
";": "%3B",
117+
":": "%3A",
118+
"@": "%40",
119+
"&": "%26",
120+
"=": "%3D",
121+
"+": "%2B",
122+
"$": "%24",
123+
",": "%2C",
124+
"/": "%2F",
125+
"?": "%3F",
126+
"#": "%23",
127+
"[": "%5B",
128+
"]": "%5D"
129+
);
130+
131+
$new: $string;
132+
133+
@each $search, $replace in $map {
134+
$new: str-replace($new, $search, $replace);
135+
}
136+
137+
@return $new;
138+
}
139+
140+
// Format the SVG as a URL
141+
@function inline-svg($string) {
142+
@return url('data:image/svg+xml,#{_url-encode($string)}');
143+
}
144+
145+
@function get-svg-icon($icon-name) {
146+
// Make sure we aren't already an SVG
147+
@if quote(str-slice($icon-name, 1, 4)) == "<svg" {
148+
@return $icon-name;
149+
}
150+
151+
@if map-has-key($icons-svg, $icon-name) {
152+
@return map-get($icons-svg,$icon-name);
153+
} @else {
154+
@error "Invalid SVG Icon name `#{$icon-name}` provided.";
155+
}
156+
}
157+
158+
159+
// endregion ///////////////////////////////////////////// End SVG Functions

‎scss/_icons-mixins.scss‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
@import "icons-variables";
2+
3+
// region //////////////////////////////////////////////// Font Icon Mixins
4+
5+
@mixin icon-font {
6+
@if icon-feature("font-awesome") and mixin_exists(fa-icon) {
7+
//noinspection SassScssUnresolvedMixin
8+
@include fa-icon();
9+
} @else {
10+
display: inline-block;
11+
font: normal normal normal #{$icon-font-size}/#{$icon-line-height} #{$icon-font-name}; // shortening font declaration
12+
text-rendering: auto; // optimizelegibility throws things off
13+
-webkit-font-smoothing: antialiased;
14+
-moz-osx-font-smoothing: grayscale;
15+
}
16+
}
17+
18+
@mixin _font-psuedo($location, $icon-content: null, $opacity: 0, $color: null) {
19+
&::#{$location} {
20+
@include icon-font;
21+
@if $icon-content != null {
22+
content: $icon-content;
23+
}
24+
@if $color != null and $opacity != null and $opacity < 1 {
25+
color: rgba($color,$opacity);
26+
} @else if $color != null {
27+
color: $color;
28+
@if $opacity == 1 {
29+
opacity: 1;
30+
}
31+
} @else if $opacity > 0 {
32+
opacity: $opacity;
33+
}
34+
@content;
35+
}
36+
}
37+
38+
@mixin font-before($icon-name, $opacity: null, $color: null) {
39+
@include _font-psuedo(before, $opacity, $color) {
40+
@content;
41+
}
42+
}
43+
44+
@mixin font-after($icon-name, $opacity: null, $color: null) {
45+
@include _font-psuedo(after, $icon-name, $opacity, $color) {
46+
@content;
47+
}
48+
}
49+
50+
// endregion ///////////////////////////////////////////// End Font Icon Mixins
51+
52+
// region //////////////////////////////////////////////// SVG Icon Mixins
53+
54+
@mixin _svg-background($svg, $size: $icon-width) {
55+
$content: unquote($svg);
56+
background: inline-svg($svg) center center / $size $size no-repeat;
57+
}
58+
59+
@mixin _svg-psuedo($location, $size: $icon-width, $svg: null, $opacity: null, $fill: null) {
60+
&::#{$location} {
61+
display: block;
62+
width: $size;
63+
height: $size;
64+
content: " ";
65+
// Set SVG as Background Image
66+
@if $svg != null {
67+
@include _svg-background($svg, $size);
68+
}
69+
// Add Fill & Opacity if Needed
70+
@if $fill != null and $opacity > 0 and $opacity < 1 {
71+
fill: rgba($fill,$opacity);
72+
} @else if $fill != null {
73+
fill: $fill;
74+
@if $opacity == 1 {
75+
opacity: 1;
76+
}
77+
} @else if $opacity > 0 {
78+
opacity: $opacity;
79+
}
80+
// Any Pass Through Content
81+
@content;
82+
}
83+
}
84+
85+
@mixin svg-before($size: $icon-width, $svg-or-name: null, $opacity: null, $fill: null) {
86+
@include _svg-psuedo(before, $size, get-svg-icon($svg-or-name), $opacity, $fill) {
87+
@content;
88+
}
89+
}
90+
91+
@mixin svg-after($size: $icon-width, $svg-or-name: null, $opacity: null, $fill: null) {
92+
@include _svg-psuedo(after, $size, get-svg-icon($svg-or-name), $opacity, $fill) {
93+
@content;
94+
}
95+
}
96+
97+
// endregion ///////////////////////////////////////////// End SVG Icon Mixins
98+
99+
// region //////////////////////////////////////////////// Component Icon Mixins
100+
101+
@mixin button-icons($padding) {
102+
& + span {
103+
margin-left: $padding;
104+
}
105+
}
106+
107+
@mixin card-panel-icons($padding) {
108+
> .#{$icon-css-prefix} {
109+
order: -1;
110+
flex: 0 0 auto;
111+
margin: 0 $padding 0 0;
112+
}
113+
}
114+
115+
@mixin card-accordion-indicator($indicator, $size, $right-spacing) {
116+
.card-accordion > .card .card-title {
117+
a[data-toggle="collapse"] {
118+
@include svg-before($size, $indicator, .3) {
119+
transform-origin: center center;
120+
transition-duration: 0.35s;
121+
right: $right-spacing;
122+
position: absolute;
123+
}
124+
}
125+
a.collapsed::before {
126+
transform: rotate(180deg);
127+
}
128+
}
129+
}
130+
131+
// endregion ///////////////////////////////////////////// End Component Icon Mixins

‎scss/_icons-variables.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@import "icons-functions";
2+
3+
$enable-framework: false !default;
4+
5+
// region //////////////////////////////////////////////// Icon Variables
6+
7+
$icon-css-prefix: get-icon-prefix(); // default is 'ico'
8+
$icon-font-name: get-icon-font-name(); // default is 'carrot'
9+
$icon-font-size: get-icon-font-size(); // default is 16px;
10+
$icon-line-height: get-icon-line-height(); // default is 1;
11+
$icon-width: $icon-font-size !default;
12+
$icon-height: $icon-font-size !default;
13+
14+
// endregion ///////////////////////////////////////////// End Icon Variables
15+
16+
@if not($enable-framework) {
17+
@include set-component-feature("icons", "font", true);
18+
@include set-component-feature("icons", "svg", true);
19+
}

0 commit comments

Comments
 (0)