<div class="button-group button-toggle">
    <a class="button button-small toggle-active" href="/foo"><svg width="12" height="12" class="icon icon-grid-big"><use xlink:href="/assets/svg/core.svg#grid-big" /></svg> Grid</a>
    <a class="button button-small" href="/foo"><svg width="12" height="12" class="icon icon-menu"><use xlink:href="/assets/svg/core.svg#menu" /></svg> List</a>
</div>
<div class="button-group button-toggle">
    <a class="button button-small toggle-active" href="/foo">{{ icon 'core/grid-big' 12 }} Grid</a>
    <a class="button button-small" href="/foo">{{ icon 'core/menu' 12 }} List</a>
</div>
/* No context defined for this component. */
  • Content:
    .button-group.button-toggle .button:first-child:not(:last-child) { 
    	border-right: 1px solid #fff;
    }
    
    .button-toggle {
    	padding: 5px .5rem;
    }
    
    .button-toggle .button {
    	background-color: #fff; //palette(ui, lighter);
    }
    
    .button-toggle .button svg {
    	vertical-align: text-top;
    	margin-top: 0px;
    	margin-right: 2px;
    }
    
    .button-toggle .button.toggle-active {
    	background-color: palette(ui, darker);
    	color: #fff;
    }
    
    
    .button-toggle .button:hover svg {
    	fill: palette(type, dark);
    }
    
    .button-toggle .button.toggle-active svg {
    	fill: #fff;
    }
    
    .button-toggle .button:hover {
    	color: palette(type, dark);
    }
    
    .button-toggle .button.toggle-active:hover {
    	background-color: palette(ui, darker-active);
    	color: #fff;
    }
  • URL: /components/raw/smartbar-toggle/smartbar-toggle.scss
  • Filesystem Path: src/components/13-navigation/04-smartbar/01-atoms/07-smartbar-toggle/smartbar-toggle.scss
  • Size: 709 Bytes

There are no notes for this item.