Meta

<div class="a-meta">2018-11-26</div>
<div class="a-meta{{#if is_light}} a-meta--light{{/if}}{{#if lowercase}} a-meta--lowercase{{/if}}{{#if additional_classes}} {{additional_classes}}{{/if}}">{{#if icon}}{{>@icon id=this.icon fill=this.color}} {{/if}}{{{text}}}</div>
{
  "text": "2018-11-26",
  "icon": false,
  "is_light": false,
  "lowercase": false,
  "additional_classes": false
}
  • Content:
    @charset "UTF-8";
    @use '../../configurations/variables' as var;
    @use '../../configurations/functions' as func;
    @use '../../configurations/mixins' as mixin;
    @use '../../configurations/bem' as bem;
    @use '../../configurations/functions' as f;
    @use '../../configurations/colors/colors' as colors;
    @use '../../configurations/colors/colors-functions' as colorFunc;
    @use '../../vendor/baseline/plumber' as plumber;
    @use '../../vendor/grid/breakpoints' as breakpoint;
    
    @include mixin.atom(meta) {
    	display: flex;
    	position: relative;
    	align-items: center;
    	color: var(--cyberspace-color);
    	font-family: var.$font-family-mono;
    	text-decoratiosn: none;
    	text-transform: uppercase;
    	white-space: nowrap;
    
    	@include plumber.plumber(
    		var.$font-size: 1.7,
    		$baseline: var.$mono-baseline,
    		$leading-bottom: 0
    	);
    
    	@include colorFunc.color_values(colorFunc.$colors, 'fill', $prefix: '--', $separator: '-');
    
    	span {
    		margin-left: func.to_rem(3px);
    	}
    
    	@include bem.b(icon) {
    		display: flex;
    		flex-shrink: 0;
    		align-items: center;
    		width: var.$icon-size;
    		height: var.$icon-size;
    		margin-right: func.rhythm(1);
    		color: var(--color-cyberspace);
    
    		svg {
    			fill: inherit;
    		}
    	}
    
    	@include bem.m(light) {
    		color: colors.$color-snow;
    
    		@include bem.b(icon) {
    			fill: colors.$color-snow;
    		}
    	}
    
    	@include bem.m(lowercase) {
    		text-transform: initial;
    	}
    
    	@include bem.m(wrap) {
    		white-space: normal;
    	}
    
    	@include bem.m(responsive) {
    		@include plumber.plumber(
    			var.$font-size: 1.4,
    			$baseline: var.$mono-baseline,
    			$leading-bottom: 0
    		);
    
    		@include breakpoint.bp-up(md) {
    			@include plumber.plumber(
    				var.$font-size: 1.6,
    				$baseline: var.$mono-baseline,
    				$leading-bottom: 0
    			);
    		}
    
    		@include breakpoint.bp-up(lg) {
    			@include plumber.plumber(
    				var.$font-size: 1.7,
    				$baseline:var.$mono-baseline,
    				$leading-bottom: 0
    			);
    		}
    	}
    }
    
  • URL: /components/raw/meta/_meta.scss
  • Filesystem Path: src/atoms/meta/_meta.scss
  • Size: 1.9 KB

Meta

Icon is optional. Icons support every color in the color scheme. Modifier class for color is set on the parent element and inherited down to the svg icon.