diff options
Diffstat (limited to 'resources/scss/common')
| -rw-r--r-- | resources/scss/common/_base.scss | 88 | ||||
| -rw-r--r-- | resources/scss/common/_layout.scss | 28 | ||||
| -rw-r--r-- | resources/scss/common/_typography.scss | 106 | ||||
| -rw-r--r-- | resources/scss/common/_utils.scss | 322 | ||||
| -rw-r--r-- | resources/scss/common/_variables.scss | 70 |
5 files changed, 614 insertions, 0 deletions
diff --git a/resources/scss/common/_base.scss b/resources/scss/common/_base.scss new file mode 100644 index 0000000..134fc16 --- /dev/null +++ b/resources/scss/common/_base.scss @@ -0,0 +1,88 @@ +/* +* ============LICENSE_START======================================================= +* SPARKY (AAI UI service) +* ================================================================================ +* Copyright © 2017 AT&T Intellectual Property. +* Copyright © 2017 Amdocs +* All rights reserved. +* ================================================================================ +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +* +* ECOMP and OpenECOMP are trademarks +* and service marks of AT&T Intellectual Property. +*/ + +html { + font-size: 100%; + height: 100%; +} + +body { + /* scrollbar styling for Internet Explorer */ + scrollbar-face-color: $scroll-bar-color; + scrollbar-track-color: $scroll-bar-color; + height: 100%; + min-width: 1280px; + overflow-y: auto; + //@extend %noselect; +} + +/* scrollbar styling for Google Chrome | Safari | Opera */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background-color: transparent; + border-radius: 10px; +} + +::-webkit-scrollbar-thumb { + border-radius: 10px; + border: 1px solid $scroll-bar-color; + background-color: transparent; +} + +/* Mozilla Firefox currently doesn't support scrollbar styling */ + +ul { + list-style: none; +} + +h1, h2, h3, h4, h5, h6, ul { + margin: 0; + padding: 0; +} + +input { + + padding: 7px 10px; +} + +fieldset { + border: none; +} + +fieldset { + label { + display: inline-block; + } +} + +.nav-tabs > li > a:focus, +.btn:focus, +.btn:active:focus, +.btn.active:focus { + outline: none; +} diff --git a/resources/scss/common/_layout.scss b/resources/scss/common/_layout.scss new file mode 100644 index 0000000..891822e --- /dev/null +++ b/resources/scss/common/_layout.scss @@ -0,0 +1,28 @@ +/* +* ============LICENSE_START======================================================= +* SPARKY (AAI UI service) +* ================================================================================ +* Copyright © 2017 AT&T Intellectual Property. +* Copyright © 2017 Amdocs +* All rights reserved. +* ================================================================================ +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +* +* ECOMP and OpenECOMP are trademarks +* and service marks of AT&T Intellectual Property. +*/ + +.hidden { + display: none; +} diff --git a/resources/scss/common/_typography.scss b/resources/scss/common/_typography.scss new file mode 100644 index 0000000..ce5462a --- /dev/null +++ b/resources/scss/common/_typography.scss @@ -0,0 +1,106 @@ +/* +* ============LICENSE_START======================================================= +* SPARKY (AAI UI service) +* ================================================================================ +* Copyright © 2017 AT&T Intellectual Property. +* Copyright © 2017 Amdocs +* All rights reserved. +* ================================================================================ +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +* +* ECOMP and OpenECOMP are trademarks +* and service marks of AT&T Intellectual Property. +*/ + +/* Fonts */ + +$base-font-regular: Arial; +$base-font-light: Arial; +$base-font-medium: Arial; +$base-font-bold: Arial; + +$heading-font-1: 36px; +$heading-font-2: 24px; +$heading-font-3: 18px; +$heading-font-4: 16px; + +$body-font-1: 14px; +$body-font-2: 13px; +$body-font-3: 12px; + +$focus-font-1: 55px; +$focus-font-2: 50px; +$focus-font-3: 45px; +$focus-font-4: 40px; + +.heading-1 { + font-family: $base-font-light; + font-size: $heading-font-1; +} + +.heading-2 { + font-family: $base-font-light; + font-size: $heading-font-2; +} + +.heading-3 { + font-family: $base-font-regular; + font-size: $heading-font-3; +} + +.heading-3-medium { + font-family: $base-font-medium; + font-size: $heading-font-3; +} + +.heading-4 { + font-family: $base-font-regular; + font-size: $heading-font-4; +} + +.heading-4-medium { + font-family: $base-font-medium; + font-size: $heading-font-4; +} + +.body-1 { + font-family: $base-font-regular; + font-size: $body-font-1; +} + +.body-1-medium { + font-family: $base-font-medium; + font-size: $body-font-1; +} + +.body-2 { + font-family: $base-font-regular; + font-size: $body-font-2; +} + +.body-2-medium { + font-family: $base-font-medium; + font-size: $body-font-2; +} + +.body-3 { + font-family: $base-font-regular; + font-size: $body-font-3; +} + +.body-3-medium { + font-family: $base-font-medium; + font-size: $body-font-3; +} + diff --git a/resources/scss/common/_utils.scss b/resources/scss/common/_utils.scss new file mode 100644 index 0000000..8aa96b5 --- /dev/null +++ b/resources/scss/common/_utils.scss @@ -0,0 +1,322 @@ +/* +* ============LICENSE_START======================================================= +* SPARKY (AAI UI service) +* ================================================================================ +* Copyright © 2017 AT&T Intellectual Property. +* Copyright © 2017 Amdocs +* All rights reserved. +* ================================================================================ +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +* +* ECOMP and OpenECOMP are trademarks +* and service marks of AT&T Intellectual Property. +*/ + +/* 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() { + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + white-space: nowrap; + display: inline-block; +} + +@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 multiline-ellipsis($height, $lineheight, $ellipsiswidth: 3em) { + + $ellipsiswidth: 3em !default; + + .ellipsis { + overflow: hidden; + height: $height; + line-height: $lineheight; + } + + .ellipsis:before { + content: ""; + float: left; + width: 5px; + height: $height; + } + + .ellipsis > *:first-child { + float: right; + width: 100%; + margin-left: -5px; + } + + .ellipsis:after { + content: "\02026"; + + float: right; + position: relative; + top: -25px; + left: 100%; + width: $ellipsiswidth; + margin-left: -$ellipsiswidth; + padding-right: 5px; + + text-align: right; + } + +} + +@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 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; + } + } + } +} diff --git a/resources/scss/common/_variables.scss b/resources/scss/common/_variables.scss new file mode 100644 index 0000000..e664316 --- /dev/null +++ b/resources/scss/common/_variables.scss @@ -0,0 +1,70 @@ +/* +* ============LICENSE_START======================================================= +* SPARKY (AAI UI service) +* ================================================================================ +* Copyright © 2017 AT&T Intellectual Property. +* Copyright © 2017 Amdocs +* All rights reserved. +* ================================================================================ +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +* +* ECOMP and OpenECOMP are trademarks +* and service marks of AT&T Intellectual Property. +*/ + +// primary colors +$blue: #009fdb; +$dark-blue: #0568ae; +$light-blue: #71c5e8; +$green: #4ca90c; +$dark-green: #007a3e; +$light-green: #b5bd00; +$orange: #ea7400; +$yellow: #ffb81c; +$dark-purple: #702f8a; +$purple: #9063cd; +$light-purple: #caa2dd; +$black: #000000; +$dark-gray: #5a5a5a; +$gray: #959595; +$light-gray: #d2d2d2; +$white: #ffffff; + +// Secondary Colors +$red: #cf2a2a; +$background-gray: #f2f2f2; +$text-black: #191919; +$link-blue: #056bae; +$functional-green: #007a3e; +$functional-yellow: #ffb81c; +$tlv-gray: #f8f8f8; +$tlv-light-gray: #eaeaea; +$di-light-grey: #91a2ae; +$tlv-hover: #e6f6fb; + + +$scroll-bar-color: $dark-gray; + +//responsive @media params +$tablet-max-width: 1024px; +$laptop-min-width: 1224px; +$desktop-min-width: 1824px; + +/* Textures */ +$images-folder-name: "../images"; +$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg"; +$interface-icon: $images-folder-name + "/interface.svg"; +$sdc-logo: $images-folder-name + "/logo.svg"; +$warning-icon: $images-folder-name + "/warning.svg"; +$icons-folder-path: $images-folder-name + "/icons"; |