diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/icons.html b/examples/webpack-demo-vanilla-bundle/src/examples/icons.html index c79410032..6aa47b860 100644 --- a/examples/webpack-demo-vanilla-bundle/src/examples/icons.html +++ b/examples/webpack-demo-vanilla-bundle/src/examples/icons.html @@ -297,6 +297,18 @@

color-se-warning-light +
+ + color-sf-highlight +
+
+ + color-sf-primary +
+
+ + color-sf-primary-dark +
color-dark @@ -305,11 +317,11 @@

color-body

-
+
color-light
-
+
color-white
@@ -321,4 +333,4 @@

-
\ No newline at end of file +
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/icons.ts b/examples/webpack-demo-vanilla-bundle/src/examples/icons.ts index 8a199425c..132d435bf 100644 --- a/examples/webpack-demo-vanilla-bundle/src/examples/icons.ts +++ b/examples/webpack-demo-vanilla-bundle/src/examples/icons.ts @@ -98,6 +98,8 @@ export class Icons { '.mdi.mdi-close-thick', '.mdi.mdi-coffee', '.mdi.mdi-coffee-outline', + '.mdi.mdi-cog', + '.mdi.mdi-cog-outline', '.mdi.mdi-content-copy', '.mdi.mdi-currency-usd', '.mdi.mdi-currency-usd-off', @@ -110,11 +112,17 @@ export class Icons { '.mdi.mdi-drag-vertical', '.mdi.mdi-eye-off-outline', '.mdi.mdi-eye-outline', + '.mdi.mdi-file-check', + '.mdi.mdi-file-check-outline', '.mdi.mdi-file-document-outline', '.mdi.mdi-file-excel-outline', '.mdi.mdi-file-music-outline', '.mdi.mdi-file-pdf-outline', '.mdi.mdi-file-search-outline', + '.mdi.mdi-file-send', + '.mdi.mdi-file-send-outline', + '.mdi.mdi-file-upload', + '.mdi.mdi-file-upload-outline', '.mdi.mdi-filter', '.mdi.mdi-filter-minus-outline', '.mdi.mdi-filter-off-outline', @@ -163,6 +171,7 @@ export class Icons { '.mdi.mdi-playlist-plus', '.mdi.mdi-playlist-remove', '.mdi.mdi-plus', + '.mdi.mdi-progress-download', '.mdi.mdi-redo', '.mdi.mdi-refresh', '.mdi.mdi-shape-square-plus', @@ -185,7 +194,10 @@ export class Icons { '.mdi.mdi-tune', '.mdi.mdi-tune-variant', '.mdi.mdi-undo', + '.mdi.mdi-upload', '.mdi.mdi-vanish', + '.mdi.mdi-wrench', + '.mdi.mdi-wrench-outline', ]; } } diff --git a/packages/common/src/styles/colors-from-filters.scss b/packages/common/src/styles/colors-from-filters.scss index 5c8a2dfd5..888ce4ff9 100644 --- a/packages/common/src/styles/colors-from-filters.scss +++ b/packages/common/src/styles/colors-from-filters.scss @@ -2,8 +2,8 @@ /* icon/text colors */ // we'll use the same color set as text-colors defined in Bootstrap 4 (ref: https://getbootstrap.com/docs/4.5/utilities/colors/) -// we also use CSS Filter to color on top of SVG icons, we use this codepen to calculatet the Filter (https://codepen.io/sosuke/pen/Pjoqqp) - +// we also use CSS Filter to color on top of SVG icons, we use this codepen to calculate the Filter Color (https://codepen.io/sosuke/pen/Pjoqqp) +// since our icon are not pure black, we also need to prepend "brightness(0) saturate(100%)" to the filter // NOTE: remember that we are using CSS "filter" and that is NOT the same as a using regular color/background-color, it behaves differently $color-primary: $primary-color !default; @@ -28,49 +28,55 @@ $color-se-danger: #b10043 !default; $color-se-secondary: #9fa0a4 !default; $color-se-warning: #e47f00 !default; $color-se-warning-light: #ffd100 !default; +$color-sf-highlight: #0070D2 !default; +$color-sf-primary: #006DCC !default; +$color-sf-primary-dark: #004487 !default; -.color-primary { filter: invert(31%) sepia(57%) saturate(6822%) hue-rotate(194deg) brightness(93%) contrast(102%); } -.color-secondary { filter: invert(49%) sepia(14%) saturate(290%) hue-rotate(167deg) brightness(89%) contrast(89%); } -.color-success { filter: invert(46%) sepia(96%) saturate(377%) hue-rotate(81deg) brightness(94%) contrast(91%); } -.color-danger { filter: invert(35%) sepia(56%) saturate(4390%) hue-rotate(334deg) brightness(88%) contrast(95%); } -.color-warning { filter: invert(68%) sepia(73%) saturate(596%) hue-rotate(354deg) brightness(105%) contrast(101%); } -.color-info { filter: invert(51%) sepia(59%) saturate(588%) hue-rotate(140deg) brightness(92%) contrast(94%); } -.color-light { filter: invert(91%) sepia(4%) saturate(576%) hue-rotate(200deg) brightness(109%) contrast(96%); } -.color-dark { filter: invert(18%) sepia(6%) saturate(1291%) hue-rotate(169deg) brightness(89%) contrast(82%); } -.color-body { filter: invert(12%) sepia(9%) saturate(824%) hue-rotate(169deg) brightness(94%) contrast(91%); } -.color-muted { filter: invert(50%) sepia(2%) saturate(2378%) hue-rotate(168deg) brightness(89%) contrast(84%); } -.color-white { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(54deg) brightness(109%) contrast(101%); } -.color-alt-default { filter: invert(46%) sepia(70%) saturate(3992%) hue-rotate(193deg) brightness(99%) contrast(90%); } -.color-alt-warning { filter: invert(59%) sepia(94%) saturate(289%) hue-rotate(341deg) brightness(98%) contrast(99%); } -.color-alt-danger { filter: invert(37%) sepia(84%) saturate(805%) hue-rotate(308deg) brightness(99%) contrast(90%); } -.color-alt-success { filter: invert(80%) sepia(11%) saturate(2532%) hue-rotate(99deg) brightness(87%) contrast(89%); } -.color-se-primary { filter: invert(67%) sepia(14%) saturate(2047%) hue-rotate(79deg) brightness(97%) contrast(90%); } -.color-se-link { filter: invert(71%) sepia(47%) saturate(2213%) hue-rotate(167deg) brightness(93%) contrast(94%); } -.color-se-link-dark { filter: invert(42%) sepia(23%) saturate(1361%) hue-rotate(166deg) brightness(98%) contrast(93%); } -.color-se-danger { filter: invert(14%) sepia(84%) saturate(3919%) hue-rotate(325deg) brightness(79%) contrast(112%); } -.color-se-secondary { filter: invert(71%) sepia(5%) saturate(181%) hue-rotate(191deg) brightness(91%) contrast(86%); } -.color-se-warning { filter: invert(76%) sepia(49%) saturate(7416%) hue-rotate(7deg) brightness(95%) contrast(101%); } -.color-se-warning-light { filter: invert(85%) sepia(31%) saturate(3980%) hue-rotate(359deg) brightness(103%) contrast(106%); } +.color-primary { filter: brightness(0) saturate(100%) invert(31%) sepia(57%) saturate(6822%) hue-rotate(194deg) brightness(93%) contrast(102%); } +.color-secondary { filter: brightness(0) saturate(100%) invert(49%) sepia(14%) saturate(290%) hue-rotate(167deg) brightness(89%) contrast(89%); } +.color-success { filter: brightness(0) saturate(100%) invert(46%) sepia(96%) saturate(377%) hue-rotate(81deg) brightness(94%) contrast(91%); } +.color-danger { filter: brightness(0) saturate(100%) invert(35%) sepia(56%) saturate(4390%) hue-rotate(334deg) brightness(88%) contrast(95%); } +.color-warning { filter: brightness(0) saturate(100%) invert(68%) sepia(73%) saturate(596%) hue-rotate(354deg) brightness(105%) contrast(101%); } +.color-info { filter: brightness(0) saturate(100%) invert(51%) sepia(59%) saturate(588%) hue-rotate(140deg) brightness(92%) contrast(94%); } +.color-light { filter: brightness(0) saturate(100%) invert(91%) sepia(4%) saturate(576%) hue-rotate(200deg) brightness(109%) contrast(96%); } +.color-dark { filter: brightness(0) saturate(100%) invert(18%) sepia(6%) saturate(1291%) hue-rotate(169deg) brightness(89%) contrast(82%); } +.color-body { filter: brightness(0) saturate(100%) invert(12%) sepia(9%) saturate(824%) hue-rotate(169deg) brightness(94%) contrast(91%); } +.color-muted { filter: brightness(0) saturate(100%) invert(50%) sepia(2%) saturate(2378%) hue-rotate(168deg) brightness(89%) contrast(84%); } +.color-white { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(54deg) brightness(109%) contrast(101%); } +.color-alt-default { filter: brightness(0) saturate(100%) invert(46%) sepia(70%) saturate(3992%) hue-rotate(193deg) brightness(99%) contrast(90%); } +.color-alt-warning { filter: brightness(0) saturate(100%) invert(59%) sepia(94%) saturate(289%) hue-rotate(341deg) brightness(98%) contrast(99%); } +.color-alt-danger { filter: brightness(0) saturate(100%) invert(37%) sepia(84%) saturate(805%) hue-rotate(308deg) brightness(99%) contrast(90%); } +.color-alt-success { filter: brightness(0) saturate(100%) invert(80%) sepia(11%) saturate(2532%) hue-rotate(99deg) brightness(87%) contrast(89%); } +.color-se-primary { filter: brightness(0) saturate(100%) invert(67%) sepia(14%) saturate(2047%) hue-rotate(79deg) brightness(97%) contrast(90%); } +.color-se-link { filter: brightness(0) saturate(100%) invert(71%) sepia(47%) saturate(2213%) hue-rotate(167deg) brightness(93%) contrast(94%); } +.color-se-link-dark { filter: brightness(0) saturate(100%) invert(42%) sepia(23%) saturate(1361%) hue-rotate(166deg) brightness(98%) contrast(93%); } +.color-se-danger { filter: brightness(0) saturate(100%) invert(14%) sepia(84%) saturate(3919%) hue-rotate(325deg) brightness(79%) contrast(112%); } +.color-se-secondary { filter: brightness(0) saturate(100%) invert(71%) sepia(5%) saturate(181%) hue-rotate(191deg) brightness(91%) contrast(86%); } +.color-se-warning { filter: brightness(0) saturate(100%) invert(76%) sepia(49%) saturate(7416%) hue-rotate(7deg) brightness(95%) contrast(101%); } +.color-se-warning-light { filter: brightness(0) saturate(100%) invert(85%) sepia(31%) saturate(3980%) hue-rotate(359deg) brightness(103%) contrast(106%); } +.color-sf-highlight { filter: brightness(0) saturate(100%) invert(23%) sepia(97%) saturate(3081%) hue-rotate(195deg) brightness(96%) contrast(101%); } +.color-sf-primary { filter: brightness(0) saturate(100%) invert(26%) sepia(75%) saturate(2018%) hue-rotate(191deg) brightness(99%) contrast(102%); } +.color-sf-primary-dark { filter: brightness(0) saturate(100%) invert(10%) sepia(97%) saturate(4590%) hue-rotate(200deg) brightness(90%) contrast(102%); } -.color-primary-light { filter: invert(33%) sepia(82%) saturate(3926%) hue-rotate(193deg) brightness(100%) contrast(101%); } -.color-primary-dark { filter: invert(21%) sepia(67%) saturate(5693%) hue-rotate(196deg) brightness(85%) contrast(101%); } -.color-secondary-light { filter: invert(56%) sepia(14%) saturate(260%) hue-rotate(169deg) brightness(90%) contrast(90%); } -.color-secondary-dark { filter: invert(41%) sepia(5%) saturate(796%) hue-rotate(166deg) brightness(92%) contrast(90%); } -.color-success-light { filter: invert(71%) sepia(10%) saturate(2988%) hue-rotate(80deg) brightness(84%) contrast(94%); } -.color-success-dark { filter: invert(39%) sepia(90%) saturate(416%) hue-rotate(82deg) brightness(95%) contrast(88%); } -.color-danger-light { filter: invert(56%) sepia(45%) saturate(5329%) hue-rotate(322deg) brightness(89%) contrast(96%); } -.color-danger-dark { filter: invert(16%) sepia(80%) saturate(4275%) hue-rotate(345deg) brightness(90%) contrast(85%); } -.color-warning-light { filter: invert(95%) sepia(47%) saturate(2254%) hue-rotate(329deg) brightness(99%) contrast(102%); } -.color-warning-dark { filter: invert(60%) sepia(98%) saturate(1494%) hue-rotate(10deg) brightness(103%) contrast(101%); } -.color-info-light { filter: invert(64%) sepia(88%) saturate(916%) hue-rotate(142deg) brightness(88%) contrast(87%); } -.color-info-dark { filter: invert(43%) sepia(87%) saturate(490%) hue-rotate(140deg) brightness(86%) contrast(85%); } -.color-muted-light { filter: invert(56%) sepia(10%) saturate(370%) hue-rotate(169deg) brightness(89%) contrast(85%); } -.color-muted-dark { filter: invert(38%) sepia(18%) saturate(224%) hue-rotate(166deg) brightness(95%) contrast(88%); } -.color-alt-warning-light { filter: invert(80%) sepia(36%) saturate(783%) hue-rotate(321deg) brightness(99%) contrast(99%); } -.color-alt-warning-dark { filter: invert(70%) sepia(17%) saturate(3850%) hue-rotate(332deg) brightness(100%) contrast(96%); } -.color-alt-default-light { filter: invert(71%) sepia(91%) saturate(4393%) hue-rotate(189deg) brightness(96%) contrast(97%); } -.color-alt-default-dark { filter: invert(32%) sepia(56%) saturate(3175%) hue-rotate(196deg) brightness(94%) contrast(89%); } -.color-alt-danger-light { filter: invert(62%) sepia(44%) saturate(3309%) hue-rotate(311deg) brightness(103%) contrast(111%); } -.color-alt-danger-dark { filter: invert(32%) sepia(51%) saturate(3649%) hue-rotate(329deg) brightness(94%) contrast(97%); } -.color-alt-success-light { filter: invert(77%) sepia(87%) saturate(336%) hue-rotate(90deg) brightness(90%) contrast(87%); } -.color-alt-success-dark { filter: invert(53%) sepia(76%) saturate(371%) hue-rotate(106deg) brightness(97%) contrast(99%); } +.color-primary-light { filter: brightness(0) saturate(100%) invert(33%) sepia(82%) saturate(3926%) hue-rotate(193deg) brightness(100%) contrast(101%); } +.color-primary-dark { filter: brightness(0) saturate(100%) invert(21%) sepia(67%) saturate(5693%) hue-rotate(196deg) brightness(85%) contrast(101%); } +.color-secondary-light { filter: brightness(0) saturate(100%) invert(56%) sepia(14%) saturate(260%) hue-rotate(169deg) brightness(90%) contrast(90%); } +.color-secondary-dark { filter: brightness(0) saturate(100%) invert(41%) sepia(5%) saturate(796%) hue-rotate(166deg) brightness(92%) contrast(90%); } +.color-success-light { filter: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(2988%) hue-rotate(80deg) brightness(84%) contrast(94%); } +.color-success-dark { filter: brightness(0) saturate(100%) invert(39%) sepia(90%) saturate(416%) hue-rotate(82deg) brightness(95%) contrast(88%); } +.color-danger-light { filter: brightness(0) saturate(100%) invert(56%) sepia(45%) saturate(5329%) hue-rotate(322deg) brightness(89%) contrast(96%); } +.color-danger-dark { filter: brightness(0) saturate(100%) invert(16%) sepia(80%) saturate(4275%) hue-rotate(345deg) brightness(90%) contrast(85%); } +.color-warning-light { filter: brightness(0) saturate(100%) invert(95%) sepia(47%) saturate(2254%) hue-rotate(329deg) brightness(99%) contrast(102%); } +.color-warning-dark { filter: brightness(0) saturate(100%) invert(60%) sepia(98%) saturate(1494%) hue-rotate(10deg) brightness(103%) contrast(101%); } +.color-info-light { filter: brightness(0) saturate(100%) invert(64%) sepia(88%) saturate(916%) hue-rotate(142deg) brightness(88%) contrast(87%); } +.color-info-dark { filter: brightness(0) saturate(100%) invert(43%) sepia(87%) saturate(490%) hue-rotate(140deg) brightness(86%) contrast(85%); } +.color-muted-light { filter: brightness(0) saturate(100%) invert(56%) sepia(10%) saturate(370%) hue-rotate(169deg) brightness(89%) contrast(85%); } +.color-muted-dark { filter: brightness(0) saturate(100%) invert(38%) sepia(18%) saturate(224%) hue-rotate(166deg) brightness(95%) contrast(88%); } +.color-alt-warning-light { filter: brightness(0) saturate(100%) invert(80%) sepia(36%) saturate(783%) hue-rotate(321deg) brightness(99%) contrast(99%); } +.color-alt-warning-dark { filter: brightness(0) saturate(100%) invert(70%) sepia(17%) saturate(3850%) hue-rotate(332deg) brightness(100%) contrast(96%); } +.color-alt-default-light { filter: brightness(0) saturate(100%) invert(71%) sepia(91%) saturate(4393%) hue-rotate(189deg) brightness(96%) contrast(97%); } +.color-alt-default-dark { filter: brightness(0) saturate(100%) invert(32%) sepia(56%) saturate(3175%) hue-rotate(196deg) brightness(94%) contrast(89%); } +.color-alt-danger-light { filter: brightness(0) saturate(100%) invert(62%) sepia(44%) saturate(3309%) hue-rotate(311deg) brightness(103%) contrast(111%); } +.color-alt-danger-dark { filter: brightness(0) saturate(100%) invert(32%) sepia(51%) saturate(3649%) hue-rotate(329deg) brightness(94%) contrast(97%); } +.color-alt-success-light { filter: brightness(0) saturate(100%) invert(77%) sepia(87%) saturate(336%) hue-rotate(90deg) brightness(90%) contrast(87%); } +.color-alt-success-dark { filter: brightness(0) saturate(100%) invert(53%) sepia(76%) saturate(371%) hue-rotate(106deg) brightness(97%) contrast(99%); } diff --git a/packages/common/src/styles/colors.scss b/packages/common/src/styles/colors.scss index 7764708a5..96c9e6974 100644 --- a/packages/common/src/styles/colors.scss +++ b/packages/common/src/styles/colors.scss @@ -31,6 +31,9 @@ $color-se-danger: #b10043 !default; $color-se-secondary: #9fa0a4 !default; $color-se-warning: #e47f00 !default; $color-se-warning-light: #ffd100 !default; +$color-sf-highlight: #0070D2 !default; +$color-sf-primary: #006DCC !default; +$color-sf-primary-dark: #004487 !default; .color-primary { @include recolor($color-primary, 1); } .color-secondary { @include recolor($color-secondary, 1); } @@ -54,6 +57,9 @@ $color-se-warning-light: #ffd100 !default; .color-se-secondary { @include recolor($color-se-secondary, 1); } .color-se-warning { @include recolor($color-se-warning, 1); } .color-se-warning-light { @include recolor($color-se-warning-light, 1); } +.color-sf-highlight { @include recolor($color-sf-highlight, 1); } +.color-sf-primary { @include recolor($color-sf-primary, 1); } +.color-sf-primary-dark { @include recolor($color-sf-primary-dark, 1); } .color-primary-light { @include recolor(lighten($color-primary, $color-lighten-percentage), 1); } .color-primary-dark { @include recolor(darken($color-primary, $color-darken-percentage), 1); } diff --git a/packages/common/src/styles/extra-styling.scss b/packages/common/src/styles/extra-styling.scss index 9059e0cb8..d1821d7e6 100644 --- a/packages/common/src/styles/extra-styling.scss +++ b/packages/common/src/styles/extra-styling.scss @@ -1,4 +1,4 @@ -$button-border-color: #ababab !default; +$button-border-color: #c7c7c7 !default; $font-size-count: 50; $margin-max-count: 50; $padding-max-count: 30; @@ -22,7 +22,7 @@ $padding-max-count: 30; justify-content: center; text-align: center; &:hover { - border-color: darken($button-border-color, 10%); + border-color: darken($button-border-color, 15%); } } diff --git a/packages/common/src/styles/material-svg-icons.scss b/packages/common/src/styles/material-svg-icons.scss index 87ef6ec90..4c3a7c985 100644 --- a/packages/common/src/styles/material-svg-icons.scss +++ b/packages/common/src/styles/material-svg-icons.scss @@ -366,6 +366,16 @@ $icon-height: $icon-width; "M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z", encodecolor($icon-color), $icon-height, $icon-width, inline-block); +@include loadsvg( + ".mdi.mdi-cog", + "M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z", + encodecolor($icon-color), $icon-height, $icon-width, inline-block); + +@include loadsvg( + ".mdi.mdi-cog-outline", + "M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z", + encodecolor($icon-color), $icon-height, $icon-width, inline-block); + @include loadsvg( ".mdi.mdi-content-copy", "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z", @@ -426,6 +436,16 @@ $icon-height: $icon-width; "M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C21.27,16.39 17,19.5 12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C15.76,17.5 19.17,15.36 20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12Z", encodecolor($icon-color), $icon-height, $icon-width, inline-block); +@include loadsvg( + ".mdi.mdi-file-check", + "M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M11.2,18.46L15.95,13.71L14.78,12.3L11.2,15.88L9.61,14.3L8.45,15.46L11.2,18.46Z", + encodecolor($icon-color), $icon-height, $icon-width, inline-block); + +@include loadsvg( + ".mdi.mdi-file-check-outline", + "M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M11.2,18.46L8.45,15.46L9.61,14.3L11.2,15.88L14.78,12.3L15.95,13.71L11.2,18.46Z", + encodecolor($icon-color), $icon-height, $icon-width, inline-block); + @include loadsvg( ".mdi.mdi-file-document-outline", "M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z", @@ -451,6 +471,26 @@ $icon-height: $icon-width; "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H13C12.59,21.75 12.2,21.44 11.86,21.1C11.53,20.77 11.25,20.4 11,20H6V4H13V9H18V10.18C18.71,10.34 19.39,10.61 20,11V8L14,2M20.31,18.9C21.64,16.79 21,14 18.91,12.68C16.8,11.35 14,12 12.69,14.08C11.35,16.19 12,18.97 14.09,20.3C15.55,21.23 17.41,21.23 18.88,20.32L22,23.39L23.39,22L20.31,18.9M16.5,19A2.5,2.5 0 0,1 14,16.5A2.5,2.5 0 0,1 16.5,14A2.5,2.5 0 0,1 19,16.5A2.5,2.5 0 0,1 16.5,19Z", encodecolor($icon-color), $icon-height, $icon-width, inline-block); +@include loadsvg( + ".mdi.mdi-file-send", + "M14,2H6C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M12.54,19.37V17.37H8.54V15.38H12.54V13.38L15.54,16.38L12.54,19.37M13,9V3.5L18.5,9H13Z", + encodecolor($icon-color), $icon-height, $icon-width, inline-block); + +@include loadsvg( + ".mdi.mdi-file-send-outline", + "M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M12.54 18.5V16.5H8.54V14.5H12.54V12.5L15.54 15.5L12.54 18.5Z", + encodecolor($icon-color), $icon-height, $icon-width, inline-block); + +@include loadsvg( + ".mdi.mdi-file-upload", + "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M13.5,16V19H10.5V16H8L12,12L16,16H13.5M13,9V3.5L18.5,9H13Z", + encodecolor($icon-color), $icon-height, $icon-width, inline-block); + +@include loadsvg( + ".mdi.mdi-file-upload-outline", + "M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M12,12L16,16H13.5V19H10.5V16H8L12,12Z", + encodecolor($icon-color), $icon-height, $icon-width, inline-block); + @include loadsvg( ".mdi.mdi-filter", "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z", @@ -691,6 +731,11 @@ $icon-height: $icon-width; "M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z", encodecolor($icon-color), $icon-height, $icon-width, inline-block); +@include loadsvg( + ".mdi.mdi-progress-download", + "M13,2.03C17.73,2.5 21.5,6.25 21.95,11C22.5,16.5 18.5,21.38 13,21.93V19.93C16.64,19.5 19.5,16.61 19.96,12.97C20.5,8.58 17.39,4.59 13,4.05V2.05L13,2.03M11,2.06V4.06C9.57,4.26 8.22,4.84 7.1,5.74L5.67,4.26C7.19,3 9.05,2.25 11,2.06M4.26,5.67L5.69,7.1C4.8,8.23 4.24,9.58 4.05,11H2.05C2.25,9.04 3,7.19 4.26,5.67M2.06,13H4.06C4.24,14.42 4.81,15.77 5.69,16.9L4.27,18.33C3.03,16.81 2.26,14.96 2.06,13M7.1,18.37C8.23,19.25 9.58,19.82 11,20V22C9.04,21.79 7.18,21 5.67,19.74L7.1,18.37M12,16.5L7.5,12H11V8H13V12H16.5L12,16.5Z", + encodecolor($icon-color), $icon-height, $icon-width, inline-block); + @include loadsvg( ".mdi.mdi-redo", "M18.4,10.6C16.55,9 14.15,8 11.5,8C6.85,8 2.92,11.03 1.54,15.22L3.9,16C4.95,12.81 7.95,10.5 11.5,10.5C13.45,10.5 15.23,11.22 16.62,12.38L13,16H22V7L18.4,10.6Z", @@ -801,8 +846,23 @@ $icon-height: $icon-width; "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z", encodecolor($icon-color), $icon-height, $icon-width, inline-block); +@include loadsvg( + ".mdi.mdi-upload", + "M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z", + encodecolor($icon-color), $icon-height, $icon-width, inline-block); + @include loadsvg( ".mdi.mdi-vanish", "M16,13V11H21V13H16M14.83,7.76L17.66,4.93L19.07,6.34L16.24,9.17L14.83,7.76M11,16H13V21H11V16M11,3H13V8H11V3M4.93,17.66L7.76,14.83L9.17,16.24L6.34,19.07L4.93,17.66M4.93,6.34L6.34,4.93L9.17,7.76L7.76,9.17L4.93,6.34M8,13H3V11H8V13M19.07,17.66L17.66,19.07L14.83,16.24L16.24,14.83L19.07,17.66Z", encodecolor($icon-color), $icon-height, $icon-width, inline-block); +@include loadsvg( + ".mdi.mdi-wrench", + "M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z", + encodecolor($icon-color), $icon-height, $icon-width, inline-block); + +@include loadsvg( + ".mdi.mdi-wrench-outline", + "M22.61,19L13.53,9.91C14.46,7.57 14,4.81 12.09,2.91C9.79,0.61 6.21,0.4 3.66,2.26L7.5,6.11L6.08,7.5L2.25,3.69C0.39,6.23 0.6,9.82 2.9,12.11C4.76,13.97 7.47,14.46 9.79,13.59L18.9,22.7C19.29,23.09 19.92,23.09 20.31,22.7L22.61,20.4C23,20 23,19.39 22.61,19M19.61,20.59L10.15,11.13C9.54,11.58 8.86,11.85 8.15,11.95C6.79,12.15 5.36,11.74 4.32,10.7C3.37,9.76 2.93,8.5 3,7.26L6.09,10.35L10.33,6.11L7.24,3C8.5,2.95 9.73,3.39 10.68,4.33C11.76,5.41 12.17,6.9 11.92,8.29C11.8,9 11.5,9.66 11.04,10.25L20.5,19.7L19.61,20.59Z", + encodecolor($icon-color), $icon-height, $icon-width, inline-block); +