Button: Standalone Icon

Ready

HTML
View
Context
Assets
Info
Notes


        
        <button class="a-button a-button--standalone-icon">
    <span class="a-button__text"></span>
    <svg class="icon a-button__icon">
        <use xlink:href="#icon-close"></use>
    </svg>
</button>


        <{{getelement el "a"}}
	{{#if id}}id="{{id}}"{{/if}}
	{{#if button_type}}type="{{button_type}}"{{/if}}
	{{#if url}}href="{{ url }}"{{/if}}
	class="a-button{{#if modifiers}} {{getmodifiers modifiers "a-button"}}{{/if}}{{#if additional_classes}} {{ additional_classes}}{{/if}}"
	{{{attr attributes}}}
	{{#if aria_controls}}aria-controls="{{ aria_controls }}"{{/if}}
>
	<span class="a-button__text"{{#if alternative_text}} data-alternative-text="{{alternative_text}}"{{/if}}>{{ text }}</span>
	{{#if icon}}
	{{> @icon id=icon additional_classes="a-button__icon"}}
	{{/if}}
</{{getelement el "a"}}>


        
            
            {
  "url": false,
  "text": "",
  "alternative_text": false,
  "button_type": false,
  "type": false,
  "id": false,
  "aria_controls": false,
  "modifiers": [
    "standalone-icon"
  ],
  "icon": "close",
  "el": "button"
}

File:

Content:


                                class Button {
	constructor(button, disabled = true) {
		this.button = button;
		this.disabled = disabled;

		this.build();
	}

	build() {
		const className = this.button.classList.item(0);
		const html = `
			<svg class="icon ${className}__spinner">
				<use xlink:href="#icon-spinner-white"></use>
			</svg>
		`;

		this.button.appendChild(document.createRange().createContextualFragment(html));
	}

	isLoading() {
		return this.button.classList.contains('is-loading');
	}

	start() {
		if (this.disabled) {
			this.button.setAttribute('disabled', 'disabled');
		}

		this.button.classList.add('is-loading');
	}

	stop() {
		if (this.disabled) {
			this.button.removeAttribute('disabled');
		}

		this.button.classList.remove('is-loading');
	}
}

module.exports = Button;

URL: /components/raw/button/Button.js
Filesystem Path: src/atoms/button/Button.js
Size: 774 Bytes

Content:


                                @charset "UTF-8";
@use "sass:color";
@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 '../../vendor/grid/breakpoints' as breakpoint;

/* Default Button
/// @group Buttons */
@include mixin.atom(button) {
	display: inline-flex;
	position: relative;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: func.rhythm(1.112) func.rhythm(2);
	overflow: hidden;
	border: 0;
	border-radius: var.$border-radius;
	background-color: currentColor;
	background-image: none; /* Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214;httpshttpshttps */
	box-shadow: 0 0 0 1px inset currentColor;
	color: colors.$color-ocean-dark;
	font-family: var.$font-family-headings;
	font-size: func.to_rem(16px);
	text-decoration: none;
	text-shadow: none;
	hyphens: auto;
	cursor: pointer;

	&:hover,
	&:focus {
		color: colors.$color-ocean;
	}

	&:disabled {
		background-color: colors.$color-granit !important;
		box-shadow: none;
		cursor: not-allowed;

		[class*='text'] {
			color: colors.$color-snow !important;
			text-shadow: none !important;
		}
	}

	/* States */
	&.is-loading {
		cursor: wait;
	}

	&.is-loading & {
		@include bem.e(text) {
			transform: translateY(-100%);
			opacity: 0;
		}

		@include bem.e(icon) {
			transform: translateY(-100%);
			opacity: 0;
		}

		@include bem.e(spinner) {
			transform: translate(-50%, -50%);
			opacity: 1;
		}
	}

	@include bem.e(text) {
		position: relative;
		transform: translateY(0);
		transition: 0.3s opacity, 0.3s transform;
		transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
		opacity: 1;
		color: colors.$color-snow;
		pointer-events: none;
	}

	@include bem.e(spinner) {
		position: absolute;
		top: 50%;
		left: 50%;
		width: var.$icon-size-small;
		height: var.$icon-size-small;
		transform: translate(-50%, 50%);
		transition: 0.3s opacity, 0.3s transform;
		transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
		opacity: 0;
	}

	/* Modifiers */

	@include bem.m(full-width) {
		display: flex;
		width: 100%;
	}

	@include bem.m(small) {
		padding: func.rhythm(0.6) func.rhythm(1.5);
	}

	@include bem.m(large) {
		padding: func.rhythm(1.6) func.rhythm(4);

		@include bem.e(text) {
			@include breakpoint.bp-up(sm) {
				font-size: func.to_rem(24px);
			}
		}

		@include bem.e(icon) {
			width: var.$icon-size;
			height: var.$icon-size;
		}

		@include bem.e(spinner) {
			width: var.$icon-size;
			height: var.$icon-size;
		}
	}

	@include bem.m(large-responsive) {
		padding: func.rhythm(1.6) func.rhythm(4);

		@include bem.e(text) {
			font-size: func.to_rem(24px);
		}

		@include bem.e(icon) {
			width: var.$icon-size;
			height: var.$icon-size;
		}

		@include bem.e(spinner) {
			width: var.$icon-size;
			height: var.$icon-size;
		}

		@include breakpoint.bp-down(sm) {
			padding: func.rhythm(1.112) func.rhythm(2);

			@include bem.e(text) {
				font-size: func.to_rem(16px);
			}
		}
	}

	@include bem.m(icon) {
		justify-content: space-between;
		max-width: func.rhythm(50);
		padding-right: func.rhythm(5);
		text-align: left;
	}

	@include bem.m(icon-left) {
		justify-content: space-between;
		max-width: func.rhythm(50);
		padding-right: func.rhythm(2);
		padding-left: func.rhythm(5);

		@include bem.e(icon) {
			right: auto;
			left: func.rhythm(1.5);
		}
	}

	@include bem.m(standalone-icon) {
		padding: func.rhythm(1);
		border: 0;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;

		@include bem.e(text) {
			@include mixin.visuallyhidden;
		}

		@include bem.e(icon) {
			position: static;
			width: var.$icon-size;
			height: var.$icon-size;
			transform: none;
			color: var(--cyberspace-color);
			fill: currentColor;
		}

		@include bem.m(white) {
			@include bem.e(icon) {
				fill: colors.$color-snow;
			}
		}
	}

	@include bem.e(icon) {
		position: absolute;
		z-index: func.z_index(background);
		top: 50%;
		right: func.rhythm(1.5);
		width: var.$icon-size-small;
		height: var.$icon-size-small;
		transform: translateY(-50%);
		transition: fill 100ms linear;
		fill: colors.$color-snow;
		pointer-events: none;
	}

	/* More colors */
	@include bem.m(transparent) {
		border-color: transparent;
		background-color: transparent;
		box-shadow: none;
		color: var(--cyberspace-color);

		&:hover,
		&:focus {
			color: inherit;
			text-decoration: underline;
		}

		@include bem.e(text) {
			color: var(--cyberspace-color);
		}

		@include bem.e(icon) {
			width: var.$icon-size;
			height: var.$icon-size;
			fill: var(--cyberspace-cyberspace);
			fill: currentColor;
		}

		@include bem.m(small-icon) {
			@include bem.e(icon) {
				width: var.$icon-size-small;
				height: var.$icon-size-small;
			}
		}
	}

	@include bem.m(cyberspace) {
		color: colors.$color-cyberspace;

		&:hover,
		&:focus {
			color: colors.$color-granit;
		}

		@include bem.e(text) {
			color: colors.$color-snow;
		}

		@include bem.e(icon) {
			fill: colors.$color-snow;
		}
	}

	@include bem.m(snow) {
		color: transparent;

		&:hover,
		&:focus {
			color: colors.$color-snow;
		}

		@include bem.e(text) {
			color: colors.$color-snow;
		}

		@include bem.e(icon) {
			fill: colors.$color-snow;
		}
	}

	@include bem.m(ruby) {
		color: colors.$color-ruby;

		&:hover,
		&:focus {
			color: colors.$color-ruby-dark;
		}

		@include bem.e(text) {
			color: colors.$color-snow;
			text-shadow: 0 0 func.rhythm(0.5) colors.$color-ruby-dark;
		}

		@include bem.e(icon) {
			fill: colors.$color-snow;
		}
	}

	@include bem.m(ruby-light) {
		box-shadow: 0 0 0 1px inset colors.$color-ruby;
		color: colors.$color-ruby-light;

		&:hover,
		&:focus {
			color: colors.$color-ruby;
		}

		@include bem.e(text) {
			color: colors.$color-cyberspace;
		}

		@include bem.e(icon) {
			fill: colors.$color-cyberspace;
		}
	}

	@include bem.m(ruby-dark) {
		color: colors.$color-ruby-dark;

		&:hover,
		&:focus {
			color: colors.$color-ruby;
		}

		@include bem.e(text) {
			color: colors.$color-snow;
		}

		@include bem.e(icon) {
			fill: colors.$color-snow;
		}
	}

	@include bem.m(ocean-light) {
		box-shadow: 0 0 0 1px inset colors.$color-ocean;
		color: colors.$color-ocean-light;

		&:hover,
		&:focus {
			color: colors.$color-ocean;
		}

		@include bem.e(text) {
			color: colors.$color-cyberspace;
		}

		@include bem.e(icon) {
			fill: colors.$color-cyberspace;
		}
	}

	@include bem.m(jade) {
		color: colors.$color-jade;

		&:hover,
		&:focus {
			color: color.adjust(colors.$color-jade, $lightness: -10%);
			text-shadow: none;
		}

		@include bem.e(text) {
			color: colors.$color-cyberspace;
		}

		@include bem.e(icon) {
			fill: colors.$color-cyberspace;
		}
	}

	@include bem.m(jade-light) {
		box-shadow: 0 0 0 1px inset colors.$color-jade;
		color: colors.$color-jade-light;

		&:hover,
		&:focus {
			color: colors.$color-jade;
		}

		@include bem.e(text) {
			color: colors.$color-cyberspace;
		}

		@include bem.e(icon) {
			fill: colors.$color-cyberspace;
		}
	}

	@include bem.m(jade-dark) {
		color: colors.$color-jade-dark;

		&:hover,
		&:focus {
			color: colors.$color-jade;
		}

		@include bem.e(text) {
			color: colors.$color-snow;
		}

		@include bem.e(icon) {
			fill: colors.$color-snow;
		}
	}

	@include bem.m(lemon) {
		color: colors.$color-lemon;

		&:hover,
		&:focus {
			color: colors.$color-lemon-light;
		}

		@include bem.e(text) {
			color: colors.$color-cyberspace;
		}

		@include bem.e(icon) {
			fill: colors.$color-cyberspace;
		}
	}

	@include bem.m(lemon-light) {
		box-shadow: 0 0 0 1px inset colors.$color-lemon;
		color: colors.$color-lemon-light;

		&:hover,
		&:focus {
			background-color: colors.$color-lemon;
		}

		@include bem.e(text) {
			color: colors.$color-cyberspace;
		}

		@include bem.e(icon) {
			fill: colors.$color-cyberspace;
		}
	}

	@include bem.m(peacock) {
		color: colors.$color-peacock;

		&:hover {
			color: color.adjust(colors.$color-peacock, $lightness: -10%);
			text-shadow: none;
		}

		&:focus {
			color: colors.$color-peacock;
		}

		&:hover:focus {
			color: colors.$color-peacock;
		}

		@include bem.e(text) {
			color: colors.$color-snow;
			text-shadow: 0 0 func.rhythm(1) colors.$color-peacock-dark;
		}

		@include bem.e(icon) {
			fill: colors.$color-cyberspace;
		}
	}

	@include bem.m(peacock-light) {
		box-shadow: 0 0 0 1px inset colors.$color-peacock;
		color: colors.$color-peacock-light;

		&:hover {
			color: colors.$color-peacock;
		}

		&:focus {
			color: colors.$color-peacock-light;
		}

		&:hover:focus {
			color: colors.$color-peacock-light;
		}

		@include bem.e(text) {
			color: colors.$color-cyberspace;
		}

		@include bem.e(icon) {
			fill: colors.$color-cyberspace;
		}
	}

	@include bem.m(sandstone) {
		color: colors.$color-sandstone;

		&:hover,
		&:focus {
			color: colors.$color-sandstone-light;
		}

		@include bem.e(text) {
			color: colors.$color-cyberspace;
		}

		@include bem.e(icon) {
			fill: colors.$color-cyberspace;
		}
	}

	@include bem.m(sandstone-light) {
		box-shadow: 0 0 0 1px inset colors.$color-sandstone;
		color: colors.$color-sandstone-light;

		&:hover {
			color: colors.$color-sandstone;
		}

		&:focus {
			color: colors.$color-sandstone-light;
		}

		&:hover:focus {
			color: colors.$color-sandstone-light;
		}

		@include bem.e(text) {
			color: colors.$color-cyberspace;
		}

		@include bem.e(icon) {
			fill: colors.$color-cyberspace;
		}
	}

	@include bem.m(dashed) {
		border: 1px dashed;
		background: transparent;
		box-shadow: none;
		color: colors.$color-cyberspace;

		&:hover,
		&:focus {
			color: colors.$color-cyberspace;
			text-decoration: underline;
		}

		@include bem.e(text) {
			color: inherit;
		}
	}
}

URL: /components/raw/button/_button.scss
Filesystem Path: src/atoms/button/_button.scss
Size: 9.9 KB

Handle: @button--standalone-icon
Tags: RTR, website
Variants (26): Default , Ruby , Ruby Light , Ruby Dark , Jade , Jade Light , Jade Dark , Lemon , Lemon Light , Peacock , Peacock Light , Cyberspace , Sandstone , Sandstone Light , Transparent , Dashed , Full Width , Small , Large , Large Responsive , With Icon , With Left Icon , Transparent With Icon , Loading , Standalone Icon , Standalone Icon White
Preview:
- With layout
- Component only
Filesystem Path: src/atoms/button/button.hbs
References (1): @icon

No notes defined.