diff --git a/front/salix/styles/border.scss b/front/salix/styles/border.scss index 142dc6c3e..ba97afb73 100644 --- a/front/salix/styles/border.scss +++ b/front/salix/styles/border.scss @@ -1,43 +1,19 @@ @import "./variables"; -html [border-none], .border-none { - border: 0; -} - -/* Solid border */ - html [border-solid], .border-solid { - border: $border-thin solid $border-color; + border: $border-thin-light; } html [border-solid-top], .border-solid-top { - border-top: $border-thin solid $border-color; + border-top: $border-thin-light; } html [border-solid-left], .border-solid-left { - border-left: $border-thin solid $border-color; + border-left: $border-thin-light; } html [border-solid-right], .border-solid-right { - border-right: $border-thin solid $border-color; + border-right: $border-thin-light; } html [border-solid-bottom], .border-solid-bottom { - border-bottom: $border-thin solid $border-color; -} - -/* Dashed border */ - -html [border-dashed], .border-dashed { - border: $border-thin dashed $border-color; -} -html [border-dashed-top], .border-dashed-top { - border-top: $border-thin dashed $border-color; -} -html [border-dashed-left], .border-dashed-left { - border-left: $border-thin dashed $border-color; -} -html [border-dashed-right], .border-dashed-right { - border-right: $border-thin dashed $border-color; -} -html [border-dashed-bottom], .border-dashed-bottom { - border-bottom: $border-thin dashed $border-color; + border-bottom: $border-thin-light; } /* Border Radius */ diff --git a/front/salix/styles/index.js b/front/salix/styles/index.js index 49c60a40a..806021463 100644 --- a/front/salix/styles/index.js +++ b/front/salix/styles/index.js @@ -12,4 +12,5 @@ import './effects.scss'; import './order-product.scss'; import './summary.scss'; import './descriptor.scss'; +import './list.scss'; import './modal-form.scss'; diff --git a/front/salix/styles/list.scss b/front/salix/styles/list.scss new file mode 100644 index 000000000..c483feca1 --- /dev/null +++ b/front/salix/styles/list.scss @@ -0,0 +1,46 @@ +@import "./effects"; + +.vn-list { + max-width: 36em; + margin: 0 auto; + + a.vn-list-item { + @extend %clickable; + } + .vn-list-item { + border-bottom: $border-thin-light; + display: block; + text-decoration: none; + color: inherit; + + & > vn-horizontal { + padding: $pad-medium; + + & > vn-one { + overflow: hidden; + } + & > .buttons { + align-items: center; + + vn-icon-button { + opacity: .4; + color: $color-main; + margin-left: .5em; + transition: opacity 250ms ease-out; + padding: 0; + font-size: 2em; + + &:hover { + opacity: 1; + } + } + } + } + } + vn-empty-rows { + display: block; + text-align: center; + padding: 1.5em; + box-sizing: border-box; + } +} \ No newline at end of file diff --git a/front/salix/styles/misc.scss b/front/salix/styles/misc.scss index d06269c86..c73cd6959 100644 --- a/front/salix/styles/misc.scss +++ b/front/salix/styles/misc.scss @@ -5,7 +5,6 @@ html, body { margin: 0; padding: 0; } - a:focus, input:focus, button:focus { @@ -23,8 +22,7 @@ input[type=reset]::-moz-focus-inner { -ms-user-select: none; user-select: none; } - -a, .link{ +a, .link { color: $color-font-link; text-decoration: none; } @@ -35,23 +33,20 @@ a, .link{ text-decoration: underline; } } - .totalBox { border: 1px solid #CCC; - text-align: right!important; + text-align: right !important; justify-content: center; align-items: center; padding: 18px; margin-bottom: 10px; } - .form { height: 100%; box-sizing: border-box; padding: $pad-large; max-width: 1000px; } - html [fixed-bottom-right] { position: fixed; bottom: 2em; @@ -60,87 +55,53 @@ html [fixed-bottom-right] { html [text-center], .text-center { text-align: center; } -html [text-right], .text-right{ +html [text-right], .text-right { text-align: right; } -html [text-left], .text-left{ +html [text-left], .text-left { text-align: left; } -html [vn-right], .vn-right{ +html [vn-right], .vn-right { float: right; } -html [vn-left], .vn-left{ +html [vn-left], .vn-left { float: left; } -html [vn-center], .vn-center{ +html [vn-center], .vn-center { justify-content: center; } - -.list > vn-none{ +.list > vn-none { min-width: 60px; } - -.list-element{ +.list-element { padding: 8px 0 0 0; border-bottom: 1px solid $color-spacer; + i { color: $color-main; } } -.tooltip { - .list-header{ - border-bottom: 3px solid $color-spacer; - font-family: vn-font-bold; - text-align: center - } - .list-element{ - white-space: nowrap; - } -} -.list-footer{ - font-family: vn-font-bold; - border-top: 3px solid $color-spacer; -} -.list-element.warning{ - background-color: $color-main-medium; -} -.list-element.success{ - background-color: $color-success-medium; - -} -.list-element.success:hover{ - background-color: $color-success-light; -} -.list-element.warning:hover{ - background-color: $color-main-light; -} .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday { background-color: $color-main; } - html [pointer], .pointer{ cursor: pointer; } - html [noDrop], .noDrop{ cursor: no-drop; } - html [compact], .compact{ - max-width: 950px; + max-width: $width-compact; margin-left: auto; margin-right: auto; } - button { @extend %clickable; } - vn-button-bar { display: block; margin-top: $margin-small; } - vn-tool-bar { display: flex; @@ -149,51 +110,6 @@ vn-tool-bar { } } -.vn-list { - max-width: 36em; - margin: 0 auto; - - a.vn-list-item { - @extend %clickable; - } - .vn-list-item { - border-bottom: $border-thin solid $color-spacer; - display: block; - text-decoration: none; - color: inherit; - - & > vn-horizontal { - padding: $pad-medium; - - & > vn-one { - overflow: hidden; - } - & > .buttons { - align-items: center; - - vn-icon-button { - opacity: .4; - color: $color-main; - margin-left: .5em; - transition: opacity 250ms ease-out; - padding: 0; - font-size: 2em; - - &:hover { - opacity: 1; - } - } - } - } - } - vn-empty-rows { - display: block; - text-align: center; - padding: 1.5em; - box-sizing: border-box; - } -} - /** START - FORM ELEMENTS DISABLED **/ fieldset[disabled] .mdl-textfield .mdl-textfield__input, @@ -215,7 +131,6 @@ fieldset[disabled] .mdl-textfield .mdl-textfield__label, white-space: nowrap; overflow: hidden; } - .counter { @extend %active; @@ -223,7 +138,6 @@ fieldset[disabled] .mdl-textfield .mdl-textfield__label, font-size: 0.7em } } - .vn-grid { border-collapse: collapse; width: 100%; diff --git a/front/salix/styles/order-product.scss b/front/salix/styles/order-product.scss index 255d4f610..00eee52e2 100644 --- a/front/salix/styles/order-product.scss +++ b/front/salix/styles/order-product.scss @@ -1,100 +1,96 @@ @import "./variables"; -@media screen and (max-width: 1920px){ - .catalog-list .product { - width: 25%; - } -} - -@media screen and (max-width: 1800px){ - .catalog-list .product { - width: 33.33% - } -} - -@media screen and (max-width: 1600px){ - .catalog-list .product { - width: 50% - } -} - -@media screen and (max-width: 1280px){ - .catalog-list .product { - width: 100% - } -} - .catalog-list { justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; - .product { + & > .product { box-sizing: border-box; - padding: 4px; + padding: $pad-small; + width: 33.33%; - & > vn-one { - border: 1px solid rgba($color-spacer, 0.5); - display: block - } + & > div { + display: flex; + border: $border-thin; + height: 11em; - .image { - min-width: 10em; - max-width: 10em; - min-height: 10em; - max-height: 10em; + .image { + width: 11em; + height: 11em; - img { - width: 100%; - height: 100% - } - } - - .description { - box-sizing: border-box; - - & > vn-vertical { - height: 100%; - - & > h2 { - text-transform: uppercase; - font-family: vn-font; - margin: 0 0 0.5em 0; - font-weight: 100; - line-height: 1em; - font-size: 0.9em; + img { + width: 100%; + height: 100% } + } + .description { + flex: 1; + display: flex; + flex-direction: column; + box-sizing: border-box; + height: 100%; + width: 100%; + overflow: hidden; + padding: $pad-small; - & > span { + & > h3 { + font-family: vn-font; + margin: 0; + margin-bottom: .4em; + font-weight: normal; + line-height: initial; + font-size: 1.2em; + max-height:2.2em; + overflow: hidden; + } + & > h4 { color: $color-font-secondary; text-transform: uppercase; - margin-bottom: 0.5em; - font-weight: bold; - font-size: 0.8em + margin-bottom: .4em; + line-height: initial; + font-size: 1em; + flex: 1; } - - & > vn-label-value { - font-size: 0.8em + & > .tags { + padding-bottom: .4em; + height: 3em; + + & > vn-label-value { + font-size: .8em + } + } + } + .footer { + display: flex; + align-items: center; + justify-content: space-between; + font-size: .8em; + + & > .price { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + & > span { + flex: 1; + + &:first-child, + &:last-child { + font-size: 1.4em + } + } + } + & > vn-icon-button { + padding: 0; } } } - - .price { - align-items: center; - margin-top: auto; - font-size: 0.8em; - - & > vn-one span:first-child { - color: $color-font-secondary - } - - & > vn-one span:first-child, & > vn-one span:last-child { - font-size: 1.2em - } - - vn-icon[icon="add_circle"] { - color: $color-main - } + @media screen and (max-width: 1600px) { + width: 50%; + } + @media screen and (max-width: 1280px) { + width: 100%; } } } diff --git a/front/salix/styles/variables.scss b/front/salix/styles/variables.scss index 36a1a14db..ea496f4f4 100644 --- a/front/salix/styles/variables.scss +++ b/front/salix/styles/variables.scss @@ -3,6 +3,12 @@ $menu-width: 16em; $topbar-height: 4em; $mobile-width: 800px; +// Width + +$width-small: 36em; +$width-compact: 60em; +$width-large: 80em; + // Padding $pad-none: 0; @@ -17,12 +23,6 @@ $margin-small: 8px; $margin-medium: 16px; $margin-large: 32px; -// Border - -$border-color: #AAA; -$border-thin: .1em; -$border-thick: .15em; - // Light theme $color-header: #3d3d3d; @@ -96,4 +96,9 @@ $color-notice-medium: darken($color-notice, 20%); $color-notice-light: darken($color-notice, 35%); $color-alert-medium: darken($color-alert, 20%); $color-alert-light: darken($color-alert, 35%); -/**/ \ No newline at end of file +/**/ + +// Border + +$border-thin: .1em solid $color-spacer; +$border-thin-light: .1em solid $color-spacer-light; diff --git a/modules/order/front/catalog/index.html b/modules/order/front/catalog/index.html index d088238df..036f93993 100644 --- a/modules/order/front/catalog/index.html +++ b/modules/order/front/catalog/index.html @@ -4,7 +4,7 @@ filter="$ctrl.filter" limit="50" data="items" - on-data-change="$ctrl.onDataChange()" > + on-data-change="$ctrl.onDataChange()">
@@ -38,56 +38,51 @@
- - - - - - - -

- {{::item.name}} -

- - {{::item.subName}} - - - - - - - - - - - - - - {{::item.available}} - from - {{::item.price | currency: 'EUR': 2}} - - - - - - - - - - - +
+
+ +
+
+

+ {{::item.name}} +

+

+ {{::item.subName}} +

+
+ + + + + + +
+
+
+ {{::item.available}} + from + {{::item.price | currency: 'EUR': 2}} +
+ + +
+
+
diff --git a/modules/order/front/catalog/style.scss b/modules/order/front/catalog/style.scss index e22e182bc..17172eca0 100644 --- a/modules/order/front/catalog/style.scss +++ b/modules/order/front/catalog/style.scss @@ -1,8 +1,7 @@ @import "variables"; vn-order-catalog .catalog-header { - border-color: $color-spacer; - border-bottom: 1px solid rgba($color-spacer, 0.5); + border-bottom: $border-thin; vn-one:first-child { padding-top: 2em; diff --git a/modules/order/front/filter/style.scss b/modules/order/front/filter/style.scss index fb561f78c..07a7b1dbd 100644 --- a/modules/order/front/filter/style.scss +++ b/modules/order/front/filter/style.scss @@ -6,7 +6,7 @@ vn-catalog-filter > div { padding-left: $pad-medium; padding-right: $pad-medium; border-color: $color-spacer; - border-bottom: 1px solid rgba($color-spacer, 0.5); + border-bottom: $border-thin; } .item-category { padding: $pad-small; diff --git a/modules/order/front/line/style.scss b/modules/order/front/line/style.scss index 6f06532e0..ceef14fa1 100644 --- a/modules/order/front/line/style.scss +++ b/modules/order/front/line/style.scss @@ -1,4 +1,6 @@ -vn-order-line{ +@import "./variables"; + +vn-order-line { vn-table { img { border-radius: 50%; @@ -8,7 +10,7 @@ vn-order-line{ } .taxes { max-width: 10em; - border: .1em solid #CCC; + border: $border-thin-light; text-align: right; padding: .5em !important; diff --git a/modules/order/front/summary/style.scss b/modules/order/front/summary/style.scss index 283214a2d..0a3e6df83 100644 --- a/modules/order/front/summary/style.scss +++ b/modules/order/front/summary/style.scss @@ -1,8 +1,10 @@ +@import "./variables"; + vn-order-summary .summary > div > vn-horizontal > vn-one { min-width: 10em !important; &.taxes { - border: .1em solid #CCC; + border: $border-thin-light; text-align: right; padding: .5em !important; diff --git a/modules/order/front/volume/style.scss b/modules/order/front/volume/style.scss index 2900023a1..baeabf383 100644 --- a/modules/order/front/volume/style.scss +++ b/modules/order/front/volume/style.scss @@ -1,6 +1,8 @@ +@import "./variables"; + .totalBox { - border: 1px solid #CCC; + border: $border-thin-light; text-align: left; align-self: flex-end; } diff --git a/modules/ticket/front/picture/index.html b/modules/ticket/front/picture/index.html index 23965fec5..6c8921485 100644 --- a/modules/ticket/front/picture/index.html +++ b/modules/ticket/front/picture/index.html @@ -8,64 +8,55 @@ auto-load="true"> - - - -
- - - - - - - -

- {{::sale.item.name}} -

- - {{::sale.item.subName}} - - - - - - - - - - - - - - {{::sale.quantity}} - by - {{::sale.price | currency: 'EUR': 2}} - - - - - - -
- - - - No results - - - + + +
+
+
+ +
+
+

+ + {{::sale.item.name}} + +

+

+ {{::sale.item.subName}} +

+
+ + + + + + +
+
+
+ {{::sale.quantity}} + by + {{::sale.price | currency: 'EUR': 2}} +
+
+
+
+
+ + + + No results + + diff --git a/modules/ticket/front/sale/style.scss b/modules/ticket/front/sale/style.scss index 91d793290..2831631ff 100644 --- a/modules/ticket/front/sale/style.scss +++ b/modules/ticket/front/sale/style.scss @@ -75,7 +75,7 @@ vn-ticket-sale { vn-button[label=Cancel]{ display: none; } - vn-card.vn-ticket-create{ + vn-card.vn-ticket-create { padding: 0!important; } } @@ -89,7 +89,7 @@ vn-ticket-sale { } .taxes { max-width: 10em; - border: .1em solid #CCC; + border: $border-thin-light; text-align: right; padding: .5em !important; diff --git a/modules/ticket/front/summary/style.scss b/modules/ticket/front/summary/style.scss index 571402188..4e94fb4a6 100644 --- a/modules/ticket/front/summary/style.scss +++ b/modules/ticket/front/summary/style.scss @@ -1,14 +1,20 @@ -vn-ticket-summary .summary > div > vn-horizontal > vn-one { - min-width: 10em !important; +@import "./variables"; - &.taxes { - border: .1em solid #CCC; - text-align: right; - padding: .5em !important; +vn-ticket-summary .summary { + max-width: $width-large; - & > p { - font-size: 1.2em; - margin: .2em; + & > div > vn-horizontal > vn-one { + min-width: 10em; + + &.taxes { + border: $border-thin-light; + text-align: right; + padding: .5em; + + & > p { + font-size: 1.2em; + margin: .2em; + } } } } \ No newline at end of file