tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add modal in similar case page

Browse source
This commit is contained in:
Tykayn 2025-09-26 12:30:20 +02:00 • committed by tykayn
parent a2afad0545
commit 8ef68379de
15 changed files with 371 additions and 185 deletions
Download patch file Download diff file Expand all files Collapse all files

157
my-workspace/projects/sae-lib/buttons/main-button/main-button.scss
View file

@ -5,4 +5,161 @@
:host {
display: inline-block;
font-family: Barlow;
.pipe {
margin-left: 10px;
margin-right: 10px;
}
button {
background: transparent;
color: shadows.$neutral-white;
border-radius: shadows.$radius-main;
padding: 17px 24px;
cursor: pointer;
transition: all 0.25s ease;
border: 0;
width: 100%;
margin-top: 8px;
font-size: 18px;
i {
width: 16px;
height: 16px;
}
//&:hover, &:active, &:focus {
// transition: all 0.25s ease;
//}
&:hover {
background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
}
&.is-size {
&-large {
padding: 17px 24px;
font-size: 18px;
font-weight: 600;
line-height: 26px;
}
&-medium {
padding: 14px 18px;
border-radius: var(--radius-2, 8px);
font-size: 16px;
font-weight: 600;
line-height: 20px;
}
&-small {
padding: 14px 10px;
border-radius: var(--radius-2, 8px);
font-size: 14px;
font-weight: 600;
line-height: 20px;
}
&-extrasm {
padding: 10px 10px;
border-radius: var(--radius-2, 4px);
color: var(--Colors-Blanc, #FFF);
font-size: 12px;
font-weight: 600;
line-height: 18px;
}
}
&.is-disabled {
background-color: #BED7EE;
color: white;
}
&.is-primary {
background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
color: variables.$neutral-white;
border-color: color.adjust(variables.$primary-color, $lightness: - 10%);
&:hover {
background: var(--Hover, linear-gradient(70deg, #073A7C 43.99%, #1767AD 94.38%, #255B8E 126.68%));
}
&:focus {
border: 3px solid var(--Colors-Principal-100, #96BEE4);
background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
}
&.is-disabled {
background-color: #BED7EE !important;
color: white;
}
}
&.is-secondary {
//background: variables.$neutral-white;
background: white;
border: solid 1px #255B8E;
color: variables.$neutral-white;
color: #255B8E;
&.is-disabled {
background-color: #BED7EE;
color: white;
}
}
&.is-ghost {
background: variables.$neutral-white;
color: #255B8E;
border: 0;
&:focus {
background: variables.$neutral-white;
}
&.is-disabled {
background-color: #BED7EE;
color: #BED7EE;
}
&:hover {
background: #dedede;
}
}
&.is-link {
background: variables.$neutral-white;
color: #255B8E;
border: 0;
&:hover {
background: #dedede;
}
.label {
text-decoration: underline;
text-decoration-color: variables.$primary-color;
}
&.is-disabled {
background-color: #BED7EE;
color: #BED7EE;
}
}
}
}