houdini/app/assets/stylesheets/components/simple_tabs.css.scss
2020-06-15 10:26:57 -05:00

50 lines
1.2 KiB
SCSS

/* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later
Full license explanation at https://github.com/houdiniproject/houdini/blob/master/LICENSE */
@import 'mixins';
.simpleTabs-tab {
background: $fog;
border-left: 1px solid lighten($grey, 25);
border-right: 1px solid lighten($grey, 25);
border-top: 1px solid lighten($grey, 25);
@include border-radius(3px 3px 0 0);
padding: 6px 10px;
font-weight: bold;
font-size: 15px;
color: rgba(black, 0.6);
line-height: 1;
display: inline-block;
margin-right: 6px;
position: relative;
}
.simpleTabs-tab[is-selected] {
border-bottom: 1px solid $fog;
margin-bottom: -1px;
}
.simpleTabs-tab:not([is-selected]) {
cursor: pointer;
}
.simpleTabs-tab:not([is-selected]):after,
.simpleTabs-tab:not([is-selected]):before {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
}
.simpleTabs-tab:not([is-selected]):after {
bottom: 0;
@include gradient(top, $trans, rgba(black, 0.1));
}
.simpleTabs-tab:not([is-selected]) {
color: $logo-blue;
}
.simpleTabs-tab:not([is-selected]):hover:before {
top: 0;
background: rgba($logo-blue, 0.5);
}
.simpleTabs-section {
border: 1px solid lighten($grey, 25);
background: $fog;
@include border-radius(0 3px 3px 3px);
}