diff --git a/client/client/src/basic-data/index.html b/client/client/src/basic-data/index.html index 17ac4cf99..0b42536e6 100644 --- a/client/client/src/basic-data/index.html +++ b/client/client/src/basic-data/index.html @@ -10,17 +10,19 @@ Basic data - - - + + + + + Pay method - + initial-data="$ctrl.client.payMethod"> diff --git a/client/client/src/create/index.html b/client/client/src/create/index.html index 7834684c9..abf60ca46 100644 --- a/client/client/src/create/index.html +++ b/client/client/src/create/index.html @@ -6,22 +6,11 @@ save="post">
-
+
Create client - - - - - - - - {{firstName}} {{name}} + + + + + + + + - - + + + + + + + + + + + + + + diff --git a/client/client/src/credit-insurance/create/index.html b/client/client/src/credit-insurance/create/index.html index 2a83a2775..b37ed2c9a 100644 --- a/client/client/src/credit-insurance/create/index.html +++ b/client/client/src/credit-insurance/create/index.html @@ -4,7 +4,6 @@ diff --git a/client/client/src/fiscal-data/index.html b/client/client/src/fiscal-data/index.html index 445939624..e22006c26 100644 --- a/client/client/src/fiscal-data/index.html +++ b/client/client/src/fiscal-data/index.html @@ -24,13 +24,6 @@ vn-acl="administrative, salesAssistant, salesPerson" acl-conditional-to-salesPerson="{{!$ctrl.client.isTaxDataChecked}}"> - - - - - - + + + + + - - - - - + + + + + + + + + + + div > .mdl-textfield { position: relative; @@ -44,13 +44,12 @@ ul.vn-autocomplete { max-height: 300px; li { + @extend %clickable; display: block; padding: .8em; margin: 0; - cursor: pointer; - &.active, - &:hover { + &.active { background-color: $hover; } &.load-more { diff --git a/client/core/src/components/grid/style.scss b/client/core/src/components/grid/style.scss index 197ce71f4..88275ff61 100644 --- a/client/core/src/components/grid/style.scss +++ b/client/core/src/components/grid/style.scss @@ -1,4 +1,4 @@ -@import "colors"; +@import "effects"; .vn-grid { border-collapse: collapse; @@ -26,13 +26,8 @@ transition: background-color 200ms ease-in-out; &.clickable { - cursor: pointer; - - &:hover { - background-color: $hover; - } + @extend %clickable; } - &.success { background-color: rgba(163, 209, 49, 0.3); diff --git a/client/item/src/create/index.html b/client/item/src/create/index.html index 2fbf02f29..a39653d9c 100644 --- a/client/item/src/create/index.html +++ b/client/item/src/create/index.html @@ -6,7 +6,7 @@ save="post"> -
+
New item diff --git a/client/salix/src/components/home/style.scss b/client/salix/src/components/home/style.scss index b44afdab8..6d8d3fa4a 100644 --- a/client/salix/src/components/home/style.scss +++ b/client/salix/src/components/home/style.scss @@ -1,4 +1,4 @@ -@import "colors"; +@import "effects"; vn-home { padding: 2em; @@ -17,6 +17,7 @@ vn-home { flex-wrap: wrap; & > a { + @extend %clickable-light; overflow:hidden; border-radius: 6px; background-color: $main-01; @@ -29,11 +30,6 @@ vn-home { padding: 1em; justify-content: center; - transition: opacity 250ms ease-out; - - &:hover { - background-color: $hover; - } & > vn-icon { font-size: 4em; } diff --git a/client/salix/src/components/left-menu/style.scss b/client/salix/src/components/left-menu/style.scss index a029594e6..311d94fcc 100644 --- a/client/salix/src/components/left-menu/style.scss +++ b/client/salix/src/components/left-menu/style.scss @@ -1,8 +1,12 @@ -@import "colors"; +@import "effects"; vn-menu-item { - & > li.active { - background-color: $main-header; - color: white; + & > li { + @extend %clickable; + + &.active { + background-color: $main-header; + color: white; + } } } diff --git a/client/salix/src/components/main-menu/style.scss b/client/salix/src/components/main-menu/style.scss index eddeb2677..88eaf3105 100644 --- a/client/salix/src/components/main-menu/style.scss +++ b/client/salix/src/components/main-menu/style.scss @@ -1,4 +1,4 @@ -@import "colors"; +@import "effects"; vn-main-menu { #user { @@ -25,9 +25,9 @@ vn-main-menu { color: white; li { + @extend %clickable-light; background-color: $main-01; margin-bottom: .6em; - cursor: pointer; padding: .8em; border-radius: .1em; min-width: 8em; @@ -36,9 +36,6 @@ vn-main-menu { padding-right: .3em; vertical-align: middle; } - &:hover { - background-color: $hover; - } &:last-child { margin-bottom: 0; } diff --git a/client/salix/src/styles/colors.scss b/client/salix/src/styles/colors.scss index 3a9cea1c6..2359f922e 100644 --- a/client/salix/src/styles/colors.scss +++ b/client/salix/src/styles/colors.scss @@ -1,7 +1,8 @@ $main-font-color :#222222; $secondary-font-color: #9b9b9b; $main-header: #3d3d3d; -$hover: #c4c4c4; +$hover: rgba(0, 0, 0, 0.1); +$hover-opacity: .7; $main-bg: #e5e5e5; $main-01: #f7931e; $main-01-05: rgba($main-01, 0.5); diff --git a/client/salix/src/styles/effects.scss b/client/salix/src/styles/effects.scss new file mode 100644 index 000000000..6c1b6ffa3 --- /dev/null +++ b/client/salix/src/styles/effects.scss @@ -0,0 +1,20 @@ + +@import "./colors"; + +%clickable { + cursor: pointer; + transition: background-color 250ms ease-out; + + &:hover { + background-color: $hover; + } +} + +%clickable-light { + cursor: pointer; + transition: opacity 250ms ease-out; + + &:hover { + opacity: $hover-opacity; + } +} \ No newline at end of file diff --git a/client/salix/src/styles/font-style.scss b/client/salix/src/styles/font-style.scss index a33df7a6a..462023eca 100644 --- a/client/salix/src/styles/font-style.scss +++ b/client/salix/src/styles/font-style.scss @@ -1,7 +1,6 @@ @import "colors"; @import "font-family"; - body { color: $main-font-color; font-family: vn-font; diff --git a/client/salix/src/styles/index.js b/client/salix/src/styles/index.js index 31ef9c863..eaa0463b8 100644 --- a/client/salix/src/styles/index.js +++ b/client/salix/src/styles/index.js @@ -9,3 +9,4 @@ import './font-style.scss'; import './misc.scss'; import './summary.scss'; import './colors.scss'; +import './effects.scss'; diff --git a/client/salix/src/styles/misc.scss b/client/salix/src/styles/misc.scss index 2f23a655b..7c815b1a3 100644 --- a/client/salix/src/styles/misc.scss +++ b/client/salix/src/styles/misc.scss @@ -1,7 +1,8 @@ -@import "padding"; -@import "margin"; -@import "colors"; -@import "border"; +@import "./padding"; +@import "./margin"; +@import "./colors"; +@import "./border"; +@import "./effects"; a:focus, @@ -116,17 +117,8 @@ a { } } -.vn-clickable { - cursor: pointer; - transition: background-color 250ms ease-out; - - &:hover { - background-color: $hover; - } -} - button { - @extend .vn-clickable; + @extend %clickable; } vn-button-bar { @@ -168,7 +160,7 @@ vn-main-block { font-size: 2.5em; } & > a { - @extend .vn-clickable; + @extend %clickable; display: flex; align-items: center; @@ -205,7 +197,7 @@ vn-main-block { .vn-list-item { @extend .pad-medium; @extend .border-solid-bottom; - @extend .vn-clickable; + @extend %clickable; display: block; text-decoration: none;