From 69d2af13e0472809af8455902857f53adec9b3b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 23 Dec 2021 10:23:33 +0300 Subject: [PATCH] update css --- src/app/pages/app.timelinedemo.component.ts | 42 ++++++- src/app/pages/app.timelinedemo.scss | 40 ------ src/assets/demo/badges.scss | 91 ++++++++++++++ src/assets/demo/documentation.scss | 0 src/styles.scss | 132 +------------------- 5 files changed, 134 insertions(+), 171 deletions(-) delete mode 100644 src/app/pages/app.timelinedemo.scss create mode 100644 src/assets/demo/badges.scss create mode 100644 src/assets/demo/documentation.scss diff --git a/src/app/pages/app.timelinedemo.component.ts b/src/app/pages/app.timelinedemo.component.ts index 74d01ce..2fe35e3 100644 --- a/src/app/pages/app.timelinedemo.component.ts +++ b/src/app/pages/app.timelinedemo.component.ts @@ -3,7 +3,47 @@ import {PrimeIcons} from 'primeng/api'; @Component({ templateUrl: './app.timelinedemo.component.html', - styleUrls: ['./app.timelinedemo.scss'] + styles: [` + .custom-marker { + display: flex; + width: 2rem; + height: 2rem; + align-items: center; + justify-content: center; + color: #ffffff; + border-radius: 50%; + z-index: 1; + } + + ::ng-deep { + .p-timeline-event-content, + .p-timeline-event-opposite { + line-height: 1; + } + } + + @media screen and (max-width: 960px) { + ::ng-deep { + .customized-timeline { + .p-timeline-event:nth-child(even) { + flex-direction: row !important; + + .p-timeline-event-content { + text-align: left !important; + } + } + + .p-timeline-event-opposite { + flex: 0; + } + + .p-card { + margin-top: 1rem; + } + } + } + } + `] }) export class AppTimelineDemoComponent implements OnInit{ diff --git a/src/app/pages/app.timelinedemo.scss b/src/app/pages/app.timelinedemo.scss deleted file mode 100644 index 84d657f..0000000 --- a/src/app/pages/app.timelinedemo.scss +++ /dev/null @@ -1,40 +0,0 @@ -//timeline -.custom-marker { - display: flex; - width: 2rem; - height: 2rem; - align-items: center; - justify-content: center; - color: #ffffff; - border-radius: 50%; - z-index: 1; -} - -::ng-deep { - .p-timeline-event-content, - .p-timeline-event-opposite { - line-height: 1; - } -} - -@media screen and (max-width: 960px) { - ::ng-deep { - .customized-timeline { - .p-timeline-event:nth-child(even) { - flex-direction: row !important; - - .p-timeline-event-content { - text-align: left !important; - } - } - - .p-timeline-event-opposite { - flex: 0; - } - - .p-card { - margin-top: 1rem; - } - } - } -} diff --git a/src/assets/demo/badges.scss b/src/assets/demo/badges.scss new file mode 100644 index 0000000..86718c7 --- /dev/null +++ b/src/assets/demo/badges.scss @@ -0,0 +1,91 @@ +.product-badge { + border-radius: var(--border-radius); + padding: .25em .5rem; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + letter-spacing: .3px; + + &.status-instock { + background: #C8E6C9; + color: #256029; + } + + &.status-outofstock { + background: #FFCDD2; + color: #C63737; + } + + &.status-lowstock { + background: #FEEDAF; + color: #8A5340; + } +} + +.customer-badge { + border-radius: var(--border-radius); + padding: .25em .5rem; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + letter-spacing: .3px; + + &.status-qualified { + background: #C8E6C9; + color: #256029; + } + + &.status-unqualified { + background: #FFCDD2; + color: #C63737; + } + + &.status-negotiation { + background: #FEEDAF; + color: #8A5340; + } + + &.status-new { + background: #B3E5FC; + color: #23547B; + } + + &.status-renewal { + background: #ECCFFF; + color: #694382; + } + + &.status-proposal { + background: #FFD8B2; + color: #805B36; + } +} + +.order-badge { + border-radius: var(--border-radius); + padding: .25em .5rem; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + letter-spacing: .3px; + + &.order-delivered { + background: #C8E6C9; + color: #256029; + } + + &.order-cancelled { + background: #FFCDD2; + color: #C63737; + } + + &.order-pending { + background: #FEEDAF; + color: #8A5340; + } + + &.order-returned { + background: #ECCFFF; + color: #694382; + } +} diff --git a/src/assets/demo/documentation.scss b/src/assets/demo/documentation.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/styles.scss b/src/styles.scss index 5f65713..fd615c5 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -7,99 +7,7 @@ @import "../node_modules/@fullcalendar/daygrid/main.min.css"; @import "../node_modules/@fullcalendar/timegrid/main.min.css"; @import "assets/demo/flags/flags.css"; - -.product-badge { - border-radius: var(--border-radius); - padding: .25em .5rem; - text-transform: uppercase; - font-weight: 700; - font-size: 12px; - letter-spacing: .3px; - - &.status-instock { - background: #C8E6C9; - color: #256029; - } - - &.status-outofstock { - background: #FFCDD2; - color: #C63737; - } - - &.status-lowstock { - background: #FEEDAF; - color: #8A5340; - } -} - - -.customer-badge { - border-radius: var(--border-radius); - padding: .25em .5rem; - text-transform: uppercase; - font-weight: 700; - font-size: 12px; - letter-spacing: .3px; - - &.status-qualified { - background: #C8E6C9; - color: #256029; - } - - &.status-unqualified { - background: #FFCDD2; - color: #C63737; - } - - &.status-negotiation { - background: #FEEDAF; - color: #8A5340; - } - - &.status-new { - background: #B3E5FC; - color: #23547B; - } - - &.status-renewal { - background: #ECCFFF; - color: #694382; - } - - &.status-proposal { - background: #FFD8B2; - color: #805B36; - } -} - -.order-badge { - border-radius: var(--border-radius); - padding: .25em .5rem; - text-transform: uppercase; - font-weight: 700; - font-size: 12px; - letter-spacing: .3px; - - &.order-delivered { - background: #C8E6C9; - color: #256029; - } - - &.order-cancelled { - background: #FFCDD2; - color: #C63737; - } - - &.order-pending { - background: #FEEDAF; - color: #8A5340; - } - - &.order-returned { - background: #ECCFFF; - color: #694382; - } -} +@import "assets/demo/badges.scss"; .docs { i:not([class~="pi"]) { @@ -160,40 +68,4 @@ pre[class*="language-"] { background: transparent; } } -} - -.custom-marker { - display: flex; - width: 2rem; - height: 2rem; - align-items: center; - justify-content: center; - color: #ffffff; - border-radius: 50%; - z-index: 1; -} - -.p-timeline-event-content, -.p-timeline-event-opposite { - line-height: 1; -} - -@media screen and (max-width: 960px) { - .customized-timeline { - .p-timeline-event:nth-child(even) { - flex-direction: row !important; - - .p-timeline-event-content { - text-align: left !important; - } - } - - .p-timeline-event-opposite { - flex: 0; - } - - .p-card { - margin-top: 1rem; - } - } -} +} \ No newline at end of file