108 lines
2.5 KiB
SCSS
108 lines
2.5 KiB
SCSS
|
.btn:focus, .btn.focus {
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary {
|
||
|
|
font-weight: $font-weight-bold;
|
||
|
|
min-width: 6vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
button,
|
||
|
|
.btn {
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
box-shadow: unset;
|
||
|
|
text-decoration: none;
|
||
|
|
color: $Color-Tailwind-Text;
|
||
|
|
cursor: pointer;
|
||
|
|
outline: none;
|
||
|
|
|
||
|
|
* {
|
||
|
|
color: $Color-Tailwind-Text;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
// background-color: $Color-Text-Secondary-Dark;
|
||
|
|
// border-color: $Color-Text-Secondary-Dark;
|
||
|
|
opacity: 0.75;
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
// background: $Color-Azure;
|
||
|
|
// color: $Color-White;
|
||
|
|
// border: 1px solid $Color-Azure;
|
||
|
|
box-shadow: inset 0 0 10vw 10vw rgb(255 255 255 / 20%);
|
||
|
|
}
|
||
|
|
&:not(:disabled):not(.disabled):focus,
|
||
|
|
&:not(:disabled):not(.disabled):active,
|
||
|
|
&:not(:disabled):not(.disabled):active:focus {
|
||
|
|
// background: $Color-White;
|
||
|
|
// color: $Color-Azure;
|
||
|
|
// border: 1px solid $Color-Azure;
|
||
|
|
box-shadow: inset 0 0 10vw 10vw rgb(255 255 255 / 20%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// fieldset table a,
|
||
|
|
// .btn,
|
||
|
|
.btn-primary,
|
||
|
|
.btn-secondary,
|
||
|
|
.btn-outline-secondary {
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
// font-size: 15px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: normal;
|
||
|
|
padding: 5px 10px;
|
||
|
|
max-width: 100%;
|
||
|
|
background: $Color-Azure;
|
||
|
|
color: $Color-White;
|
||
|
|
border-radius: 3vw;
|
||
|
|
border: 1px solid $Color-Azure;
|
||
|
|
box-sizing: border-box;
|
||
|
|
cursor: pointer;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
text-decoration: none;
|
||
|
|
outline: 0;
|
||
|
|
transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
|
||
|
|
vertical-align: middle;
|
||
|
|
margin: 6px;
|
||
|
|
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
// background-color: $Color-Text-Secondary-Dark;
|
||
|
|
// border-color: $Color-Text-Secondary-Dark;
|
||
|
|
opacity: 0.75;
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
background: $Color-Azure;
|
||
|
|
color: $Color-White;
|
||
|
|
border: 1px solid $Color-Azure;
|
||
|
|
box-shadow: inset 0 0 10vw 10vw rgb(255 255 255 / 20%);
|
||
|
|
}
|
||
|
|
&:not(:disabled):not(.disabled):focus,
|
||
|
|
&:not(:disabled):not(.disabled):active,
|
||
|
|
&:not(:disabled):not(.disabled):active:focus {
|
||
|
|
background: $Color-White;
|
||
|
|
color: $Color-Azure;
|
||
|
|
border: 1px solid $Color-Azure;
|
||
|
|
box-shadow: inset 0 0 10vw 10vw rgb(255 255 255 / 20%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-outline-secondary {
|
||
|
|
background: none;
|
||
|
|
color: $Color-White;
|
||
|
|
border: 1px solid $Color-White;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-link {
|
||
|
|
padding: 0.375rem 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-close {
|
||
|
|
background: rgba(0,0,0,0) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat
|
||
|
|
}
|