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

up buttons stories

Browse source
This commit is contained in:
Tykayn 2025-09-17 16:02:21 +02:00 • committed by tykayn
parent d5610f38be
commit 54d044ad9a
3 changed files with 261 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,135 +5,4 @@
:host {
display: inline-block;
font-family: Barlow;
button {
background: transparent;
color: shadows.$neutral-white;
border-radius: shadows.$radius-main;
padding: 1rem 2rem;
cursor: pointer;
transition: all 0.25s ease;
border: 0;
width: 100%;
margin-top: 8px;
i {
margin-right: 1rem;
}
&: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-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;
color: white;
}
}
&.is-secondary {
background-color: variables.$neutral-white;
color: variables.$neutral-white;
&.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;
}
}
&.is-link {
background: variables.$neutral-white;
color: #255B8E;
border: 0;
.label {
text-decoration: underline;
text-decoration-color: variables.$primary-color;
}
&.is-disabled {
background-color: #BED7EE;
color: #BED7EE;
}
}
}
}