scinote-web/app/assets/stylesheets/shared_styles/elements/buttons.scss

237 lines
4 KiB
SCSS
Raw Normal View History

2019-12-04 22:17:59 +08:00
// scss-lint:disable NestingDepth
2020-01-07 23:13:34 +08:00
.btn{
2019-12-01 03:04:28 +08:00
@include font-button;
animation-timing-function: $timing-function-sharp;
border-radius: $border-radius-default;
cursor: pointer;
display: inline-block;
2020-04-24 17:50:03 +08:00
height: 36px;
2019-12-01 03:04:28 +08:00
line-height: 20px;
outline: 0;
padding: 7px 16px;
2019-12-01 04:24:50 +08:00
position: relative;
text-align: center;
text-decoration: none;
2019-12-04 22:17:59 +08:00
transition: .3s;
2019-12-01 03:04:28 +08:00
user-select: none;
2020-10-22 19:41:17 +08:00
.fas,
img {
2019-12-01 03:04:28 +08:00
color: inherit;
2020-11-03 01:47:08 +08:00
margin-right: .25em;
2019-12-01 03:04:28 +08:00
}
&:hover {
text-decoration: none;
2019-12-01 03:04:28 +08:00
}
2020-05-10 19:08:19 +08:00
&:active,
&.active {
box-shadow: none;
text-decoration: none;
}
&:focus {
outline: 0;
text-decoration: none;
2019-12-01 03:04:28 +08:00
}
2020-01-07 23:13:34 +08:00
&.btn-primary {
background: $brand-primary;
border: 1px solid $brand-primary;
color: $color-white;
&:hover {
background: $brand-primary-hover;
color: $color-white;
}
2020-05-10 19:08:19 +08:00
&:active,
&.active {
2020-01-07 23:13:34 +08:00
background: $brand-primary-press;
color: $color-white;
}
&:focus {
box-shadow: 0 0 0 1px $brand-complementary;
2020-01-07 23:13:34 +08:00
color: $color-white;
}
}
&.btn-secondary {
2019-12-01 03:04:28 +08:00
background: $color-white;
border: $border-default;
color: $color-volcano;
2019-12-01 03:04:28 +08:00
&:hover {
background: $color-concrete;
border: $border-secondary;
color: $color-volcano;
2019-12-01 03:04:28 +08:00
}
2020-05-10 19:08:19 +08:00
&:active,
&.active {
2019-12-01 03:04:28 +08:00
background: $color-alto;
border: $border-secondary;
color: $color-volcano;
}
&:focus {
box-shadow: 0 0 0 1px $brand-focus;
color: $color-volcano;
2019-12-01 03:04:28 +08:00
}
}
2020-01-07 23:13:34 +08:00
&.btn-light {
2019-12-01 03:04:28 +08:00
background: transparent;
border: $border-transparent;
color: $color-volcano;
2019-12-01 03:04:28 +08:00
&:hover {
background: $color-concrete;
border: $border-transparent;
color: $color-volcano;
2019-12-01 03:04:28 +08:00
}
2020-05-10 19:08:19 +08:00
&:active,
&.active {
2019-12-01 03:04:28 +08:00
background: $color-alto;
border: $border-transparent;
color: $color-volcano;
}
&:focus {
box-shadow: 0 0 0 1px $brand-focus;
color: $color-volcano;
2019-12-01 03:04:28 +08:00
}
}
&.btn-light-link {
background: transparent;
border: $border-transparent;
color: $brand-primary;
&:hover {
background: $color-concrete;
border: $border-transparent;
color: $brand-primary;
}
&:active,
&.active {
background: $color-alto;
border: $border-transparent;
color: $brand-primary;
}
&:focus {
box-shadow: 0 0 0 1px $brand-focus;
color: $brand-primary;
}
}
2020-01-07 23:13:34 +08:00
&.btn-danger {
2019-12-01 03:04:28 +08:00
background: $brand-danger;
border: $border-danger;
2020-01-07 23:13:34 +08:00
color: $color-white;
2019-12-01 03:04:28 +08:00
&:hover {
background: $brand-danger-hover;
2020-01-07 23:13:34 +08:00
color: $color-white;
2019-12-01 03:04:28 +08:00
}
2020-05-10 19:08:19 +08:00
&:active,
&.active {
2019-12-01 03:04:28 +08:00
background: $brand-danger-press;
2020-01-07 23:13:34 +08:00
color: $color-white;
2019-12-01 03:04:28 +08:00
}
&:focus {
box-shadow: 0 0 0 1px $brand-focus;
color: $color-white;
}
2019-12-01 03:04:28 +08:00
}
2020-10-19 18:17:03 +08:00
&.btn-dark-background {
background: $color-white;
border: $border-default;
color: $brand-primary;
&:hover {
background: $color-concrete;
color: $brand-primary-hover;
}
&:active,
&.active {
background: $color-alto;
color: $brand-primary-press;
}
&:focus {
box-shadow: 0 0 0 1px $brand-focus;
color: $brand-primary;
}
}
2019-12-01 03:04:28 +08:00
&.icon-btn {
padding: 7px;
width: 36px;
.fas {
margin: 0;
}
}
2020-10-19 18:17:03 +08:00
&.btn-large {
font-size: $font-size-h2;
height: 3.1em;
padding: 1em 3em;
}
&.disabled,
2019-12-01 04:24:50 +08:00
&:disabled {
color: $color-silver-chalice;
2020-07-09 20:25:54 +08:00
cursor: auto;
opacity: .5;
pointer-events: none;
2019-12-01 04:24:50 +08:00
&.btn-primary,
&.btn-danger {
2020-01-15 20:52:17 +08:00
background: $color-alto;
border: $border-tertiary;
&:hover {
border: $border-tertiary;
color: $color-silver-chalice;
}
2020-01-15 20:52:17 +08:00
}
2020-01-07 23:13:34 +08:00
&.btn-secondary,
2020-10-19 18:17:03 +08:00
&.btn-light,
&.btn-light-link,
2020-10-19 18:17:03 +08:00
&.btn-dark-background {
2019-12-01 04:24:50 +08:00
background: $color-white;
&:hover {
color: $color-silver-chalice;
2019-12-01 04:24:50 +08:00
}
}
}
}
.sci-btn-group {
display: inline-block;
position: relative;
2020-01-07 23:13:34 +08:00
.btn {
2019-12-01 04:24:50 +08:00
float: left;
margin: 2px 4px 2px 0;
2019-12-01 04:24:50 +08:00
&:nth-last-child(1) {
2019-12-01 04:24:50 +08:00
margin-right: 0;
}
}
2019-12-04 22:17:59 +08:00
}