mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-01 21:58:51 +02:00
Form action styles update
Doesn’t conform to BEM. Need to update places btn-success is being used and replace with btn-primary, but the differences shouldn’t be too noticeable.
This commit is contained in:
Paul Clarke
Ingo Schommer
parent
3be4e80711
commit
5b2d910aeb
@ -1,7 +1,9 @@
|
||||
// TODO Separate out bootstrap btn reset styles to a separate style sheet or divide within this sheet
|
||||
// TODO Rename component to something like Btn or Button?
|
||||
// General buttons
|
||||
.btn {
|
||||
height: 32px;
|
||||
margin-right: 1rem;
|
||||
margin-right: $spacer-x * .75; // 12px
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -14,26 +16,14 @@
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
// Btn icons with no text require .btn--no-text
|
||||
.btn--no-text[class*="font-icon-"]::before {
|
||||
|
||||
// For buttons with icon and no text, removes space after icon
|
||||
// TODO replace all .no-text classes for .btn--no-text
|
||||
.btn--no-text[class*="font-icon-"]::before,
|
||||
.no-text[class*="font-icon-"]::before {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
margin-right: 1rem;
|
||||
|
||||
.btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
border-left: 1px solid darken($btn-success-bg, 6%);
|
||||
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SVG loading icon
|
||||
.btn__loading-icon {
|
||||
@ -48,30 +38,28 @@
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
circle {
|
||||
width: 4px;
|
||||
height: 5px;
|
||||
animation: loading-icon 1.2s infinite ease-in-out both;
|
||||
fill: $gray;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
circle {
|
||||
width: 4px;
|
||||
height: 5px;
|
||||
animation: loading-icon 1.2s infinite ease-in-out both;
|
||||
fill: $gray;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
circle:nth-child(1) {
|
||||
animation-delay: -.32s;
|
||||
}
|
||||
circle:nth-child(1) {
|
||||
animation-delay: -.32s;
|
||||
}
|
||||
|
||||
circle:nth-child(2) {
|
||||
animation-delay: -.16s;
|
||||
}
|
||||
circle:nth-child(2) {
|
||||
animation-delay: -.16s;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--loading {
|
||||
> span,
|
||||
&::before {
|
||||
visibility: hidden;
|
||||
}
|
||||
.btn--loading > span,
|
||||
.btn--loading::before {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@keyframes loading-icon {
|
||||
@ -79,63 +67,91 @@
|
||||
40% { transform: scale(1); }
|
||||
}
|
||||
|
||||
// Specific button types
|
||||
.btn-link {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:active:focus,
|
||||
&:active:hover,
|
||||
&:focus {
|
||||
background-color: $gray-lighter;
|
||||
}
|
||||
|
||||
.toolbar--content & {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success-outline {
|
||||
border-color: lighten($brand-success,10%);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $brand-success;
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
border-color: lighten($brand-success,10%);
|
||||
}
|
||||
|
||||
svg circle {
|
||||
fill: $brand-success;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
box-shadow: 0 1px 0 $btn-success-shadow;
|
||||
// Specific button variations
|
||||
.btn-primary {
|
||||
border-bottom-color: $btn-primary-shadow;
|
||||
|
||||
svg circle {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
.btn-primary-outline {
|
||||
border-color: lighten($btn-primary-border,10%);
|
||||
|
||||
.btn--options {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: darken($btn-primary-bg, 10%);
|
||||
background-image: none;
|
||||
background-color: lighten($btn-primary-bg, 50%);
|
||||
border-color: $btn-primary-border;
|
||||
}
|
||||
|
||||
.font-icon-dot-3 {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-lighter;
|
||||
}
|
||||
svg circle {
|
||||
fill: $btn-primary-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-secondary {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:active:hover,
|
||||
&:active:focus {
|
||||
background-color: $gray-lighter;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.btn-secondary-outline {
|
||||
color: $btn-secondary-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
background-color: $gray-lighter;
|
||||
color: $btn-secondary-color;
|
||||
}
|
||||
|
||||
svg circle {
|
||||
fill: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Trigger for the more options popup
|
||||
.btn__options {
|
||||
@extend .btn-secondary;
|
||||
@extend .btn--no-text;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
color: $body-color;
|
||||
|
||||
&:hover {
|
||||
background-color: $btn-secondary-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Grouped buttons
|
||||
.btn-group {
|
||||
margin-right: $spacer-x * .75; // 12px
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.btn-group .btn-primary {
|
||||
border-left: 1px solid $btn-primary-shadow;
|
||||
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,8 +30,7 @@ class Preview extends SilverStripeComponent {
|
||||
<a href="" className="cms-content__back-btn font-icon-left-open-big" />
|
||||
<div className="toolbar--south">
|
||||
<div className="btn-toolbar">
|
||||
<button className="btn btn-secondary btn-secondary" type="button">
|
||||
<i className="font-icon-edit" /> Edit
|
||||
<button className="btn btn-secondary btn-secondary font-icon-edit" type="button">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
*/
|
||||
|
||||
// Tables
|
||||
// Used as a base for components: Grid-field.
|
||||
// Used as a base for components: GridField.
|
||||
|
||||
.table {
|
||||
margin-left: -$spacer-x;
|
||||
|
||||
@ -32,7 +32,7 @@ $gray-light: #d3d9dd;
|
||||
$gray-lighter: #e8e9ea;
|
||||
// $gray-lightest: #f7f7f9;
|
||||
//
|
||||
$brand-primary: #29abe2; //#0275d8;
|
||||
$brand-primary: #29abe2;
|
||||
$brand-success: #3fa142;
|
||||
// $brand-info: #5bc0de;
|
||||
// $brand-warning: #f0ad4e;
|
||||
@ -253,38 +253,38 @@ $table-border-color: $gray-lighter;
|
||||
// For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
$btn-padding-x: .7692rem; // 10px
|
||||
$btn-padding-y: .3846rem;
|
||||
$btn-padding-y: .3846rem; // 5px
|
||||
$btn-font-weight: normal;
|
||||
|
||||
$btn-primary-color: #fff;
|
||||
// $btn-primary-bg: $brand-primary;
|
||||
// $btn-primary-border: $btn-primary-bg;
|
||||
$btn-primary-bg: $brand-success;
|
||||
$btn-primary-border: $btn-primary-bg;
|
||||
$btn-primary-shadow: darken($btn-primary-bg, 6%);
|
||||
|
||||
$btn-secondary-color: $gray-dark;
|
||||
$btn-secondary-bg: transparent;
|
||||
$btn-secondary-border: $border-color;
|
||||
$btn-secondary-color: $body-color;
|
||||
$btn-secondary-bg: $gray-lighter;
|
||||
$btn-secondary-border: $border-color-dark;
|
||||
|
||||
// $btn-info-color: #fff;
|
||||
// $btn-info-bg: $brand-info;
|
||||
// $btn-info-border: $btn-info-bg;
|
||||
|
||||
$btn-success-color: #fff;
|
||||
$btn-success-bg: $brand-success;
|
||||
$btn-success-border: $btn-success-bg;
|
||||
$btn-success-shadow: darken($btn-success-bg, 6%);
|
||||
// $btn-success-color: #fff;
|
||||
// $btn-success-bg: $brand-success;
|
||||
// $btn-success-border: $btn-success-bg;
|
||||
|
||||
$btn-complete-color: #555;
|
||||
$btn-complete-bg: $brand-success;
|
||||
$btn-complete-bg: $btn-primary-bg;
|
||||
$btn-complete-border: $gray-light;
|
||||
$btn-complete-shadow: darken($btn-success-bg, 6%);
|
||||
$btn-complete-shadow: darken($btn-primary-bg, 6%);
|
||||
|
||||
// $btn-warning-color: #fff;
|
||||
// $btn-warning-bg: $brand-warning;
|
||||
// $btn-warning-border: $btn-warning-bg;
|
||||
|
||||
$btn-danger-color: $brand-danger;
|
||||
$btn-danger-bg: transparent;
|
||||
$btn-danger-border: transparent;
|
||||
$btn-danger-color: #fff;
|
||||
$btn-danger-bg: $brand-danger;
|
||||
$btn-danger-border: $brand-danger;
|
||||
|
||||
// $btn-link-disabled-color: $gray-light;
|
||||
//
|
||||
|
||||
Loading…
Reference in New Issue
Block a user