From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001 From: Israel Lavi Date: Mon, 21 May 2018 17:42:00 +0300 Subject: init commit onap ui Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi --- src/style/scss/_common.scss | 7 + src/style/scss/_components.scss | 22 + src/style/scss/angular/_svg_icon.scss | 210 ++++++++ src/style/scss/angular/_tooltip_custom_style.scss | 9 + src/style/scss/common/_animation.scss | 149 ++++++ src/style/scss/common/_icons.scss | 19 + src/style/scss/common/_normalize.scss | 578 ++++++++++++++++++++++ src/style/scss/common/_typography.scss | 96 ++++ src/style/scss/common/base.scss | 96 ++++ src/style/scss/common/mixins.scss | 337 +++++++++++++ src/style/scss/common/variables.scss | 35 ++ src/style/scss/style.scss | 6 + src/style/scss/themes/1802/_components.scss | 23 + src/style/scss/themes/1802/button.scss | 148 ++++++ src/style/scss/themes/1802/modal.scss | 193 ++++++++ src/style/scss/themes/1802/style.scss | 5 + src/style/scss/themes/1802/tabs.scss | 39 ++ 17 files changed, 1972 insertions(+) create mode 100644 src/style/scss/_common.scss create mode 100644 src/style/scss/_components.scss create mode 100644 src/style/scss/angular/_svg_icon.scss create mode 100644 src/style/scss/angular/_tooltip_custom_style.scss create mode 100644 src/style/scss/common/_animation.scss create mode 100644 src/style/scss/common/_icons.scss create mode 100644 src/style/scss/common/_normalize.scss create mode 100644 src/style/scss/common/_typography.scss create mode 100644 src/style/scss/common/base.scss create mode 100644 src/style/scss/common/mixins.scss create mode 100644 src/style/scss/common/variables.scss create mode 100644 src/style/scss/style.scss create mode 100644 src/style/scss/themes/1802/_components.scss create mode 100644 src/style/scss/themes/1802/button.scss create mode 100644 src/style/scss/themes/1802/modal.scss create mode 100644 src/style/scss/themes/1802/style.scss create mode 100644 src/style/scss/themes/1802/tabs.scss (limited to 'src/style/scss') diff --git a/src/style/scss/_common.scss b/src/style/scss/_common.scss new file mode 100644 index 0000000..7daac20 --- /dev/null +++ b/src/style/scss/_common.scss @@ -0,0 +1,7 @@ +@import "common/normalize"; +@import "common/variables"; +@import "common/mixins"; +@import "common/typography"; +@import "common/base"; +@import "common/icons"; +@import "common/animation"; diff --git a/src/style/scss/_components.scss b/src/style/scss/_components.scss new file mode 100644 index 0000000..3b0d28d --- /dev/null +++ b/src/style/scss/_components.scss @@ -0,0 +1,22 @@ +@import "../../../components/button/button"; +@import "../../../components/tile/tile"; +@import "../../../components/checkbox/checkbox"; +@import "../../../components/radio/radio"; +@import "../../../components/radioGroup/radioGroup"; +@import "../../../components/tabs/tabs"; +@import "../../../components/icon/icon"; +@import "../../../components/input/input"; +@import "../../../components/dropdown/dropdown"; +@import "../../../components/modal/modal"; +@import "../../../components/menu/menu"; +@import "../../../components/filter-bar/_filter-bar"; +@import "../../../components/search-bar/_search-bar"; +@import "../../../components/checklist/checklist"; +@import "../../../components/autocomplete/autocomplete"; +@import "../../../components/tooltip/tooltip"; +@import "../../../components/tag-cloud/_tag-cloud"; +@import "../../../components/notification/notification"; +@import "../../../components/notifications-container/notifications-container"; +@import "../../../components/accordion/accordion"; +@import "../../../components/panel/panel"; +@import "../../../components/validation/validation"; diff --git a/src/style/scss/angular/_svg_icon.scss b/src/style/scss/angular/_svg_icon.scss new file mode 100644 index 0000000..16be14b --- /dev/null +++ b/src/style/scss/angular/_svg_icon.scss @@ -0,0 +1,210 @@ +@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); + } + + &.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; + } +} + +.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/style/scss/angular/_tooltip_custom_style.scss b/src/style/scss/angular/_tooltip_custom_style.scss new file mode 100644 index 0000000..886b1dc --- /dev/null +++ b/src/style/scss/angular/_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/style/scss/common/_animation.scss b/src/style/scss/common/_animation.scss new file mode 100644 index 0000000..659bd3b --- /dev/null +++ b/src/style/scss/common/_animation.scss @@ -0,0 +1,149 @@ +/*********************************************************************************** + VERTICAL COLLAPSE-EXPEND TRANSITION ANIMATION PAIR. + + We use the 'transition-vertical-collapse' for the collapse/idle block element, + and the 'transition-vertical-expand' to expend that element. + + -important: The element that will be used for the animation should be + a block element, adn have a content or width and height settings for it to work. +*********************************************************************************/ + +/** +Enable to fold an expended block element +@param $offsetY - The top position from which the drop down should fold + */ +@mixin keyframes-expand-animation($name, $maxHeight, $boxShadow:0 0 12px 0px rgba(0,0,0,.3), $margin:0){ + @keyframes #{$name} { + 0% { + opacity: 0; + max-height: 0; + overflow: hidden; + box-shadow: 0 0 0px 0px rgba(0,0,0,.3); + margin:0; + } + 10% { + opacity: 1; + margin: $margin; + } + 50% { + box-shadow: $boxShadow; + } + 99%{ + max-height:$maxHeight; + + overflow: hidden; + } + 100%{ + opacity: 1; + max-height:$maxHeight; + overflow: auto; + } + } +} + +/** +Enable to expend a folded block element +@param $maxHeight - most of the animation is done over the max-height property + so we have to set the maximum height the expended element can expend to. + */ +@mixin keyframes-collapse-animation($name, $maxHeight, $boxShadow:0 0 12px 0px rgba(0,0,0,.3)){ + @keyframes #{$name} { + 0% { + opacity: 1; + max-height:$maxHeight; + box-shadow: $boxShadow; + overflow: hidden; + } + 40%{ + opacity: 1; + } + 99%{ + opacity: 0; + max-height: 0; + overflow: hidden; + box-shadow: 0 0 0px 0px rgba(0,0,0,.3); + } + 100%{ + opacity: 0; + max-height: 0; + overflow: auto; + } + } +} + +/******************************************************************************** + SIMPLE FADE-IN KEYFRAMES ANIMATION (Used in tooltip for example) + + we use 'mixin-keyframes-fade-in-vertically' to create css @keyframes rule that + we later can use with animation property inside our prefered css rules: + .our_class { + ... + animation: keyframes-fade-in-vertically 1s ease-out; + ... + } +*********************************************************************************/ +@mixin mixin-keyframes-fade-in-vertically($fromRelativeHeight, $keyframesName:keyframes-fade-in-vertically){ + @keyframes #{$keyframesName} { + from { + transform: translateY($fromRelativeHeight); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } + } +} + +/******************************************************************************** + SIMPLE FADE-OUT KEYFRAMES ANIMATION (Opposite of fade-in mixin above) +*********************************************************************************/ +@mixin mixin-keyframes-fade-out-vertically($toRelativeHeight, $keyframesName:keyframes-fade-out-vertically){ + @keyframes #{$keyframesName} { + from { + transform: translateY(0); + opacity: 1; + } + to { + transform: translateY($toRelativeHeight); + opacity: 0; + } + } +} + + + +/******************************************************************************** + RIPPLE ANIMATION (Used for ripple-click directive) +*********************************************************************************/ +@keyframes ripple-animation { + from { + transform: scale(0,0); + opacity: 1; + } + to { + transform: scale(2,2); + opacity: 0; + } +} + +.sdc-ripple-click__animated { + position:relative; +} +.sdc-ripple-click__animated::before{ + display: inline-block; + position:absolute; + top: 0; + left: 0; + content: ''; + animation: ripple-animation .3s ease-out; + background-color: $blue; + width: 14px; + height: 14px; + border-radius: 50%; + pointer-events: none; + opacity: 0; +} + + + diff --git a/src/style/scss/common/_icons.scss b/src/style/scss/common/_icons.scss new file mode 100644 index 0000000..00f425d --- /dev/null +++ b/src/style/scss/common/_icons.scss @@ -0,0 +1,19 @@ +.sdc-icon { + display: inline-block; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + width: 16px; + height: 16px; +} + +.sdc-icon-locked {background-image: url("data:image/svg+xml;utf8, "); background-repeat: no-repeat;} +.sdc-icon-plus {background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat;} +.sdc-icon-unlocked {background-image: url("data:image/svg+xml;utf8, "); background-repeat: no-repeat;} +.sdc-icon-vendor {background-image: url("data:image/svg+xml;utf8,vendor"); background-repeat: no-repeat;} +.sdc-icon-vlm {background-image: url("data:image/svg+xml;utf8,vlm_new_icon"); background-repeat: no-repeat;} +.sdc-icon-vsp {background-image: url("data:image/svg+xml;utf8,vsp_new_icon"); background-repeat: no-repeat;} + +.sdc-icon-transform{ + transform: rotate(180deg); +} diff --git a/src/style/scss/common/_normalize.scss b/src/style/scss/common/_normalize.scss new file mode 100644 index 0000000..9375ee9 --- /dev/null +++ b/src/style/scss/common/_normalize.scss @@ -0,0 +1,578 @@ +/* ========================================================================== + Normalize.scss settings + ========================================================================== */ +/** + * Includes legacy browser support IE6/7 + * + * Set to false if you want to drop support for IE6 and IE7 + */ + +$legacy_browser_support: false !default; + +/* Base + ========================================================================== */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS and IE text size adjust after device orientation change, + * without disabling user zoom. + * 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using + * `em` units. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ + @if $legacy_browser_support { + *font-size: 100%; /* 3 */ + } +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ + @if $legacy_browser_support { + *display: inline; + *zoom: 1; + } +} + +/** + * Prevents modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability of focused elements when they are also in an + * active/hover state. + */ + +a { + &:active, &:hover { + outline: 0; + }; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +@if $legacy_browser_support { + blockquote { + margin: 1em 40px; + } +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +@if $legacy_browser_support { + h2 { + font-size: 1.5em; + margin: 0.83em 0; + } + + h3 { + font-size: 1.17em; + margin: 1em 0; + } + + h4 { + font-size: 1em; + margin: 1.33em 0; + } + + h5 { + font-size: 0.83em; + margin: 1.67em 0; + } + + h6 { + font-size: 0.67em; + margin: 2.33em 0; + } +} + +/** + * Addresses styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +@if $legacy_browser_support { + + /** + * Addresses margins set differently in IE 6/7. + */ + + p, + pre { + *margin: 1em 0; + } + + /* + * Addresses CSS quotes not supported in IE 6/7. + */ + + q { + *quotes: none; + } + + /* + * Addresses `quotes` property not supported in Safari 4. + */ + + q:before, + q:after { + content: ''; + content: none; + } +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +@if $legacy_browser_support { + + /* ========================================================================== + Lists + ========================================================================== */ + + /* + * Addresses margins set differently in IE 6/7. + */ + + dl, + menu, + ol, + ul { + *margin: 1em 0; + } + + dd { + *margin: 0 0 0 40px; + } + + /* + * Addresses paddings set differently in IE 6/7. + */ + + menu, + ol, + ul { + *padding: 0 0 0 40px; + } + + /* + * Corrects list images handled incorrectly in IE 7. + */ + + nav ul, + nav ol { + *list-style: none; + *list-style-image: none; + } + +} + +/* Embedded content + ========================================================================== */ + +/** + * 1. Remove border when inside `a` element in IE 8/9/10. + * 2. Improves image quality when scaled in IE 7. + */ + +img { + border: 0; + @if $legacy_browser_support { + *-ms-interpolation-mode: bicubic; /* 2 */ + } +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + @if $legacy_browser_support { + _font-family: 'courier new', monospace; + } + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + * 4. Improves appearance and consistency in all browsers. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ + @if $legacy_browser_support { + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ + } +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + * 4. Removes inner spacing in IE 7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE 6. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + @if $legacy_browser_support { + *overflow: visible; /* 4 */ + } +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + * Known issue: excess padding remains in IE 6. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + @if $legacy_browser_support { + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ + } +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + box-sizing: content-box; /* 2 */ +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + * 3. Corrects text not wrapping in Firefox 3. + * 4. Corrects alignment displayed oddly in IE 6/7. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ + @if $legacy_browser_support { + white-space: normal; /* 3 */ + *margin-left: -7px; /* 4 */ + } +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/src/style/scss/common/_typography.scss b/src/style/scss/common/_typography.scss new file mode 100644 index 0000000..6fd59cc --- /dev/null +++ b/src/style/scss/common/_typography.scss @@ -0,0 +1,96 @@ +$heading-font-1: 28px; +$heading-font-2: 24px; +$heading-font-3: 20px; +$heading-font-4: 16px; +$heading-font-5: 14px; + +$body-font-1: 14px; +$body-font-2: 13px; +$body-font-3: 12px; +$body-font-4: 10px; + +@mixin base-font-regular() { + font-family: OpenSans-Regular, Arial, sans-serif; + font-style: normal; + font-weight: 400; +} + +@mixin base-font-italic(){ + font-family: OpenSans-Italic, OpenSans-Regular, Arial, sans-serif; + font-style: normal; + font-weight: 400; +} + +@mixin base-font-semibold() { + font-family: OpenSans-Semibold, Arial, sans-serif; + font-style: normal; + font-weight: 400; +} + +@mixin font-error() { + color: $red; +} + +@mixin heading-1() { + @include base-font-regular; + font-size: $heading-font-1; +} + +@mixin heading-2() { + @include base-font-regular; + font-size: $heading-font-2; +} + +@mixin heading-3 { + @include base-font-regular; + font-size: $heading-font-3; +} + +@mixin heading-4 { + @include base-font-regular; + font-size: $heading-font-4; +} + +@mixin heading-4-emphasis { + @include base-font-semibold; + font-size: $heading-font-4; +} + +@mixin heading-5 { + @include base-font-semibold; + font-size: $heading-font-5; +} + +@mixin body-1 { + @include base-font-regular; + font-size: $body-font-1; +} + +@mixin body-1-italic { + @include base-font-italic; + font-size: $body-font-1; +} + +@mixin body-2 { + @include base-font-regular; + font-size: $body-font-2; +} + +@mixin body-2-emphasis { + @include base-font-semibold; + font-size: $body-font-2; +} + +@mixin body-3 { + @include base-font-regular; + font-size: $body-font-3; +} +@mixin body-3-emphasis { + @include base-font-semibold; + font-size: $body-font-3; +} + +@mixin body-4 { + @include base-font-regular; + font-size: $body-font-4; +} \ No newline at end of file diff --git a/src/style/scss/common/base.scss b/src/style/scss/common/base.scss new file mode 100644 index 0000000..02baf81 --- /dev/null +++ b/src/style/scss/common/base.scss @@ -0,0 +1,96 @@ +html { + font-size: 100%; + height: 100%; +} + +body { + /* scrollbar styling for Internet Explorer */ + scrollbar-face-color: $light-gray; + scrollbar-track-color: $white; + scrollbar-shadow-color:$white; + scrollbar-arrow-color: $gray; + + height: 100%; + @extend %noselect; +} + +/* scrollbar styling for Google Chrome | Safari | Opera */ +::-webkit-scrollbar { + width: 11px; + height: 8px; +} + +::-webkit-scrollbar-track { + background-color: $white; + border: 1px solid $light-gray; + border-top:none; + border-bottom:none; +} + +::-webkit-scrollbar-thumb { + border-radius: 6px; + background-color: $gray; + border: 2px solid rgba(0,0,0,0); + background-clip: padding-box; + + &:hover { + border-width:1px 0px 1px 1px; + } +} + +/* Mozilla Firefox currently doesn't support scrollbar styling */ + +ul { + list-style: none; +} + +h1, h2, h3, h4, h5, h6, ul { + margin: 0; + padding: 0; +} + +input[type='text'] { + padding: 4px; + width: 100%; +} + +input[type="checkbox"] { + width: auto; +} + +input, select, button { + @include body-1; + box-sizing: border-box; +} + +fieldset { + border: none; +} + +fieldset { + label { + display: inline-block; + } +} + +.nav-tabs > li > a:focus, +.btn:focus, +.btn:active:focus, +.btn.active:focus { + outline: none; +} + +.error-message{ + color: $red; + @include body-3; + margin-top: 3px; + &:before{ + content: ""; + display: inline-block; + width: 14px; + height: 14px; + margin-right: 6px; + //not correct icon + background: no-repeat url('data:image/svg+xml;utf8,'); + } +} diff --git a/src/style/scss/common/mixins.scss b/src/style/scss/common/mixins.scss new file mode 100644 index 0000000..c4cb733 --- /dev/null +++ b/src/style/scss/common/mixins.scss @@ -0,0 +1,337 @@ +/* Colors */ +.sdc-bc-white { background-color: $white; } +.sdc-bc-blue { background-color: $blue; } +.sdc-bc-light-blue { background-color: $light-blue; } +.sdc-bc-lighter-blue { background-color: $lighter-blue; } +.sdc-bc-blue-disabled { background-color: $blue-disabled; } +.sdc-bc-dark-blue { background-color: $dark-blue; } +.sdc-bc-black { background-color: $black; } +.sdc-bc-rich-black { background-color: $rich-black; } +.sdc-bc-text-black { background-color: $text-black; } +.sdc-bc-dark-gray { background-color: $dark-gray; } +.sdc-bc-gray { background-color: $gray; } +.sdc-bc-light-gray { background-color: $light-gray; } +.sdc-bc-silver { background-color: $silver; } +.sdc-bc-light-silver { background-color: $light-silver; } +.sdc-bc-green { background-color: $green; } +.sdc-bc-red { background-color: $red; } +.sdc-bc-disabled-red { background-color: $disabled-red; } +.sdc-bc-light-red { background-color: $light-red; } +.sdc-bc-yellow { background-color: $yellow; } +.sdc-bc-dark-purple { background-color: $dark-purple; } +.sdc-bc-purple { background-color: $purple; } +.sdc-bc-light-purple { background-color: $light-purple; } +.sdc-bc-lighter-silver { background-color: $lighter-silver; } +/* Prefix */ +$box-sizing-prefix: webkit moz spec; +$border-radius-prefix: webkit spec; +$box-shadow-radius-prefix: webkit moz spec; +$text-shadow-radius-prefix: spec; +$text-shadow-prefix: spec; +$box-shadow-prefix: all; +$linear-gradient-prefix: all; +$transition-prefix: webkit moz o spec; +$flex-prefix: webkit spec; +$browserPrefixes: webkit moz o ms; + +@mixin prefix($property, $value, $prefixeslist: 'all') { + @if $prefixeslist == all { + -webkit-#{$property}: $value; + -moz-#{$property}: $value; + -ms-#{$property}: $value; + -o-#{$property}: $value; + #{$property}: $value; + } @else { + @each $prefix in $prefixeslist { + @if $prefix == webkit { + -webkit-#{$property}: $value; + } @else if $prefix == moz { + -moz-#{$property}: $value; + } @else if $prefix == ms { + -ms-#{$property}: $value; + } @else if $prefix == o { + -o-#{$property}: $value; + } @else if $prefix == spec { + #{$property}: $value; + } @else { + @warn "No such prefix: #{$prefix}"; + } + } + } +} + +/* Value Prefix*/ +@mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) { + + @if $prefixeslist == all { + #{property} : -webkit-#{$valuesuffix}($from, $to); + #{property} : -moz-#{$valuesuffix}($from, $to); + #{property} : -o-#{$valuesuffix}($from, $to); + #{property} : -ms-#{$valuesuffix}($from, $to); + + } @else { + @each $prefix in $prefixeslist { + @if $prefix == webkit { + #{property} : -webkit-#{$valuesuffix}($from, $to); + } @else if $prefix == moz { + #{property} : -moz-#{$valuesuffix}($from, $to); + } @else if $prefix == ms { + #{property} : -ms-#{$valuesuffix}($from, $to); + } @else if $prefix == o { + #{property} : -o-#{$valuesuffix}($from, $to); + } @else { + @warn "No such prefix: #{$prefix}"; + } + } + } +} + +/* Box sizing */ +@mixin box-sizing($value: border-box) { + @include prefix(box-sizing, $value, $box-sizing-prefix); +} + +/* Borders & Shadows */ +@mixin box-shadow($value) { + @include prefix(box-shadow, $value, $box-shadow-radius-prefix); +} + +@mixin text-shadow($value) { + @include prefix(text-shadow, $value, $text-shadow-radius-prefix); +} + +@mixin border-radius($value, $positions: all) { + @if ($positions == all) { + @include prefix(border-radius, $value, $border-radius-prefix); + } @else { + @each $position in $positions { + @include prefix(border-#{$position}-radius, $value, $border-radius-prefix); + } + } + +} + +@mixin transition($value) { + @include prefix(transition, $value, $transition-prefix); +} + +/* Opacity */ +@mixin opacity($alpha) { + $ie-opacity: round($alpha * 100); + opacity: $alpha; + filter: unquote("alpha(opacity = #{$ie-opacity})"); +} + +/* Ellipsis */ +@mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) { + overflow: hidden; + text-overflow: ellipsis; + width: $width; + white-space: nowrap; + display: $display; + max-width: $max-width; +} + +@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white){ + overflow: hidden; + position: relative; + line-height: $lineHeight; + max-height: $lineHeight * $lineCount; + text-align: justify; + // margin-right: -1em; + padding-right: 1em; + &:before { + content: '...'; + position: absolute; + right: 3px; + bottom: 0; + } + &:after { + content: ''; + position: absolute; + right: 0; + width: 1em; + height: 1em; + margin-top: 0.2em; + background: $bgColor; + } +} + +@mixin gradient($from, $to) { + /* fallback/image non-cover color */ + background-color: $from; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); + @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix); +} + +/* Vertical placement of multuple lines of text */ +@mixin vertical-text($height) { + position: absolute; + top: 50%; + margin-top: -$height/2; +} + +@mixin text-vertical-align($align: middle) { + display: table; + width: 100%; + + & > * { + vertical-align: $align; + display: table-cell; + } +} + +@mixin center-element($width) { + width: $width; + margin-left: auto; + margin-right: auto; +} + +@mixin center-content($width) { + & > * { + @include center-element($width); + } +} + +/* transform-rotate */ +// @mixin +// Defines a 2D rotation, the angle is specified in the parameter +// @param +// $deg - angle in degrees +@mixin transform-rotate($deg) { + transform: rotate($deg + deg); /* IE10 and Mozilla */ + -ms-transform: rotate($deg + deg); /* IE 9 */ + -webkit-transform: rotate($deg + deg); /* Safari and Chrome */ +} + +/* transform-translate */ +// @mixin +// Defines a 2D rotation, the angle is specified in the parameter +// @param +// $deg - angle in degrees +@mixin transform-translate($x, $y) { + transform: translate($x, $y); /* IE10 and Mozilla */ + -ms-transform: translate($x, $y); /* IE 9 */ + -webkit-transform: translate($x, $y); /* Safari and Chrome */ +} + +/* transform-scale */ +// @mixin +// Defines a 2D scale transformation, changing the elements width and height +// @param +// $width - width +// @param +// $height - height +@mixin transform-scale($width, $height) { + transform: scale($width, $height); /* IE10 and Mozilla */ + -ms-transform: scale($width, $height); /* IE 9 */ + -webkit-transform: scale($width, $height); /* Safari and Chrome */ +} + +@mixin scrollable() { + ::-webkit-scrollbar { + width: 8px; + } +} + +@mixin create-circle($size, $bgcolor, $content) { + border-radius: 50%; + width: $size; + height: $size; + background: $bgcolor; + border: 3px solid $bgcolor; + &:after { + content: $content; + position: relative; + left: 9px; + top: 9px; + @include base-font-semibold; + font-size: $body-font-1; + } +} + +/**/ +@mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) { + + @keyframes #{$animationType} { + from { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($fromValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + to { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($toValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + } + @-moz-keyframes #{$animationType}{ + /* Firefox */ + from { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($fromValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + to { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($toValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + } + @-webkit-keyframes #{$animationType} { + /* Safari and Chrome */ + from { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($fromValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + to { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($toValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + } + @-o-keyframes #{$animationType} { + /* Opera */ + from { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($fromValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + to { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($toValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + } +} + + +/**/ +@mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) { + @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity)); +} + +%noselect { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} diff --git a/src/style/scss/common/variables.scss b/src/style/scss/common/variables.scss new file mode 100644 index 0000000..38eded4 --- /dev/null +++ b/src/style/scss/common/variables.scss @@ -0,0 +1,35 @@ +// Colors +$black: #000000; +$rich-black: #323943; +$text-black: #191919; +$blue: #009fdb; +$dark-blue: #0568ae; +$light-blue: #1eb9f3; +$lighter-blue: #e6f6fb; +$blue-disabled: #9dd9ef; +$red: #cf2a2a; +$light-red:#ed4141; +$disabled-red:#f4adad; +$purple: #9063cd; +$dark-purple: #702f8a; +$yellow: #ffb81c; +$green: #4ca90c; +$gray: #959595; +$dark-gray: #5a5a5a; +$light-gray: #d2d2d2; +$light-silver: #f2f2f2; +$silver: #eaeaea; + + +$light-purple: #caa2dd; +$lighter-silver: #f8f8f8; +$white: #ffffff; + +$scroll-bar-color: $text-black; + +// Button Sizes +$btn-extra-small: 90px; +$btn-small: 110px; +$btn-medium: 140px; +$btn-large: 180px; +$btn-default: auto; diff --git a/src/style/scss/style.scss b/src/style/scss/style.scss new file mode 100644 index 0000000..5512776 --- /dev/null +++ b/src/style/scss/style.scss @@ -0,0 +1,6 @@ +@import "common"; +@import "components"; + +// for angular +@import "angular/svg_icon"; +@import "angular/tooltip_custom_style"; diff --git a/src/style/scss/themes/1802/_components.scss b/src/style/scss/themes/1802/_components.scss new file mode 100644 index 0000000..6800005 --- /dev/null +++ b/src/style/scss/themes/1802/_components.scss @@ -0,0 +1,23 @@ +/* Deafult theme */ +@import "../../../../../components/tile/tile"; +@import "../../../../../components/checkbox/checkbox"; +@import "../../../../../components/radio/radio"; +@import "../../../../../components/radioGroup/radioGroup"; +@import "../../../../../components/icon/icon"; +@import "../../../../../components/input/input"; +@import "../../../../../components/dropdown/dropdown"; +@import "../../../../../components/menu/menu"; +@import "../../../../../components/filter-bar/_filter-bar"; +@import "../../../../../components/search-bar/_search-bar"; +@import "../../../../../components/checklist/checklist"; +@import "../../../../../components/autocomplete/autocomplete"; +@import "../../../../../components/tooltip/tooltip"; +@import "../../../../../components/tag-cloud/_tag-cloud"; +@import "../../../../../components/notification/notification"; +@import "../../../../../components/notifications-container/notifications-container"; +@import "../../../../../components/validation/validation"; + +/* 1802 theme */ +@import "button"; +@import "modal"; +@import "tabs"; diff --git a/src/style/scss/themes/1802/button.scss b/src/style/scss/themes/1802/button.scss new file mode 100644 index 0000000..05d91d5 --- /dev/null +++ b/src/style/scss/themes/1802/button.scss @@ -0,0 +1,148 @@ +.sdc-button { + @include box-sizing; + display: inline-block; + + outline: none; + border-radius: 2px; + padding: 0 16px; + + height: 32px; + line-height: 32px; + width: 120px; + min-width: 90px; + + cursor: pointer; + text-align: center; + @include body-1; + &:disabled { + cursor: default; + } + + // Primary button + &.sdc-button__primary { + border: none; + background-color: $blue; + color: $white; + + &:not(:disabled) { + &:hover, &:active { + background-color: $light-blue; + } + &:focus:not(:active) { + border: 0.5px solid $white; + background-color: $light-blue; + box-shadow: 0px 0px 0px 1px $light-blue; + } + } + + &:disabled{ + background: $blue-disabled; + } + } + + // Secondary button + &.sdc-button__secondary { + border: 1px solid $light-gray; + background-color: transparent; + color: $text-black; + + &:not(:disabled) { + &:hover, &:active { + background-color: transparent; + color:$text-black; + border: 1px solid $gray; + } + &:focus:not(:active) { + color: $text-black; + box-shadow: inset 0px 0px 0px 0px $light-gray, 0px 0px 0px 1px $gray; + } + } + + &:disabled { + color: $blue-disabled; + border-color: $blue-disabled; + } + } + + // Link button + &.sdc-button__link { + background-color: transparent; + color: $blue; + fill: $blue; + border: none; + + &:not(:disabled) { + &:hover, &:active { + color: $light-blue; + } + &:focus:not(:active) { + border: 1px solid $dark-blue; + color: $light-blue; + } + } + + &:disabled{ + color: $blue-disabled; + } + } + + + // alert button + &.sdc-button__alert { + border: none; + background-color: $red; + color: $white; + + &:not(:disabled) { + &:hover, &:active { + background-color: $light-red; + } + &:focus:not(:active) { + border: 0.5px solid $white; + background-color: $light-red; + box-shadow: 0px 0px 0px 1px $light-red; + } + } + + &:disabled{ + background: $disabled-red; + } + } + + + /*** Sizes ***/ + &.btn-large{ + width: $btn-large; + } + + &.btn-medium{ + width: $btn-medium; + } + + &.btn-small{ + width: $btn-small; + } + + &.btn-x-small{ + width: $btn-extra-small; + } + + &.btn-default{ + width: $btn-default; + } + + /*** Buttons with icons ***/ + .sdc-icon-right{ + margin-left: 15px; + } + + .sdc-icon-left{ + margin-right: 15px; + } + + svg { + display: inline-block; + vertical-align: middle; + } +} + diff --git a/src/style/scss/themes/1802/modal.scss b/src/style/scss/themes/1802/modal.scss new file mode 100644 index 0000000..de99d52 --- /dev/null +++ b/src/style/scss/themes/1802/modal.scss @@ -0,0 +1,193 @@ + +.sdc-modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + + overflow: auto; + margin: auto; + display: flex; + align-items: center; + z-index: 1001; + + + svg path { + fill: inherit; + } + + .sdc-modal__wrapper { + @include body-1; + background: $white; + width: 100%; + + @include box-shadow(0 0 4px 0 rgba(0,0,0,0.50)); + color: $text-black; + display: flex; + flex-direction: column; + &.sdc-modal-type-info { + border-top: solid 6px $blue; + .sdc-modal__svg-use { + fill: $blue; + } + .svg-icon { + &.__errorCircle { + width: 30px; + height: 30px; + } + } + } + &.sdc-modal-type-alert { + border-top: solid 6px $yellow; + .sdc-modal__svg-use { + fill: $yellow; + } + .svg-icon { + &.__exclamationTriangleLine { + width: 30px; + height: 30px; + } + } + } + &.sdc-modal-type-error { + border-top: solid 6px $red; + .sdc-modal__svg-use { + fill: $red; + } + .svg-icon { + &.__error { + width: 30px; + height: 30px; + } + } + } + &.sdc-modal-type-custom { + padding: 0 30px; + border-radius: 4px; + + .sdc-custom__header { + @include box-sizing; + color: $dark-gray; + height: 50px; + border-bottom: solid 3px $blue; + padding: 0; + + .title { + @include heading-3; + color: $dark-gray; + } + + .sdc-modal__close-button { + margin-top: 0px; + width: 20px; + height: 14px; + } + .sdc-modal__close-button-svg { + width: 20px; + height: 20px; + .sdc-modal__svg-use { + fill: $white; + } + .svg-icon { + height: 14px; + width: 14px; + fill: $white; + } + } + } + .sdc-modal__content { + padding: 20px 40px; + } + } + .sdc-modal__header { + padding: 0px 10px 8px 14px; + display: flex; + justify-content: space-between; + text-align: left; + .sdc-modal__icon { + padding: 20px 12px 0px 6px; + } + + .title { + @include heading-2; + flex: 1 1 auto; + color: $text-black; + padding-top: 19px; + } + + .sdc-modal__close-button { + order:3; + width: 14px; + height: 14px; + margin-top:10px; + cursor: pointer; + .sdc-modal__svg-use { + fill: $black; + } + } + } + .sdc-modal__content { + order:2; + padding-left: 63px; + padding-right: 68px; + padding-bottom: 26px; + } + + .sdc-modal__footer { + order:3; + background-color: $light-silver; + border-top: solid 1px $silver; + padding: 17px 30px; + display: flex; + justify-content: flex-end; + margin: 0 -30px; + button{ + margin-left: 10px; + } + } + } +} + +.modal-background { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: $black; + opacity: 0.70; + z-index: 1000; + + &.show { + z-index: 1000; + opacity: 0.70; + transition: opacity .3s ease, z-index .3s; + } + &.hide { + z-index: -1; + opacity: 0; + transition: opacity .35s ease, z-index .35s; + } +} + +.xl { + width: 1200px; +} + +.l { + width: 875px; +} + +.md { + width: 650px; +} + +.sm { + width: 500px; +} + +.xsm { + width: 432px; +} + diff --git a/src/style/scss/themes/1802/style.scss b/src/style/scss/themes/1802/style.scss new file mode 100644 index 0000000..ae314d8 --- /dev/null +++ b/src/style/scss/themes/1802/style.scss @@ -0,0 +1,5 @@ +@import "../../common"; +@import "components"; + +// for angular +@import "../../angular/svg_icon"; diff --git a/src/style/scss/themes/1802/tabs.scss b/src/style/scss/themes/1802/tabs.scss new file mode 100644 index 0000000..70ee4cb --- /dev/null +++ b/src/style/scss/themes/1802/tabs.scss @@ -0,0 +1,39 @@ +.sdc-tabs { + .sdc-tab { + background-color: $white; + border: 1px solid $silver; + border-left: none; + display: inline-block; + height: 36px; + text-align: center; + cursor: pointer; + padding: 2px 10px 0 10px; + margin: 0; + + + &:first-child { + border-left: 1px solid $silver; + } + &.sdc-tab-active { + background-color: $silver; + } + &[disabled] { + opacity: 0.3; + cursor: default; + } + } + &.sdc-tabs-header { + .sdc-tab { + @include heading-2; + } + } + &.sdc-tabs-menu { + .sdc-tab { + @include body-1; + padding: 0px 10px 4px 10px; + } + } + .sdc-tab-content { + margin-top: 30px; + } +} -- cgit 1.2.3-korg