<div class="block-add-bar">
    <span class="block-add-prompt"><svg width="20" height="20" class="icon icon-add"><use xlink:href="/assets/svg/core.svg#add" /></svg></span>
    <a href="#" class="block-add"><svg width="10" height="10" class="icon icon-pencil"><use xlink:href="/assets/svg/blocks.svg#pencil" /></svg> Text</a>
    <a href="#" class="block-add"><svg width="10" height="10" class="icon icon-quote"><use xlink:href="/assets/svg/blocks.svg#quote" /></svg> Pull quote</a>
    <a href="#" class="block-add"><svg width="10" height="10" class="icon icon-photo"><use xlink:href="/assets/svg/blocks.svg#photo" /></svg> Feature image</a>
    <a href="#" class="block-add"><svg width="10" height="10" class="icon icon-signs"><use xlink:href="/assets/svg/blocks.svg#signs" /></svg> Directions</a>
</div>
<div class="block-add-bar">
	<span class="block-add-prompt">{{ icon 'core/add' 20 }}</span>
	<a href="#" class="block-add">{{ icon 'blocks/pencil' 10 }} Text</a> 
	<a href="#" class="block-add">{{ icon 'blocks/quote' 10 }} Pull quote</a> 
	<a href="#" class="block-add">{{ icon 'blocks/photo' 10 }} Feature image</a>
	<a href="#" class="block-add">{{ icon 'blocks/signs' 10 }} Directions</a>
</div>
/* No context defined for this component. */
  • Content:
    .block-add-bar {
    	padding-left: 30px;
    	position: relative;
    	margin: $half-gutter $main-gutter;
    	font-weight: 400;
        @include font-scale(sm, helvetica);
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    
    .block-add-bar.hidden {
    	display: none;
    }
    
    .block-add-prompt {
    	margin-top: 1px;
    	height: 20px;
    	background-color: palette(ui, panel);
    }
    
    .block-add-bar .block-add-prompt svg {
    	fill: palette(ui);
    }
    
    .block-add-bar:hover .block-add-prompt svg {
    	fill: palette(ui, darker);
    }
    
    
    .block-add-bar svg {
    	fill: palette(ui, dark);
    	margin-right: 2px;
    }
    
    .block-wrap:hover .block-add-bar a svg {
    	fill: palette(ui, darker);
    }
    
    .block-add-bar a {
    	padding: 1px 10px 1px 10px;
    	text-decoration: none;
    	color: palette(ui, dark);
    	background-color: palette(ui, panel);
    }
    
    .block-wrap:hover .block-add-bar a {
    	color: palette(ui, darker);
    }
    
    .block-wrap .block-add-bar a:hover {
    	padding: 1px 10px 1px 10px;
    	color: #fff;
    	background-color: palette(ui, darker);
    	border-radius: 5px;
    }
    
    .block-wrap .block-add-bar a:hover svg {
    	fill: #fff;
    }
  • URL: /components/raw/block-add-bar/block-add-bar.scss
  • Filesystem Path: src/components/12-forms/03-organisms/06-blocks/01-block-add-bar/block-add-bar.scss
  • Size: 1.1 KB

There are no notes for this item.