f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update css

Browse Source
This commit is contained in:
Çetin 2021-12-23 10:23:33 +03:00
parent 38574a958f
commit 69d2af13e0
5 changed files with 134 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/app/pages/app.timelinedemo.component.ts
View File

@ -3,7 +3,47 @@ import {PrimeIcons} from 'primeng/api';
@Component({ @Component({
templateUrl: './app.timelinedemo.component.html', 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{ export class AppTimelineDemoComponent implements OnInit{

40
src/app/pages/app.timelinedemo.scss
View File

@ -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;
}
}
}
}

91
src/assets/demo/badges.scss Normal file
View File

@ -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;
}
}

0
src/assets/demo/documentation.scss Normal file
View File

130
src/styles.scss
View File

@ -7,99 +7,7 @@
@import "../node_modules/@fullcalendar/daygrid/main.min.css"; @import "../node_modules/@fullcalendar/daygrid/main.min.css";
@import "../node_modules/@fullcalendar/timegrid/main.min.css"; @import "../node_modules/@fullcalendar/timegrid/main.min.css";
@import "assets/demo/flags/flags.css"; @import "assets/demo/flags/flags.css";
@import "assets/demo/badges.scss";
.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;
}
}
.docs { .docs {
i:not([class~="pi"]) { i:not([class~="pi"]) {
@ -161,39 +69,3 @@ pre[class*="language-"] {
} }
} }
} }
.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;
}
}
}