Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make our form/button styles match bootstrap's #1809

Merged
merged 13 commits into from
Mar 31, 2017
Merged

Make our form/button styles match bootstrap's #1809

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
92a4df2
Remove hardcodes of background colour
jhawthorn Mar 24, 2017
9b76032
Deprecate input colours in favour of bootstrap
jhawthorn Mar 29, 2017
6781281
Use bootstrap variables for styling form inputs
jhawthorn Mar 24, 2017
bcc8d61
Remove duplicate input-group declaration
jhawthorn Mar 24, 2017
2fe8d4a
Set placeholder styles
jhawthorn Mar 29, 2017
faeb451
Use bootstrap vars to style form inputs
jhawthorn Mar 29, 2017
6a60ea2
Don't reduce form input font size
jhawthorn Mar 29, 2017
b267b25
Remove unused .grand-total CSS
jhawthorn Mar 27, 2017
baefbeb
Remove custom anchor styles
jhawthorn Mar 29, 2017
1f8b9ba
Use bootstrap styling for buttons
jhawthorn Mar 27, 2017
2388e53
Remove unused labels-inline css
jhawthorn Mar 29, 2017
ce7f2db
Remove unnecessary box-shadow vendor prefixes
jhawthorn Mar 29, 2017
8776150
Fix buttons in filter-actions
jhawthorn Mar 29, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,16 +289,16 @@ $input-padding-y: .375rem !default;
$input-bg: #fff !default;
$input-bg-disabled: $gray-lighter !default;

$input-color: $gray !default;
$input-border-color: #ccc !default;
$input-color: $color-txt-text !default;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We deprecated the $color-txt-text variable. Can we use $color-3 instead?

Copy link
Contributor Author

@jhawthorn jhawthorn Mar 30, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've deprecated it, which means if a user sets $color-txt-text, they should see a warning, but it should continue working. This line (and the few below) are necessary for it to continue working

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your are right. Ignore me

$input-border-color: $color-txt-brd !default;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dito

$input-btn-border-width: $border-width !default; // For form controls and buttons
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;

$input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;

$input-border-focus: #66afe9 !default;
$input-border-focus: $color-txt-hover-brd !default;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dito

$input-box-shadow-focus: rgba(102,175,233,.6) !default;

$input-color-placeholder: #999 !default;
Expand Down
6 changes: 4 additions & 2 deletions backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,8 @@ $color-headers: $color-4 !default;
$color-link: $color-3 !default;
@include solidus-deprecated-variable("color-link-hover", "link-hover-color");
$color-link-hover: $color-2 !default;
$color-link-active: $color-2 !default;
@include solidus-deprecated-variable("color-link-focus", "link-hover-color");
$color-link-focus: $color-2 !default;
$color-link-visited: $color-3 !default;
$color-border: very-light($color-3, 12) !default;

// Basic navigation colors
Expand Down Expand Up @@ -104,8 +103,11 @@ $color-sel-disabled-bg: $color-7 !default;
$color-sel-disabled-text: $color-4 !default;

// Text inputs colors
@include solidus-deprecated-variable("color-txt-brd", "input-border-color");
$color-txt-brd: $color-border !default;
@include solidus-deprecated-variable("color-txt-text", "input-color");
$color-txt-text: $color-3 !default;
@include solidus-deprecated-variable("color-txt-hover-brd", "input-border-focus");
$color-txt-hover-brd: $color-2 !default;

// States label colors
Expand Down
2 changes: 1 addition & 1 deletion backend/app/assets/stylesheets/spree/backend/globals/mixins/_line_through.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@mixin line-through($color: $color-2, $background: $color-1) {
@mixin line-through($color: $color-2, $background: $body-bg) {
position: relative;
text-align: center;

Expand Down
126 changes: 18 additions & 108 deletions backend/app/assets/stylesheets/spree/backend/shared/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,25 @@ input[type="url"],
input[type="number"],
input[type="tel"],
textarea {
padding: 7px 10px;
border: 1px solid $color-txt-brd;
border-radius: $border-radius;
color: $color-txt-text;
font-size: 90%;
padding: $input-padding-y $input-padding-x;
color: $input-color;
border: $input-btn-border-width solid $input-border-color;
border-radius: $input-border-radius;
background: $input-bg;

&:focus {
border-color: $color-txt-hover-brd;
border-color: $input-border-focus;
outline: 0;
}

&:disabled {
background: $input-bg-disabled;
}

&[disabled] {
opacity: 0.7;
&::placeholder {
color: $input-color-placeholder;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
}

Expand All @@ -31,45 +38,6 @@ textarea {
width: 100%;
}

.input-group {
position: relative;
display: table;
border-collapse: separate;

.form-control,
.input-group-addon {
display: table-cell;

&:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}

.form-control {
width: 100%;
}

.input-group-addon {
padding: 6px 10px;
border: 1px solid #cee1f4;
background: #eff5fc;
border-radius: 3px;

&:first-child {
border-right: none;
}

&:last-child {
border-left: none;
}
}
}

label {
font-weight: $font-weight-bold;
font-size: 90%;
Expand All @@ -95,40 +63,17 @@ label {
input[type="submit"],
input[type="button"],
button, .button {
display: inline-block;
padding: 6px 15px;
border: none;
border-radius: $border-radius;
background-color: $color-btn-bg;
color: $color-btn-text;
font-weight: $font-weight-bold !important;
white-space: nowrap;
line-height: $line-height;
@extend .btn;
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);

&:before {
font-weight: normal !important;
}

&:visited, &:active, &:focus { color: $color-btn-text }

&:hover {
background-color: $color-btn-hover-bg;
color: $color-btn-hover-text;
}

&:active:focus {
box-shadow: 0 0 8px 0 darken($color-btn-hover-bg, 5) inset;
}

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

&[disabled], &.disabled {
background-color: #c2c4c7;
cursor: default;
}
}

span.info {
Expand Down Expand Up @@ -251,49 +196,14 @@ fieldset {
}

button, .button, input[type="submit"], input[type="button"] {
border-radius: $border-radius;

-webkit-box-shadow: 0 0 0 15px $color-1;
-moz-box-shadow: 0 0 0 15px $color-1;
-ms-box-shadow: 0 0 0 15px $color-1;
-o-box-shadow: 0 0 0 15px $color-1;
box-shadow: 0 0 0 15px $color-1;

&:hover {
border-color: $color-1;
}
box-shadow: 0 0 0 15px $body-bg;
}

// Always make sure the choices at the bottom of a fieldset are spaced out
> * + * {
margin-left: 2em;
}
}

&.labels-inline {
.field {
margin-bottom: 0;
display: table;
width: 100%;

label, input {
display: table-cell !important;
}
input {
width: 100%;
}

&.checkbox {
input {
width: auto !important
}
}
}
.actions {
padding: 0;
text-align: right;
}
}
}

.form-actions {
Expand Down
1 change: 0 additions & 1 deletion backend/app/assets/stylesheets/spree/backend/shared/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ body {
}

#content {
background-color: $color-1;
position: relative;
z-index: 0;
padding: 0;
Expand Down
13 changes: 0 additions & 13 deletions backend/app/assets/stylesheets/spree/backend/shared/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,18 +197,5 @@ table {
&.no-border-top tr:first-child td {
border-top: none;
}

&.grand-total {
td {
border-color: $color-2 !important;
font-size: 110%;
font-weight: $font-weight-bold;
background-color: lighten($color-2, 50);
}
.total {
background-color: $color-2;
color: $color-1;
}
}
}
}
19 changes: 0 additions & 19 deletions backend/app/assets/stylesheets/spree/backend/shared/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,6 @@ hr {
border-left: none;
}

// links
//--------------------------------------------------------------
a {
line-height: inherit;

&:active {
text-decoration: none;
}
&:visited {
color: $color-link-visited;
}
&:focus {
color: $color-link-focus;
}
&:active {
color: $color-link-active;
}
}

// Headings
//--------------------------------------------------------------

Expand Down