Design System

Button: Gray 

<a class="Button Button--gray  " href="https://www.ascendmaterials.com">Gray</a>
 
<a class="Button{% if modifier %} {% for item in modifier %}Button--{{ item }} {% endfor %} {% endif %}" href="{{ url }}">{{ _self.label }}</a>
 
{
  "company": "Ascend Performance Materials",
  "url": "https://www.ascendmaterials.com",
  "placeholders": {
    "copy": "Cozy lummox gives smart squid who asks for job pen"
  },
  "modifier": [
    "gray"
  ]
}
  • Content: 
    .Button {
	@apply inline-block 
		py-3
		px-10
		text-white 
		hover:text-white
		text-lg
		font-bold
		text-center
		bg-blue
		hover:bg-blue-low
		border-3
		border-transparent
		rounded-sm
		transition-colors
		duration-300;
		
	&[disabled][type=submit] {
		@apply cursor-wait
			opacity-50;
	}

	&--ghost, &--secondary {
		@apply text-blue
			hover:text-white
			bg-transparent
			border-blue;

			&.Button--inverted {
				@apply text-white
					hover:text-blue
					border-2
					border-white
					hover:bg-white;
			}
	}

	&--white {
		@apply text-blue
			hover:text-blue
			bg-white
			hover:bg-gray-200
			border-transparent;
	}

	&--gray {
		@apply text-blue
			hover:text-blue
			bg-gray-300
			hover:bg-gray-350
			border-transparent;
	}

	&--icon {
		@apply pl-16
			pr-0
			max-sm:py-4
			text-blue
			hover:text-blue
			bg-[length:50px]
			sm:bg-[length:60px]
			bg-[center_left]
			bg-transparent
			hover:bg-transparent
			bg-no-repeat
	}

	&--arrow {
		@apply sm:py-4
			sm:pl-20
			sm:text-xl
			bg-arrow-right-circle
			hover:bg-[center_left_0.25rem]
			transition-all
			duration-500;

		.Theme:not(.Theme--none, .Theme--gray) & {
			@apply bg-arrow-right-circle-white;
		}
	}

	&--print {
		@apply
			pl-10
			bg-printer
			bg-no-repeat
			bg-[length:34px_34px]
			bg-left
			uppercase;
	}
}

.ButtonGroup {
	@apply flex
		flex-wrap;

	.Button {
		@apply max-xs:block
			max-xs:ml-0
			mb-4
			xs:mb-2
			text-center
			rounded-none;

		&:first-child {
			@apply rounded-l-sm;
		}

		&:last-child {
			@apply rounded-r-sm;
		}
	}

	.Button + .Button {
		@apply -ml-[1px];
	}
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/components/01-elements/button/button.scss
  • Size: 1.6 KB

No notes defined.