app/javascript/vue/assets/styles/components/buttons.scss
@import '../variables/_sizes.scss';
@import '../variables/_palette.scss';
.btn {
text-align: center;
white-space: nowrap;
vertical-align: middle;
padding-left: 0.9em;
padding-right: 0.9em;
}
.btn-link {
@extend .btn;
display: table-cell;
}
@each $key, $value in $tw-input-sizes {
.btn-#{$key}-size {
height: #{$value};
}
}
@each $key, $value in $tw-input-sizes {
.btn-#{$key}-circle {
height: #{$value};
width: #{$value};
min-width: #{$value};
min-height: #{$value};
text-align: center;
border-radius: 100%;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0;
}
}
.btn-radial {
background-color: var(--btn-radial-background);
color: var(--btn-radial-color);
border: 2px solid #5d9ece;
&:disabled {
border: none;
}
}
@each $key, $value in $tw-colors {
.btn-#{$key} {
background-color: #{$value};
color: white;
}
}