wikijs/client/scss/components/button.scss

.button {
	background-color: mc('orange','600');
	color: #FFF;
	border: 1px solid mc('orange','700');
	border-radius: 3px;
	display: inline-flex;
	height: 40px;
	align-items: center;
	padding: 0 15px;
	font-size: 13px;
	font-weight: 600;
	font-family: $core-font-standard;
	margin: 0;
	transition: all .4s ease;
	cursor: pointer;
	text-decoration: none;
	text-transform: uppercase;

	span {
		font-weight: 600;
		display: inline-flex;
		align-items: center;
		line-height: 14px;
		height: 14px;
	}

	i {
		margin-right: 8px;
		font-size: 14px;
		line-height: 14px;
		height: 14px;
	}

	&:focus {
		outline: none;
		border-color: #FFF;
	}

	&:hover {
		background-color: mc('orange','800');
		text-decoration: none;
	}

	@each $color, $colorvalue in $material-colors {
		&.is-#{$color} {
			background-color: mc($color, '600');
			border-color: mc($color,'700');
			color: #FFF;

			&.is-outlined {
				background-color: #FFF;
				color: mc($color,'700');
			}

			&.is-inverted {
				background-color: rgba(mc($color, '800'), 0);
				border-color: mc($color, '500');
			}

			&:hover {
				background-color: mc($color,'800');
				color: #FFF;
				animation: none;
      }

      &:focus {
        box-shadow: inset 0 0 0 3px rgba(255,255,255, .4);
      }
		}

	}

	&.is-icon-only {
		i {
			margin-right: 0;
		}
	}

	&.is-featured {
		animation: btnInvertedPulse .6s ease alternate infinite;
  }

  &.is-fullwidth {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

	&.is-disabled, &:disabled {
		background-color: mc('grey', '300');
		border: 1px solid mc('grey','400');
		color: mc('grey', '500');
		cursor: default;
    transition: none;

    &:hover {
      background-color: mc('grey', '300') !important;
      color: mc('grey', '500') !important;
    }
  }

  &.is-small {
    height: 30px;
  }

}

.button-group {

	.button {
		border-radius: 0;
		margin-left: 1px;

		&:first-child {
			margin-left: 0;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
		}

		&:last-child {
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}

	}

}

@include keyframes(btnInvertedPulse) {
	0% {
		background-color: rgba(mc('grey', '500'), 0);
	}
	100% {
		background-color: rgba(mc('grey', '500'), 0.25);
	}
}