<div role="alert" class="m-alert m-alert--success m-alert--dismissable js-dismiss-alert">
    <button class="a-button a-button--icon a-button--standalone-icon a-button--icon">
        <span class="a-button__text"">Meddelanderuta med som användaren kan välja att klicka bort.</span>
			<svg class=" icon a-button__icon">
            <use xlink:href="#icon-close"></use>
            </svg>
    </button>
    <h2 class="u-m-b-1">Avfärda</h2>
    <p>Meddelanderuta med som användaren kan välja att klicka bort.</p>
</div>
<div{{#if role}} role="{{role}}"{{/if}} class="m-alert m-alert--{{type}}{{#if is_dismissable}} m-alert--dismissable{{/if}}{{#if js_class}} {{js_class}}{{/if}}">
	{{#if is_dismissable}}
		{{> @button el="button" modifiers="icon, standalone-icon" icon="close"}}
	{{/if}}
	<h2 class="u-m-b-1">{{name}}</h2>
	<p>{{{text}}}</p>
</div>
{
  "name": "Avfärda",
  "type": "success",
  "text": "Meddelanderuta med som användaren kan välja att klicka bort.",
  "role": "alert",
  "js_class": "js-dismiss-alert",
  "is_dismissable": true
}
  • Content:
    @charset 'UTF-8';
    
    $alert-success-border: $color-jade;
    $alert-success-bg: $color-jade-light;
    $alert-info-border: $color-ocean;
    $alert-info-bg: $color-ocean-light;
    $alert-warning-border: $color-lemon;
    $alert-warning-bg: $color-lemon-light;
    $alert-error-border: $color-ruby;
    $alert-error-bg: $color-ruby-light;
    $alert-text: $color-cyberspace;
    
    @include molecule(alert) {
    	position: relative;
    	margin-bottom: rhythm(4);
    	padding: rhythm(2) rhythm(2) rhythm(3) rhythm(2);
    	border: 1px solid transparent;
    	background-repeat: no-repeat;
    	background-position: rhythm(2) 50%;
    
    	> h2,
    	> p {
    		max-width: rem(600px);
    	}
    
    	> p:last-child {
    		margin-bottom: rhythm(0.5);
    	}
    
    	a {
    		@extend %normalize-links;
    
    		color: $color-cyberspace;
    		font-family: $font-family-headings;
    		text-decoration: underline;
    	}
    
    	@include m(dismissable) {
    		padding-right: rhythm(4);
    
    		// Adjust close button position
    		button:not(.a-button--is-static) {
    			position: absolute;
    			z-index: z_index(background);
    			top: rhythm(1);
    			right: rhythm(1);
    		}
    	}
    
    	// Alternate styles
    	//
    	// Generate contextual modifier classes for colorizing the alert.
    
    	@include m(success) {
    		@include alert-variant($alert-success-border, $alert-success-bg, $alert-text);
    	}
    
    	@include m(info) {
    		@include alert-variant($alert-info-border, $alert-info-bg, $alert-text);
    	}
    
    	@include m(warning) {
    		@include alert-variant($alert-warning-border, $alert-warning-bg, $alert-text);
    	}
    
    	@include m(error) {
    		@include alert-variant($alert-error-border, $alert-error-bg, $alert-text);
    
    		::selection {
    			background-color: $color-ruby;
    		}
    
    		::-moz-selection {
    			background-color: $color-ruby;
    		}
    	}
    }
    
  • URL: /components/raw/alert/_alert.scss
  • Filesystem Path: src/molecules/alert/_alert.scss
  • Size: 1.7 KB

No notes defined.