aboutsummaryrefslogtreecommitdiffstats
path: root/src/style/scss/themes
diff options
context:
space:
mode:
Diffstat (limited to 'src/style/scss/themes')
-rw-r--r--src/style/scss/themes/1802/_components.scss23
-rw-r--r--src/style/scss/themes/1802/button.scss148
-rw-r--r--src/style/scss/themes/1802/modal.scss193
-rw-r--r--src/style/scss/themes/1802/style.scss5
-rw-r--r--src/style/scss/themes/1802/tabs.scss39
5 files changed, 408 insertions, 0 deletions
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;
+ }
+}