sakrecoer-mother-web/_sass/isotope.scss

66 lines
1 KiB
SCSS
Raw Normal View History

2019-11-04 22:43:23 +01:00
/* ---- button ---- */
.button {
2019-11-05 12:34:08 +01:00
2019-11-04 22:43:23 +01:00
display: inline-block;
2019-11-05 13:00:58 +01:00
// padding: 10px 18px;
2019-11-05 12:34:08 +01:00
margin: 0 10px 10px 0;
2019-11-05 13:00:58 +01:00
width: 50px;
height: 50px;
2020-01-28 11:21:10 +01:00
background: $color3;
2019-11-04 22:43:23 +01:00
border: none;
2019-11-05 12:34:08 +01:00
border-radius: 300px;
2019-11-05 13:00:58 +01:00
font-size: .65em;
2019-11-04 22:43:23 +01:00
text-shadow: 0 1px white;
transition: all .2s ease;
}
.button:hover {
2020-01-28 11:21:10 +01:00
text-shadow: 0 1px $color4;
color: $color4;
2019-11-04 22:43:23 +01:00
}
.button:active,
.button.is-checked {
2020-01-28 11:21:10 +01:00
background: linear-gradient(230deg, $color5, $color3);
2019-11-05 12:34:08 +01:00
background-size: 1000% 1000%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
2019-11-04 22:43:23 +01:00
}
.button.is-checked {
2020-01-28 11:21:10 +01:00
color: $color1;
text-shadow: $color4;
2019-11-04 22:43:23 +01:00
}
.button:active {
2020-01-28 11:21:10 +01:00
box-shadow: inset 0 1px 10px $color4;
2019-11-04 22:43:23 +01:00
}
/* ---- button-group ---- */
2019-11-05 12:34:08 +01:00
.button-group{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
2019-11-04 22:43:23 +01:00
2019-11-05 12:34:08 +01:00
// .button-group .button:first-child {
// border-radius: 0.5em 0 0 0.5em;
// }
2019-11-04 22:43:23 +01:00
2019-11-05 12:34:08 +01:00
// .button-group .button:last-child {
// border-radius: 0 0.5em 0.5em 0;
// }
2019-11-04 22:43:23 +01:00