vendor/ui-list/ui-list-tab.css
/* NAV STYLING OVERLAY */
.ui-list.item.skin-tab {
border-radius: 0px;
border: none;
margin: 0px 0px 0px 0px;
}
/* RIGHT */
.ui-list.list-container.right.skin-tab {
border-left: 3px solid #3F3F3F;
}
.ui-list.list-container.right .ui-list.item.skin-tab {
transition: 0.25s;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid hsl(0, 0%, 90%);
border-left: 0px;
width: calc(100% - 15px);
background-color: hsl(0, 0%, 96%);
font-weight: 500;
}
.ui-list.list-container.right .ui-list.item.skin-tab.selected {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid hsl(0, 0%, 75%);
border-left: 0px;
background-color: hsl(0, 0%, 91%);
width: 100%;
font-weight: 900;
}
.ui-list.list-container.right .ui-list.item.skin-tab:hover {
background-color: hsl(0, 0%, 91%);
}
/* LEFT */
.ui-list.list-container.left.skin-tab {
border-right: 3px solid #3F3F3F;
}
.ui-list.list-container.left .ui-list.item.skin-tab {
transition: 0.25s;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border: 1px solid hsl(0, 0%, 90%);
border-right: 0px;
width: calc(100% - 15px);
background-color: hsl(0, 0%, 96%);
font-weight: 500;
align-self: flex-end;
}
.ui-list.list-container.left .ui-list.item.skin-tab.selected {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border: 1px solid hsl(0, 0%, 75%);
border-right: 0px;
background-color: hsl(0, 0%, 91%);
width: 100%;
font-weight: 900;
}
.ui-list.list-container.left .ui-list.item.skin-tab:hover {
background-color: hsl(0, 0%, 91%);
}
/* TOP */
.ui-list.list-container.top .ui-list.item.skin-tab {
border-bottom: 5px solid rgba(234, 234, 234, 0.78);
justify-content: space-around;
}
.ui-list.list-container.top.skin-tab {
border-bottom: 1px solid hsl(0, 0%, 90%);
}
.ui-list.list-container.top .ui-list.item.skin-tab {
transition: 0.25s;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 1px solid hsl(0, 0%, 90%);
background-color: hsl(0, 0%, 96%);
height: 100%;
font-weight: 500;
align-self: flex-end;
position: relative;
bottom: -1px;
}
.ui-list.list-container.top .ui-list.item.skin-tab.selected {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 1px solid hsl(0, 0%, 75%);
border-bottom: 1px solid hsl(0, 0%, 90%);
background-color: hsl(0, 0%, 91%);
font-weight: 900;
align-self: flex-end;
}
/* BOTTOM */
.ui-list.list-container.bottom .ui-list.item.skin-tab {
border-bottom: 5px solid rgba(234, 234, 234, 0.78);
justify-content: space-around;
}
.ui-list.list-container.bottom.skin-tab {
border-top: 1px solid hsl(0, 0%, 90%);
}
.ui-list.list-container.bottom .ui-list.item.skin-tab {
transition: 0.25s;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid hsl(0, 0%, 90%);
background-color: hsl(0, 0%, 96%);
height: 100%;
font-weight: 500;
align-self: flex-start;
position: relative;
top: -1px;
}
.ui-list.list-container.bottom .ui-list.item.skin-tab.selected {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid hsl(0, 0%, 75%);
background-color: hsl(0, 0%, 91%);
border-top: 1px solid hsl(0, 0%, 90%);
font-weight: 900;
}
.ui-list.list-container.left .ui-list.item.skin-tab:hover {
background-color: hsl(0, 0%, 91%);
}
/* MOODS */
.ui-list.list-container .ui-list.item.skin-tab:hover {
background-color: hsl(0, 0%, 91%);
}
.ui-list.list-container
.ui-list.item.skin-tab.selected.mood-success {
background-color: hsl(120, 39%, 91%);
border-color: hsl(120, 39%, 84%);
}
.ui-list.list-container
.ui-list.item.skin-tab.selected.mood-error {
background-color: hsl(2, 64%, 91%);
border-color: hsl(2, 64%, 84%);
}
.ui-list.list-container
.ui-list.item.skin-tab.selected.mood-warning {
background-color: hsl(35, 84%, 91%);
border-color: hsl(35, 84%, 84%);
}
.ui-list.list-container
.ui-list.item.skin-tab.selected.mood-info {
background-color: hsl(194, 66%, 91%);
border-color: hsl(194, 66%, 84%);
}