aboutsummaryrefslogtreecommitdiffstats
path: root/components/icon/_icon.scss
diff options
context:
space:
mode:
Diffstat (limited to 'components/icon/_icon.scss')
-rw-r--r--components/icon/_icon.scss250
1 files changed, 250 insertions, 0 deletions
diff --git a/components/icon/_icon.scss b/components/icon/_icon.scss
new file mode 100644
index 0000000..cd94eb7
--- /dev/null
+++ b/components/icon/_icon.scss
@@ -0,0 +1,250 @@
+@mixin color-icon($primary-color, $secondary-color) {
+ color: $primary-color;
+ fill: $primary-color;
+ span{
+ color: $primary-color;
+ }
+ &:not([disabled]):hover, &:active, &:focus {
+ &.clickable {
+ color: $secondary-color;
+ fill: $secondary-color;
+ }
+ }
+}
+
+.svg-icon-wrapper {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+
+ &[disabled] {
+ opacity: 0.7;
+ }
+
+ &.bottom {
+ flex-direction: column;
+ .svg-icon-label {
+ margin-bottom: 5px;
+ }
+ }
+
+ &.right {
+ float: none;
+ .svg-icon-label {
+ margin-left: 5px;
+ }
+ }
+
+ &.top {
+ flex-direction: column-reverse;
+ .svg-icon-label {
+ margin-top: 5px;
+ }
+ }
+
+ &.left {
+ flex-direction: row-reverse;
+ .svg-icon-label {
+ margin-right: 5px;
+ }
+ }
+
+ &.__warning {
+ @include color-icon($yellow, $yellow);
+ }
+
+ &.__primary {
+ @include color-icon($blue, $light-blue);
+ }
+
+ &.__secondary {
+ @include color-icon($gray, $dark-gray);
+ }
+
+ &.__positive {
+ @include color-icon($green, $green);
+ }
+
+ &.__negative {
+ @include color-icon($red, $red);
+ }
+}
+
+
+.svg-icon {
+ width: 20px;
+ height: 20px;
+
+ &.__angleDoubleLeft {
+ width: 14px;
+ height: 14px;
+ }
+ &.__angleDoubleRight {
+ width: 14px;
+ height: 14px;
+ }
+ &.__angleLeft {
+ width: 14px;
+ height: 14px;
+ }
+ &.__angleRight {
+ width: 14px;
+ height: 14px;
+ }
+ &.__artifacts {
+ width: 16px;
+ height: 20px;
+ }
+ &.__back {
+ width: 25px;
+ height: 25px;
+ }
+ &.__base {
+ //
+ }
+ &.__calendar {
+ //
+ }
+ &.__caretDown {
+ }
+ &.__check {
+ }
+ &.__checkCircle {
+ width: 16px;
+ height: 16px;
+ }
+ &.__chevronDown{
+ width: 10px;
+ height: 7px;
+ }
+ &.__chevronUp {
+ width: 11px;
+ height: 7px;
+ }
+ &.__close {
+ width: 10px;
+ height: 10px;
+ }
+ &.__download {
+ width: 15px;
+ height: 11px;
+ }
+ &.__env {
+ width: 15px;
+ height: 14px;
+ }
+ &.__error {
+ width: 14px;
+ height: 14px;
+ }
+ &.__errorCircle {
+ width: 16px;
+ height: 16px;
+ }
+ &.__exclamationTriangleFull {
+ width: 15px;
+ height: 13px;
+ }
+ &.__exclamationTriangleLine {
+ width: 15px;
+ height: 13px;
+ }
+ &.__filter {
+ //
+ }
+ &.__locked {
+ width: 11px;
+ }
+ &.__module {
+ //
+ }
+ &.__nestedHeat {
+ width: 15px;
+ height: 13px;
+ }
+ &.__network {
+ width: 13px;
+ height: 13px;
+ }
+ &.__others {
+ width: 12px;
+ height: 12px;
+ }
+ &.__pencil {
+ width: 15px;
+ height: 15px;
+ }
+ &.__plus {
+ width: 9px;
+ height: 9px;
+ }
+ &.__plusCircle {
+ width: 19px;
+ height: 19px;
+ }
+ &.__plusThin {
+ width: 9px;
+ height: 9px;
+ }
+ &.__proceedToOverview {
+ width: 24px;
+ height: 20px;
+ }
+ &.__search {
+ //
+ }
+ &.__sliders {
+ }
+ &.__trashO {
+ width: 15px;
+ height: 16px;
+ }
+ &.__unlocked {
+ width: 11px;
+ }
+ &.__upload {
+ width: 15px;
+ height: 11px;
+ }
+ &.__vendor {
+ width: 53px;
+ height: 47px;
+ }
+ &.__versionControllerLockClosed {
+ width: 21px;
+ height: 23px;
+ }
+ &.__versionControllerLockOpen {
+ width: 24px;
+ height: 28px;
+ }
+ &.__versionControllerRevert {
+ //
+ }
+ &.__versionControllerSave {
+ //
+ }
+ &.__versionControllerSubmit {
+ //
+ }
+ &.__versionControllerPermissions {
+ //
+ }
+ &.__vlm {
+ width: 53px;
+ height: 47px;
+ }
+ &.__vsp {
+ width: 53px;
+ height: 47px;
+ }
+ &.__zip {
+ width: 29px;
+ height: 23px;
+ }
+}
+
+.svg-icon-missing {
+ @include body-2;
+ @include font-error;
+}