Rise 360 Tabs UI

A dark mode for your tabs.

/* set up your colors, if developing a custom theme these should be set globally for your entire theme */

:root {

--color-bg1: #010412;
--color-g1: #1b2152;
--color-g2: #090d21; 
--color-tab-text1: #c2c6ee;
--color-text1: #fff;
--color-tab-border: transparent;
    
}

/* set background gradient for content area including active tab */

#app .blocks-tabs .block-card {
  background: linear-gradient(135deg, var(--color-g1) 0%, var(--color-g2) 100%);  
}

/* add top border color for active tab, this uses the theme color variable */

#app .blocks-tabs__header-item--active {
  border-top: 2px solid var(--color-theme);
}

#app .blocks-tabs__content { border-color:var(--color-tab-border); transition:.5s ease-out all; padding-top: 1em;}

#app .blocks-tabs__header-item { border-color:var(--color-tab-border);}

#app .blocks-tabs__header-item:not(.blocks-tabs__header-item--active ) {
    background: var(--color-bg1);
}

#app .blocks-tabs__content-item {
    padding: 2rem 3rem;
}

#app .blocks-tabs .brand--linkColor {
    color: var(--color-tab-text1);
}

#app .blocks-tabs__content p{
    color:var(--color-text1);
    margin-bottom:1em;
}

/* mobile indicator for offcanvas tabs */

#app .blocks-tabs__controls::after {
  background: linear-gradient(to left,rgba(1,1,1,.9),rgba(1,1,1,.01));
  border-right: 1px solid #000;
} 
   
#app .blocks-tabs__controls::before {
  background: linear-gradient(to right,rgba(1,1,1,.9),rgba(1,1,1,.01));
  border-left: 1px solid #000;
}

Getting started with theme components? Download the blank theme component css file.
Watch: installing a theme component.


Posted

in

Tags: