diff options
author | Israel Lavi <il0695@att.com> | 2018-08-07 10:54:17 +0300 |
---|---|---|
committer | Israel Lavi <il0695@att.com> | 2018-08-07 11:06:44 +0300 |
commit | b2a3acea0d0f66028c9ce5fad02d4ecc64abf70c (patch) | |
tree | 8d70110f34cb845965c42a5915e950bca967d2c3 /src/assets/styles | |
parent | 05b37297177e8a342668c15e5d6f738b51f7aedd (diff) |
Initial commit.
Adding files needed for Linux Foundation.
Change-Id: I9f2b4851a5ae01f83800c7f8bab8608a2221c730
Issue-ID: SDC-1608
Signed-off-by: Israel Lavi <il0695@att.com>
Diffstat (limited to 'src/assets/styles')
-rw-r--r-- | src/assets/styles/_svg_icon.scss | 248 | ||||
-rw-r--r-- | src/assets/styles/_tooltip_custom_style.scss | 9 | ||||
-rw-r--r-- | src/assets/styles/style.scss | 5 |
3 files changed, 262 insertions, 0 deletions
diff --git a/src/assets/styles/_svg_icon.scss b/src/assets/styles/_svg_icon.scss new file mode 100644 index 0000000..b13e7f6 --- /dev/null +++ b/src/assets/styles/_svg_icon.scss @@ -0,0 +1,248 @@ +@mixin color-icon($primary-color) { + color: $primary-color; + fill: $primary-color; +} + +@mixin color-icon-hover($secondary-color) { + &.clickable { + &:not([disabled]):hover, &:active, &:focus { + @include color-icon($secondary-color); + } + } +} + +@mixin color-icon-label($primary-color) { + @include color-icon($primary-color); + + .svg-icon { + @include color-icon($primary-color); + } +} + +@mixin color-icon-label-hover($secondary-color) { + &.clickable { + &:not([disabled]):hover, &:active, &:focus { + @include color-icon-label($secondary-color); + } + } +} + +.svg-icon { + display: inline-flex; + width: 24px; + height: 24px; + + & > svg { + width: 100%; + height: 100%; + } + + &[disabled] { + opacity: 0.7; + } + + &.mode-primary { + @include color-icon($blue); + @include color-icon-hover($light-blue); + } + + &.mode-secondary { + @include color-icon($gray); + @include color-icon-hover($dark-gray); + } + + &.mode-success { + @include color-icon($green); + } + + &.mode-error { + @include color-icon($red); + } + + &.mode-warning { + @include color-icon($yellow); + } + + &.mode-info { + @include color-icon($text-black); + @include color-icon-hover($dark-blue); + } + + &.mode-white { + @include color-icon($white); + @include color-icon-hover($light-gray); + } + + &.size-x_small { + width: 12px; + height: 12px; + } + + &.size-small { + width: 16px; + height: 16px; + } + + &.size-medium { + width: 24px; + height: 24px; + } + + &.size-large { + width: 36px; + height: 36px; + } + + &.size-x_large { + width: 48px; + height: 48px; + } + + &.bg-type-circle { + border-radius: 50%; + padding: 6px; + } + + &.bg-type-rectangle { + padding: 6px; + } + + &.bg-color-primary { + background-color: $purple; + } + + &.bg-color-secondary { + background-color: $light-blue; + } + + &.bg-color-success { + background-color: $green; + } + + &.bg-color-error { + background-color: $red; + } + + &.bg-color-warning { + background-color: $yellow; + } + + &.bg-color-info { + background-color: $blue; + } +} + +.svg-icon-wrapper { + display: inline-flex; + justify-content: center; + align-items: center; + + &.svg-icon-label { + } + + &.svg-icon { + } + + &[disabled] { + opacity: 0.7; + } + + &.label-placement-bottom { + flex-direction: column; + .svg-icon-label { + margin-top: 0.25em; + } + } + + &.label-placement-right { + .svg-icon-label { + margin-left: 0.25em; + } + } + + &.label-placement-top { + flex-direction: column-reverse; + .svg-icon-label { + margin-bottom: 0.25em; + } + } + + &.label-placement-left { + flex-direction: row-reverse; + .svg-icon-label { + margin-right: 0.25em; + } + } + + &.mode-primary { + @include color-icon-label($blue); + @include color-icon-label-hover($light-blue); + } + + &.mode-secondary { + @include color-icon-label($gray); + @include color-icon-label-hover($dark-gray); + } + + &.mode-success { + @include color-icon-label($green); + } + + &.mode-error { + @include color-icon-label($red); + } + + &.mode-warning { + @include color-icon-label($yellow); + } + + &.mode-info { + @include color-icon-label($text-black); + @include color-icon-label-hover($dark-blue); + } + + &.size-x_small { + font-size: 8px; + line-height: 10px; + + .svg-icon { + @extend .svg-icon.size-x_small; + } + } + + &.size-small { + font-size: 12px; + line-height: 14px; + + .svg-icon { + @extend .svg-icon.size-small; + } + } + + &.size-medium { + font-size: 16px; + line-height: 20px; + + .svg-icon { + @extend .svg-icon.size-medium; + } + } + + &.size-large { + font-size: 24px; + line-height: 28px; + + .svg-icon { + @extend .svg-icon.size-large; + } + } + + &.size-x_large { + font-size: 34px; + line-height: 40px; + + .svg-icon { + @extend .svg-icon.size-x_large; + } + } +} diff --git a/src/assets/styles/_tooltip_custom_style.scss b/src/assets/styles/_tooltip_custom_style.scss new file mode 100644 index 0000000..886b1dc --- /dev/null +++ b/src/assets/styles/_tooltip_custom_style.scss @@ -0,0 +1,9 @@ +.sdc-custom-tooltip { + background-color: $dark-blue; + border-color: $dark-blue; + border-radius: 10px; + + &:after { + border-color: $dark-blue transparent transparent transparent; + } +} diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss new file mode 100644 index 0000000..3291bce --- /dev/null +++ b/src/assets/styles/style.scss @@ -0,0 +1,5 @@ +@import 'node_modules/onap-ui-common/lib/style'; +@import 'node_modules/onap-ui-common/lib/scss/variables.scss'; +@import 'node_modules/onap-ui-common/lib/scss/mixins.scss'; +@import 'svg_icon.scss'; +@import 'tooltip_custom_style.scss'; |