.show-on-mobile {
@include on-tablet { display: none !important; } @include on-desktop { display: none !important; }
}
.button-group {
// Spacing margin: $spacing-3 0pt; // Flexbox display: flex; flex-direction: row-reverse; justify-content: center; @include not-on-mobile { justify-content: flex-start; } // Buttons in Group .button { flex: 1; @include not-on-mobile { flex: 0 auto; } }
}
.button {
// Spacing margin: 0pt $spacing-1; padding: $spacing-2 $spacing-3; // Text text-align: center; text-decoration: none; // Shape border: none; border-radius: 4pt; // Color @include with-theme { background-color: color-for(primary); color: color-for(text-on-primary); }
}
.button-sec {
@extend .button; // Color @include with-theme { background-color: color-for(secondary); color: color-for(text-on-secondary); }
}
.button-ter {
@extend .button; // Color @include with-theme { background-color: color-for(tertiary); color: color-for(text-on-tertiary); }
}
.button-quat {
@extend .button; // Color @include with-theme { background-color: color-for(quaternary); color: color-for(text-on-quaternary); }
}
.icon-button {
// Spacing and sizing margin: $spacing-1; padding: $spacing-2; font-size: $icon-font-size; // Align with center display: flex; align-items: center; justify-content: center; // Styling background: none; border: none; @include with-theme { color: color-for(primary) }
}
.icon-button-sec {
@extend .icon-button; // Color @include with-theme { color: color-for(secondary); }
}
.icon-button-ter {
@extend .icon-button; // Color @include with-theme { color: color-for(tertiary); }
}
.icon-button-quat {
@extend .icon-button; // Color @include with-theme { color: color-for(quaternary); }
}