|
@@ -126,13 +126,14 @@ $color__lightblue--primary: #03A9F4;
|
|
|
|
|
|
|
|
|
.tab_button {
|
|
|
- padding: 0.5rem 1rem;
|
|
|
- border-radius: 0.2rem;
|
|
|
+ padding: 0.5rem 0.75rem;
|
|
|
+ border-radius: 3rem;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.2s;
|
|
|
margin-right: 0.5rem;
|
|
|
- border-bottom: #d4d4d4 0.2rem solid;
|
|
|
display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ top: -0.1rem;
|
|
|
|
|
|
@include user-select(none);
|
|
|
|
|
@@ -143,13 +144,28 @@ $color__lightblue--primary: #03A9F4;
|
|
|
background-color: #dcdcdc;
|
|
|
}
|
|
|
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ background-color: $color__blue--primary;
|
|
|
+ width: calc(100% - 1rem);
|
|
|
+ left: 0.5rem;
|
|
|
+ bottom: -0.3rem;
|
|
|
+ height: 0.2rem;
|
|
|
+ opacity: 0;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
@at-root #{&}--selected {
|
|
|
- border-bottom: #c1c1c1 0.2rem solid;
|
|
|
- background-color: $color__lightgray--darker;
|
|
|
cursor: default;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ &:active, &:hover {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
|
|
|
- &:active {
|
|
|
- background-color: $color__lightgray--darker;
|
|
|
+ &::after {
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
}
|