diff --git a/matsen-tool/src/app/_components/layout/two-column/two-column.component.html b/matsen-tool/src/app/_components/layout/two-column/two-column.component.html index b860e1d..cae6b27 100644 --- a/matsen-tool/src/app/_components/layout/two-column/two-column.component.html +++ b/matsen-tool/src/app/_components/layout/two-column/two-column.component.html @@ -1,74 +1,74 @@
-
+
-
+
- +
{{'basic.back' | translate}}
diff --git a/matsen-tool/src/app/_components/layout/two-column/two-column.component.scss b/matsen-tool/src/app/_components/layout/two-column/two-column.component.scss index 05ad81b..e69de29 100644 --- a/matsen-tool/src/app/_components/layout/two-column/two-column.component.scss +++ b/matsen-tool/src/app/_components/layout/two-column/two-column.component.scss @@ -1,31 +0,0 @@ -.card { - width: 100%; - text-decoration: none; -} -.card-body { - min-height: 50px; - text-transform: uppercase; - text-align: right; - &.bi { - &:before { - display: none; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%,-50%); - font-size: 50px; - } - } - .active & { - min-height: 100px; - &.bi { - &:before { - display: block; - } - } - } - h3 { - right: 10px; - bottom: 10px; - } -} \ No newline at end of file diff --git a/matsen-tool/src/app/_components/paging/paging.component.html b/matsen-tool/src/app/_components/paging/paging.component.html index 34c9148..b160f0b 100644 --- a/matsen-tool/src/app/_components/paging/paging.component.html +++ b/matsen-tool/src/app/_components/paging/paging.component.html @@ -1,4 +1,4 @@ - -
- +
+ +
-
-
-
-
-
-

{{ contact.firstName }} {{ contact.lastName }}

-

{{ contact.email }}
- {{ contact.phone }}
- {{ contact.position }}

-
-
- {{contact.firstName}} {{contact.lastName}} +
+
+
+
+
+
+ {{contact.firstName}} {{contact.lastName}} +
+
+

{{ contact.firstName }} {{ contact.lastName }}

+

{{ contact.email }}
+ {{ contact.phone }}
+ {{ contact.position }}

+
-
-
- {{ 'basic.details' | translate }} + {{ 'basic.details' | translate }}
diff --git a/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html b/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html index 0573e48..4ea08c0 100644 --- a/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html +++ b/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html @@ -1,33 +1,35 @@
-
-

{{ contact.firstName }} {{ contact.lastName }}

-
-
{{'form.position' | translate}}:
-
{{ contact.position }}
-
{{'form.phone' | translate}}:
-
{{ contact.phone }}
-
{{'form.email' | translate}}:
-
{{ contact.email }}
-
{{'form.birthday' | translate}}:
-
{{ contact.birthday | date:'dd.MM.YYYY' }}
-
+
+
+
+

{{ contact.firstName }} {{ contact.lastName }}

+
+
{{'form.position' | translate}}:
+
{{ contact.position }}
+
{{'form.phone' | translate}}:
+
{{ contact.phone }}
+
{{'form.email' | translate}}:
+
{{ contact.email }}
+
{{'form.birthday' | translate}}:
+
{{ contact.birthday | date:'dd.MM.YYYY' }}
+
+
+
+ +
+
-
+
{{contact.firstName}} {{contact.lastName}}
-
-
- -
-
diff --git a/matsen-tool/src/app/_views/documents/document-list/document-list.component.html b/matsen-tool/src/app/_views/documents/document-list/document-list.component.html index 7250a88..0f12733 100644 --- a/matsen-tool/src/app/_views/documents/document-list/document-list.component.html +++ b/matsen-tool/src/app/_views/documents/document-list/document-list.component.html @@ -1,11 +1,13 @@
- +
+ +
+ class="mat-elevation-z8">
diff --git a/matsen-tool/src/app/_views/home/home.component.html b/matsen-tool/src/app/_views/home/home.component.html index cebb7e7..13e4d31 100644 --- a/matsen-tool/src/app/_views/home/home.component.html +++ b/matsen-tool/src/app/_views/home/home.component.html @@ -11,21 +11,21 @@
-
+

{{ 'basic.customer' | translate }}
-
+

{{ 'basic.supplier' | translate }}
-
+

{{ 'basic.service' | translate }}

 @@ -37,21 +37,21 @@
-
+

{{ 'basic.products' | translate }}
-
+

{{ 'basic.tasks' | translate }}
-
+

{{ 'basic.documents' | translate }}

 diff --git a/matsen-tool/src/app/_views/home/home.component.scss b/matsen-tool/src/app/_views/home/home.component.scss index 62102a5..5ad2ff6 100644 --- a/matsen-tool/src/app/_views/home/home.component.scss +++ b/matsen-tool/src/app/_views/home/home.component.scss @@ -7,22 +7,87 @@ .card { width: 100%; text-decoration: none; + border-radius: 0; + border: none; + border-top: 3px solid #c1c1c1; } .card-body { min-height: 200px; text-transform: uppercase; text-align: right; - &.bi { - &:before { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%,-50%); - font-size: 50px; - } + &:after { + content: ">"; + position: absolute; + right: 0; + bottom: 0; + background: rgba(229,38,30,1); + width: 40px; + height: 40px; + color: #fff; + font-family: Helvetica; + font-size: 20px; + line-height: 40px; + text-align: center; } + &:before { + content: ""; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + width: 95px; + height: 95px; + border: 2px solid #2b3b44; + border-radius: 50%; + } + &[data-cat="customer"]:before { + background: transparent url("/assets/images/icons/customer.svg") no-repeat center center; + background-size: 50% auto; + } + &[data-cat="supplier"]:before { + background: transparent url("/assets/images/icons/supplier.svg") no-repeat center center; + background-size: 50% auto; + } + &[data-cat="service"]:before { + background: transparent url("/assets/images/icons/service.svg") no-repeat center center; + background-size: 50% auto; + } + &[data-cat="product"]:before { + background: transparent url("/assets/images/icons/product.svg") no-repeat center center; + background-size: 50% auto; + } + &[data-cat="task"]:before { + background: transparent url("/assets/images/icons/task.svg") no-repeat center center; + background-size: 50% auto; + } + &[data-cat="document"]:before { + background: transparent url("/assets/images/icons/document.svg") no-repeat center center; + background-size: 50% auto; + } + &[data-cat="sale"]:before { + background: transparent url("/assets/images/icons/sale.svg") no-repeat center center; + background-size: 50% auto; + } + &[data-cat="profile"]:before { + background: transparent url("/assets/images/icons/profile.svg") no-repeat center center; + background-size: 50% auto; + } + &[data-cat="user"]:before { + background: transparent url("/assets/images/icons/user.svg") no-repeat center center; + background-size: 50% auto; + } + + //&.bi { + // &:before { + // position: absolute; + // left: 50%; + // top: 50%; + // transform: translate(-50%,-50%); + // font-size: 50px; + // } + //} h3 { - right: 10px; + left: 30px; bottom: 10px; } } diff --git a/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html b/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html index 77e4028..b7ac32f 100644 --- a/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html +++ b/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html @@ -1,12 +1,12 @@
- +
+ +
- +
diff --git a/matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html b/matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html index 76efd40..d820f74 100644 --- a/matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html +++ b/matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html @@ -1,31 +1,40 @@
-
-

{{ partner.name }}

-

{{ partner.street }} {{ partner.streetNo }}
- {{ partner.zip }} {{ partner.city }}
- {{ partner.country }}

-

Sprache: Deutsch

+
+
+
+

{{ partner.name }}

+

{{ partner.street }} {{ partner.streetNo }}
+ {{ partner.zip }} {{ partner.city }}
+ {{ partner.country }}

+

Sprache: Deutsch

+
+
+

10002

+
+
Telefon:
+
0177 289 23 02
+
Website:
+
{{ partner.website }}
+
Streckenpunkt:
+
AT-Salzburg
+
Geschäftsbuchungsgruppe:
+
DE-EU
+
MwSt.-Geschäftsbuchungsgruppe:
+
DE-DE
+
Kreditlimit:
+
50.000 €
+
+
+
+
+
+

+
+
-
-

10002

-
-
Telefon:
-
0177 289 23 02
-
Website:
-
{{ partner.website }}
-
Streckenpunkt:
-
AT-Salzburg
-
Geschäftsbuchungsgruppe:
-
DE-EU
-
MwSt.-Geschäftsbuchungsgruppe:
-
DE-DE
-
Kreditlimit:
-
50.000 €
-
-
-
+
{{partner.name}} @@ -40,11 +49,6 @@
-
-
-

-
-
diff --git a/matsen-tool/src/app/_views/partners/partners.component.html b/matsen-tool/src/app/_views/partners/partners.component.html index 39bbc45..3badb39 100644 --- a/matsen-tool/src/app/_views/partners/partners.component.html +++ b/matsen-tool/src/app/_views/partners/partners.component.html @@ -1,6 +1,6 @@
-

{{ headline }}

+

{{ headline }}

-
- +
+
+ +
-
- +
+
+ class="mat-elevation-z8"> + +
diff --git a/matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html b/matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html index 59b20e7..5781256 100644 --- a/matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html +++ b/matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html @@ -1,91 +1,95 @@ - - - +
+
+ +
+ +
- - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - -
- {{ 'overview.number' | translate }} - {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }} - + {{ 'overview.number' | translate }} + {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }} + - {{ 'overview.sale-user' | translate }} - - {{ element.ownerName }} - + {{ 'overview.sale-user' | translate }} + + {{ element.ownerName }} + - {{ 'overview.sale-partner' | translate }} - - {{ element.partnerName }} - + {{ 'overview.sale-partner' | translate }} + + {{ element.partnerName }} + - {{ 'overview.productname' | translate }} - - {{ element.productName }} - + {{ 'overview.productname' | translate }} + + {{ element.productName }} + - {{ 'overview.turnover' | translate }} - - {{ element.turnover | currency: 'EUR' }} - + {{ 'overview.turnover' | translate }} + + {{ element.turnover | currency: 'EUR' }} + - {{ 'overview.profit' | translate }} - - {{ element.profit | currency: 'EUR' }} - + {{ 'overview.profit' | translate }} + + {{ element.profit | currency: 'EUR' }} + - {{ 'overview.createdAt' | translate }} - - {{ element.createdAt | date:'dd.MM.YYYY HH:mm' }} - + {{ 'overview.createdAt' | translate }} + + {{ element.createdAt | date:'dd.MM.YYYY HH:mm' }} + - {{ 'overview.details' | translate }} - - - + {{ 'overview.details' | translate }} + + +
- \ No newline at end of file +
+ +
diff --git a/matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html b/matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html index a63cce4..002966d 100644 --- a/matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html +++ b/matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html @@ -25,8 +25,10 @@
-
- +
+
+ +
- +
+ +
- +
diff --git a/matsen-tool/src/assets/fonts/material-icons-v142-latin-regular.woff2 b/matsen-tool/src/assets/fonts/material-icons-v142-latin-regular.woff2 new file mode 100644 index 0000000..5492a6e Binary files /dev/null and b/matsen-tool/src/assets/fonts/material-icons-v142-latin-regular.woff2 differ diff --git a/matsen-tool/src/assets/fonts/montserrat-v26-latin-600.woff2 b/matsen-tool/src/assets/fonts/montserrat-v26-latin-600.woff2 new file mode 100644 index 0000000..a0bfc7b Binary files /dev/null and b/matsen-tool/src/assets/fonts/montserrat-v26-latin-600.woff2 differ diff --git a/matsen-tool/src/assets/fonts/montserrat-v26-latin-600italic.woff2 b/matsen-tool/src/assets/fonts/montserrat-v26-latin-600italic.woff2 new file mode 100644 index 0000000..40f6d9a Binary files /dev/null and b/matsen-tool/src/assets/fonts/montserrat-v26-latin-600italic.woff2 differ diff --git a/matsen-tool/src/assets/fonts/montserrat-v26-latin-800.woff2 b/matsen-tool/src/assets/fonts/montserrat-v26-latin-800.woff2 new file mode 100644 index 0000000..d69d4a1 Binary files /dev/null and b/matsen-tool/src/assets/fonts/montserrat-v26-latin-800.woff2 differ diff --git a/matsen-tool/src/assets/fonts/montserrat-v26-latin-800italic.woff2 b/matsen-tool/src/assets/fonts/montserrat-v26-latin-800italic.woff2 new file mode 100644 index 0000000..527a0fe Binary files /dev/null and b/matsen-tool/src/assets/fonts/montserrat-v26-latin-800italic.woff2 differ diff --git a/matsen-tool/src/assets/fonts/montserrat-v26-latin-italic.woff2 b/matsen-tool/src/assets/fonts/montserrat-v26-latin-italic.woff2 new file mode 100644 index 0000000..17a8120 Binary files /dev/null and b/matsen-tool/src/assets/fonts/montserrat-v26-latin-italic.woff2 differ diff --git a/matsen-tool/src/assets/fonts/montserrat-v26-latin-regular.woff2 b/matsen-tool/src/assets/fonts/montserrat-v26-latin-regular.woff2 new file mode 100644 index 0000000..f4b26df Binary files /dev/null and b/matsen-tool/src/assets/fonts/montserrat-v26-latin-regular.woff2 differ diff --git a/matsen-tool/src/assets/images/icons/customer.svg b/matsen-tool/src/assets/images/icons/customer.svg new file mode 100644 index 0000000..e06238b --- /dev/null +++ b/matsen-tool/src/assets/images/icons/customer.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/matsen-tool/src/assets/images/icons/document.svg b/matsen-tool/src/assets/images/icons/document.svg new file mode 100644 index 0000000..0ead5c6 --- /dev/null +++ b/matsen-tool/src/assets/images/icons/document.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/matsen-tool/src/assets/images/icons/product.svg b/matsen-tool/src/assets/images/icons/product.svg new file mode 100644 index 0000000..5861c29 --- /dev/null +++ b/matsen-tool/src/assets/images/icons/product.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/matsen-tool/src/assets/images/icons/profile.svg b/matsen-tool/src/assets/images/icons/profile.svg new file mode 100644 index 0000000..01790b5 --- /dev/null +++ b/matsen-tool/src/assets/images/icons/profile.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/matsen-tool/src/assets/images/icons/sale.svg b/matsen-tool/src/assets/images/icons/sale.svg new file mode 100644 index 0000000..e0f5c6f --- /dev/null +++ b/matsen-tool/src/assets/images/icons/sale.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/matsen-tool/src/assets/images/icons/service.svg b/matsen-tool/src/assets/images/icons/service.svg new file mode 100644 index 0000000..63bc8d8 --- /dev/null +++ b/matsen-tool/src/assets/images/icons/service.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/matsen-tool/src/assets/images/icons/supplier.svg b/matsen-tool/src/assets/images/icons/supplier.svg new file mode 100644 index 0000000..da992d8 --- /dev/null +++ b/matsen-tool/src/assets/images/icons/supplier.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/matsen-tool/src/assets/images/icons/task.svg b/matsen-tool/src/assets/images/icons/task.svg new file mode 100644 index 0000000..1ffa2df --- /dev/null +++ b/matsen-tool/src/assets/images/icons/task.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/matsen-tool/src/assets/images/icons/user.svg b/matsen-tool/src/assets/images/icons/user.svg new file mode 100644 index 0000000..9c68ff0 --- /dev/null +++ b/matsen-tool/src/assets/images/icons/user.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/matsen-tool/src/assets/scss/_basics.scss b/matsen-tool/src/assets/scss/_basics.scss index aa3b63d..b29ae02 100644 --- a/matsen-tool/src/assets/scss/_basics.scss +++ b/matsen-tool/src/assets/scss/_basics.scss @@ -1,20 +1,81 @@ +/* montserrat-regular - latin */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + src: url('../fonts/montserrat-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +/* montserrat-italic - latin */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Montserrat'; + font-style: italic; + font-weight: 400; + src: url('../fonts/montserrat-v26-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +/* montserrat-600 - latin */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Montserrat'; + font-style: normal; + font-weight: 600; + src: url('../fonts/montserrat-v26-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +/* montserrat-600italic - latin */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Montserrat'; + font-style: italic; + font-weight: 600; + src: url('../fonts/montserrat-v26-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +/* montserrat-800 - latin */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Montserrat'; + font-style: normal; + font-weight: 800; + src: url('../fonts/montserrat-v26-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +/* montserrat-800italic - latin */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Montserrat'; + font-style: italic; + font-weight: 800; + src: url('../fonts/montserrat-v26-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + +/* material-icons-regular - latin */ +@font-face { + font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: url('../fonts/material-icons-v142-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ +} + html, body { height: 100%; } body { margin: 0; - font-family: Roboto, "Helvetica Neue", sans-serif; -} - -body { - background: #d2d2d2; + font-family: "Montserrat", "Helvetica Neue", sans-serif; + background: #2b3a44; } .app-container { - min-height: 320px; + border-top: 5px solid #c1c1c1; + min-height: 500px; overflow: hidden; - background: #d2d2d2; + color: #fff; } img { @@ -29,14 +90,167 @@ img { } .spt-sidebar { - background: #b2b2b2; + //background: #2b3a44; + padding: 0; + .card { + background: transparent; + color: #fff; + border: none; + border-bottom: 1px solid #fff; + border-radius: 0; + width: 100%; + text-decoration: none; + .card-body { + min-height: 50px; + text-transform: uppercase; + text-align: right; + + h3 { + right: 10px; + bottom: 10px; + } + } + &.active { + .card-body { + min-height: 100px; + position: relative; + &:before { + content: ""; + position: absolute; + left: 20px; + top: 50%; + transform: translate(0,-50%); + width: 65px; + height: 100%; + filter: brightness(600%); + border-right: 1px solid #fff; + } + &[data-cat="customer"]:before { + background: transparent url("/assets/images/icons/customer.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="supplier"]:before { + background: transparent url("/assets/images/icons/supplier.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="service"]:before { + background: transparent url("/assets/images/icons/service.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="product"]:before { + background: transparent url("/assets/images/icons/product.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="task"]:before { + background: transparent url("/assets/images/icons/task.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="document"]:before { + background: transparent url("/assets/images/icons/document.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="sale"]:before { + background: transparent url("/assets/images/icons/sale.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="profile"]:before { + background: transparent url("/assets/images/icons/profile.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="user"]:before { + background: transparent url("/assets/images/icons/user.svg") no-repeat left center; + background-size: 45px auto; + } + h3 { + bottom: 50%; + transform: translate(0,50%); + } + } + } + } + .nav { + li { + margin: 0 !important; + } + } +} + +.spt-main { + background: #fff; + color: rgba(33,37,41); } .spt-container { + position: relative; min-height: 1px; margin-bottom: 3rem; + .top-btn { + display: flex; + justify-content: flex-end; + } + .card:not(.contacts .card) { + border: none; + border-radius: 0; + border-top: 1px solid #2B3A44; + border-bottom: 1px solid #2B3A44; + .card-body { + padding: 5px 0; + .spt-col { + padding-top: 20px; + } + .has-image { + border-left: 1px solid #c1c1c1; + align-content: center; + } + img { + margin: 0 auto; + max-width: 80%; + } + } + .mat-h1, + .mat-headline-5, + .mat-h2, + .mat-headline-6, + .mat-typography & { + .mat-h1, + .mat-headline-5, + h1, + .mat-h2, + .mat-headline-6, + h2 { + text-transform: none; + font-weight: 600; + } + } + } } +.contacts { + .row:not(.card .row) { + border-top: 1px solid #2B3A44; + padding-bottom: 20px; + } + .card { + border: none; + border-radius: 0; + background: #f2f2f2; + border-top: 2px solid #c1c1c1; + margin-top: 20px; + } + .spt-contact-box { + position: relative; + .badge { + position: absolute; + right: 12px; + bottom: 0; + } + } + img { + object-fit: cover; + height: 120px; + width: 100%; + } +} .importance { display: block; @@ -60,23 +274,39 @@ img { } } -.contacts { - img { - object-fit: cover; - height: 120px; - width: 100%; +.toggle-component { + .top-btn { + position: absolute; + //right: 0; + //top: -63px; + right: 10px; + top: -53px; + margin: 0; + .btn { + //padding-top: 17px; + //padding-bottom: 17px; + } + } + app-paging > .mat-mdc-paginator:first-child { + border: none; + } + .mat-mdc-cell { + background: #fafafa; } } .toggle { - background: $color-matsen; - color: #fff; - padding: 3px 10px 3px 40px; - border-radius: 6px; - margin-bottom: 1rem; + background: #dee2e3; + color: #2a3a43; + padding: 14px 10px 14px 83px; + margin-bottom: 3px; position: relative; cursor: pointer; + h2 { + text-transform: uppercase; + } + * { margin: 0 !important; } @@ -85,21 +315,21 @@ img { &:after { content: ""; position: absolute; - top: 17px; + top: 28px; width: 15px; - height: 2px; - background: #fff; + height: 4px; + background: #2a3a43; @include transition(); } &:before { transform: rotate(45deg); - left: 10px; + left: 26px; } &:after { transform: rotate(-45deg); - left: 20px; + left: 34px; } &.collapsed { @@ -113,12 +343,6 @@ img { } } -.toggle-btn { - position: absolute; - right: 0; - top: -3.38rem; -} - //.spt-toggle { // position: relative; // padding-left: 30px; @@ -161,4 +385,3 @@ img { // } // } //} - diff --git a/matsen-tool/src/assets/scss/_button.scss b/matsen-tool/src/assets/scss/_button.scss index b0874cd..fc2c512 100644 --- a/matsen-tool/src/assets/scss/_button.scss +++ b/matsen-tool/src/assets/scss/_button.scss @@ -1,3 +1,18 @@ +.btn { + border-radius: 0; + white-space: nowrap; + @include transition(); +} + +.btn-primary { + background-color: $color-matsen; + border-color: $color-matsen; + &:hover { + background-color: #b71e18; + border-color: #b71e18; + } +} + .btn-delete-user { width: 40px; text-align: center; @@ -33,14 +48,28 @@ right: 0; top: 0; width: auto; + background: $color-matsen; + color: #fff; + &:before { + @include transition(); + } &:hover:before { content: "\f415"; + color: #fff; } &.user-follows { &:hover:before { content: "\f417"; + color: #fff; } } } + +.badge { + border-radius: 0; + background: #2b3b44 !important; + font-weight: 400; + text-transform: uppercase; +} \ No newline at end of file diff --git a/matsen-tool/src/assets/scss/_table.scss b/matsen-tool/src/assets/scss/_table.scss index 969855d..4158c03 100644 --- a/matsen-tool/src/assets/scss/_table.scss +++ b/matsen-tool/src/assets/scss/_table.scss @@ -17,3 +17,49 @@ th.mat-sort-header-sorted { padding-bottom: 8px; } } + +.mat-elevation-z8, +.mat-mdc-elevation-specific.mat-elevation-z8 { + box-shadow: none; + th { + background: #f2f2f2 !important; + border-top: 1px solid #304049; + font-weight: 600; + } +} + +.mat-mdc-paginator { + border-top: 1px solid #2b3a44; + .mat-mdc-paginator-container { + display: flex; + justify-content: space-between; + } + .mat-mdc-paginator-page-size-label, + .mat-mdc-paginator-range-label { + color: #C1C1C1; + } + .mat-mdc-text-field-wrapper { + border-radius: 0; + } + .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading, + .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch, + .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing { + border: none; + } + .mat-mdc-header-cell { + border: none; + } + .mat-mdc-cell { + border-bottom: 1px solid #c1c1c1; + } + tbody { + tr:first-child { + td { + + } + } + } +} +app-paging > .mat-mdc-paginator:first-child { + border-width: 4px; +} diff --git a/matsen-tool/src/assets/scss/_text.scss b/matsen-tool/src/assets/scss/_text.scss new file mode 100644 index 0000000..3c09a58 --- /dev/null +++ b/matsen-tool/src/assets/scss/_text.scss @@ -0,0 +1,88 @@ +.mat-h1, +.mat-headline-5, +.mat-typography .mat-h1, +.mat-typography .mat-headline-5, +.mat-typography h1, +.mat-h2, +.mat-headline-6, +.mat-typography .mat-h2, +.mat-typography .mat-headline-6, +.mat-typography h2, +.mat-h3, +.mat-subtitle-1, +.mat-typography .mat-h3, +.mat-typography .mat-subtitle-1, +.mat-typography h3, +.mat-h4, +.mat-body-1, +.mat-typography .mat-h4, +.mat-typography .mat-body-1, +.mat-typography h4, +.mat-h5, +.mat-typography .mat-h5, +.mat-typography h5, +.mat-h6, +.mat-typography .mat-h6, +.mat-typography h6 { + font-family: "Montserrat", "Helvetica Neue", sans-serif !important; + font-weight: 600; +} +.mat-body, +.mat-body-2, +.mat-typography .mat-body, +.mat-typography .mat-body-2, +.mat-typography, +.mat-mdc-header-row, +.mat-mdc-row, +.mdc-data-table__content, +.mat-mdc-paginator, +.mat-mdc-select, +.mat-mdc-option { + font-family: "Montserrat", "Helvetica Neue", sans-serif !important; +} + +.home-container .mat-h1, +.home-container .mat-headline-5, +.home-container .mat-typography .mat-h1, +.mat-typography .home-container .mat-headline-5, +.mat-typography .home-container h1 { + text-transform: uppercase; + font-weight: 800; +} + +h2.spt-headline { + text-transform: uppercase; + font-weight: 800; +} + +.spt-back-btn { + position: relative; + font-size: 14px; + line-height: 18px; + cursor: pointer; + display: inline-block; + &:before { + content: "< "; + } + &:hover { + text-decoration: underline; + } +} + +dt { + font-weight: 600; +} + +table, +p, +ul, +ol, +dl { + a { + color: $color-matsen; + @include transition(); + &:hover { + color: #b71e18; + } + } +} \ No newline at end of file diff --git a/matsen-tool/src/index.html b/matsen-tool/src/index.html index 248bb1c..f95cd05 100644 --- a/matsen-tool/src/index.html +++ b/matsen-tool/src/index.html @@ -6,10 +6,8 @@ - - - + diff --git a/matsen-tool/src/styles.scss b/matsen-tool/src/styles.scss index 6ff1372..39a5ea4 100644 --- a/matsen-tool/src/styles.scss +++ b/matsen-tool/src/styles.scss @@ -6,6 +6,7 @@ @import "assets/scss/modal"; @import "assets/scss/form"; @import "assets/scss/table"; +@import "assets/scss/text"; @import "assets/scss/sales"; @import "assets/scss/button"; @import "assets/scss/accordion";