ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: demo style tweaks

Browse Source
This commit is contained in:
Sam Potts
2023-03-18 23:52:09 +11:00
parent 8da1a78342
commit ae59c117b5
10 changed files with 66 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
demo/src/sass/components/buttons.scss
View File

@ -7,8 +7,7 @@
.button__count {
align-items: center;
border: 0;
border-radius: $border-radius-base;
box-shadow: 0 1px 1px rgba(#000, 0.1);
border-radius: $border-radius-medium;
display: inline-flex;
padding: ($spacing-base * 0.75);
position: relative;
@ -19,27 +18,34 @@
// Buttons
.button {
background: $color-button-background;
--shadow-color: 0deg 0% 20%;
align-items: center;
background-color: $color-button-background;
background-image: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.05));
border: 1px solid darken($color-button-background, 5);
box-shadow: 0 0.8px 1px hsl(var(--shadow-color) / 0.05), 0 1.3px 1.6px -1px hsl(var(--shadow-color) / 0.06),
0 2.8px 3.4px -2px hsl(var(--shadow-color) / 0.07);
color: $color-button-text;
display: inline-flex;
font-weight: $font-weight-bold;
gap: 0.25rem;
padding-left: ($spacing-base * 1.25);
padding-right: ($spacing-base * 1.25);
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
&:hover,
&:focus {
background: $color-button-background-hover;
border-color: darken($color-button-background, 7);
// Remove the underline/border
&::after {
display: none;
display: none !important;
}
}
&:hover {
box-shadow: 0 2px 2px rgba(#000, 0.1);
}
&:focus {
outline: 0;
}
@ -49,15 +55,12 @@
}
&:active {
box-shadow: none;
top: 1px;
}
}
// Button group
.button--with-count {
display: inline-flex;
.button .icon {
.icon {
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
flex-shrink: 0;
}
}
@ -66,19 +69,21 @@
.button__count {
animation: fade-in 0.2s ease;
background: $color-button-count-background;
border: 1px solid $color-gray-100;
color: $color-button-count-text;
margin-left: ($spacing-base * 0.75);
&::before {
border: $arrow-size solid transparent;
border-left-width: 0;
border-right-color: $color-button-count-background;
background-color: $color-button-count-background;
border: inherit;
border-width: 0 0 1px 1px;
content: '';
height: 0;
display: block;
height: 8px;
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
width: 0;
transform: translateY(-50%) translateX(50%) translateX(-1px) rotate(45deg);
width: 8px;
}
}