Internetstiftelsen Styleguide

Progress 

<label class="a-progress-label"> label: <progress class="a-progress" max="100" value="40"></progress></label>
 
{{#if has_label}}<label class="a-progress-label"> label: {{/if}}<progress class="a-progress{{#if additional_classes}} {{additional_classes}}{{/if}}" max="{{max}}" value="{{value}}" {{#if max_width}}style="max-width:{{max_width}}"{{/if}}></progress>{{#if has_label}}</label>{{/if}}
 
{
  "has_label": true,
  "value": "40",
  "max": "100",
  "max_width": false,
  "additional_classes": false
}
  • Content: 
    @charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;


@include mixin.atom(progress) {
	&[value] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		display: block;
		color: colors.$color-ocean;
		background: colors.$color-concrete;
		border: none;
		width: 100%;
		border-radius: 0;
		height: func.rhythm(1);

		@include breakpoint.bp-up(md) {
			height: func.rhythm(2);
		}
	}
	&[value]::-webkit-progress-bar {
		border-radius: 0;
		background: colors.$color-concrete;
	}
	&[value]::-webkit-progress-value {
		border-radius: 0;
		background: colors.$color-ocean;
		transition: width 5s ease;
	}
	&[value]::-moz-progress-bar {
		border-radius: 0;
		background: colors.$color-ocean;
		transition: padding-bottom 5s ease;
		padding-left: 60px;
		padding-bottom: var(--value);
		height: 0;
		transform-origin: 0 0;
		transform: rotate(-90deg) translateX(-60px) ;
	}
}

@include mixin.atom(progress-label) {
	display: flex;
	align-items: center;

	> progress {
		margin-left: func.rhythm(1);
	}
}
  • URL: /components/raw/progress/_progress.scss
  • Filesystem Path: src/atoms/progress/_progress.scss
  • Size: 1.3 KB

No notes defined.