francescoalbano/tripweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 Generic custom CSS class

Browse Source
This commit is contained in:
itskovacs 2025-08-20 18:13:56 +02:00
parent c64c1fd7bc
commit bcd3fec631
2 changed files with 50 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/src/app/components/dashboard/dashboard.component.scss
View File

@ -6,53 +6,3 @@
flex: 1;
flex-grow: 1;
}
.custom-button {
appearance: button;
text-decoration: none;
background-color: #3851e1;
border-radius: 6px;
border-width: 0;
box-shadow:
rgba(50, 50, 93, 0.1) 0 0 0 1px inset,
rgba(50, 50, 93, 0.1) 0 2px 5px 0,
rgba(0, 0, 0, 0.07) 0 1px 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-size: 100%;
height: 44px;
line-height: 1.15;
outline: none;
overflow: hidden;
padding: 0 25px;
position: relative;
text-align: center;
text-transform: none;
transform: translateZ(0);
transition:
all 0.2s,
box-shadow 0.08s ease-in;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 100%;
max-width: fit-content;
&.orange {
background-color: #f57340;
}
&:disabled {
cursor: default;
background-color: #a6a6a6;
}
&:focus {
box-shadow:
rgba(50, 50, 93, 0.1) 0 0 0 1px inset,
rgba(50, 50, 93, 0.2) 0 6px 15px 0,
rgba(0, 0, 0, 0.1) 0 2px 2px 0,
rgba(50, 151, 211, 0.3) 0 0 0 4px;
}
}

50
src/src/styles.scss
View File

@ -157,3 +157,53 @@ html {
.slide-x {
animation: slide-x 0.3s both;
}
.custom-button {
appearance: button;
text-decoration: none;
background-color: #3851e1;
border-radius: 6px;
border-width: 0;
box-shadow:
rgba(50, 50, 93, 0.1) 0 0 0 1px inset,
rgba(50, 50, 93, 0.1) 0 2px 5px 0,
rgba(0, 0, 0, 0.07) 0 1px 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-size: 100%;
height: 44px;
line-height: 1.15;
outline: none;
overflow: hidden;
padding: 0 25px;
position: relative;
text-align: center;
text-transform: none;
transform: translateZ(0);
transition:
all 0.2s,
box-shadow 0.08s ease-in;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 100%;
max-width: fit-content;
&.orange {
background-color: #f57340;
}
&:disabled {
cursor: default;
background-color: #a6a6a6;
}
&:focus {
box-shadow:
rgba(50, 50, 93, 0.1) 0 0 0 1px inset,
rgba(50, 50, 93, 0.2) 0 6px 15px 0,
rgba(0, 0, 0, 0.1) 0 2px 2px 0,
rgba(50, 151, 211, 0.3) 0 0 0 4px;
}
}