/*------------------------------------ Icon-v4 ------------------------------------*/ @import "icons-sizes-vn"; .u-icon-v4 { @include px-to-rem(padding, 8px); background: transparent !important; border: solid 1px $g-color-gray-light-v4; transition: all .1s ease-in-out; &-inner { position: relative; display: block; overflow: hidden; background-color: $g-color-gray-light-v4; } } .u-icon-v4 .u-icon-v4-inner { @extend %u-icon-size; z-index: 1; transition: all .2s ease-in-out; } // // Sizes // .u-icon-v4 { // Default (md) & .u-icon__elem-regular, & .u-icon__elem-hover { @extend %u-icon-size; } &.u-icon-size--xs &-inner, &.u-icon-size--xs .u-icon__elem-regular, &.u-icon-size--xs .u-icon__elem-hover { @extend %u-icon-size--xs; } &.u-icon-size--sm &-inner, &.u-icon-size--sm .u-icon__elem-regular, &.u-icon-size--sm .u-icon__elem-hover { @extend %u-icon-size--sm; } &.u-icon-size--lg &-inner, &.u-icon-size--lg .u-icon__elem-regular, &.u-icon-size--lg .u-icon__elem-hover { @extend %u-icon-size--lg; } &.u-icon-size--xl &-inner, &.u-icon-size--xl .u-icon__elem-regular, &.u-icon-size--xl .u-icon__elem-hover { @extend %u-icon-size--xl; } &.u-icon-size--2xl &-inner, &.u-icon-size--2xl .u-icon__elem-regular, &.u-icon-size--2xl .u-icon__elem-hover { @extend %u-icon-size--2xl; } &.u-icon-size--3xl &-inner, &.u-icon-size--3xl .u-icon__elem-regular, &.u-icon-size--3xl .u-icon__elem-hover { @extend %u-icon-size--3xl; } } // // Border-radiuses // .u-icon-v4 { &-rounded-3, &-rounded-3 &-inner { border-radius: 3px; } &-rounded-7, &-rounded-7 &-inner { border-radius: 7px; } &-rounded-10, &-rounded-10 &-inner { border-radius: 10px; } &-rounded-50x, &-rounded-50x &-inner { border-radius: 50%; } } // // Colors // .u-icon-v4 { &-bg-primary { border-color: $g-color-primary; .u-icon-v4-inner { background: $g-color-primary; } } &-bg-white { border-color: $g-color-white; .u-icon-v4-inner { background: $g-color-white; } } &-bg-gray-light-v3 { border-color: $g-color-gray-light-v3; .u-icon-v4-inner { background: $g-color-gray-light-v3; } } &-bg-gray-dark-v3 { border-color: $g-color-gray-dark-v3; .u-icon-v4-inner { background: $g-color-gray-dark-v3; } } &-bg-black { border-color: $g-color-black; .u-icon-v4-inner { background: $g-color-black; } } // // Hover Effects // // Primary color &-bg-primary--hover:hover, .u-icon-block--hover:hover &-bg-primary--hover { border-color: $g-color-primary; & .u-icon-v4-inner { background: $g-color-primary; } } // White color &-bg-white--hover:hover, .u-icon-block--hover:hover &-bg-white--hover { border-color: $g-color-white; & .u-icon-v4-inner { background: $g-color-white; } } // Gray-light-v3 color &-bg-gray-light-v3--hover:hover, .u-icon-block--hover:hover &-bg-gray-light-v3--hover { border-color: $g-color-gray-light-v3; & .u-icon-v4-inner { background: $g-color-gray-light-v3; } } // Gray-dark-v3 color &-bg-gray-dark-v3--hover:hover, .u-icon-block--hover:hover &-bg-gray-dark-v3--hover { border-color: $g-color-gray-dark-v3; & .u-icon-v4-inner { background: $g-color-gray-dark-v3; } } // Black color &-bg-black--hover:hover, .u-icon-block--hover:hover &-bg-black--hover { border-color: $g-color-black; & .u-icon-v4-inner { background: $g-color-black; } } } @import "icon-v4-additional-colors"; @import "icon-v4-social-colors"; @import "icon-v4-gradients";