Make our form/button styles match bootstrap's #1809
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The html using this was removed in 057c608
Instead we should rely on bootstrap's styling of anchors. The main motivation is that specifying the color for `:visited` is incompatible with bootstrap's styles (like those for a.button). Bootstrap colours :focus the same as :hover, making that variable unnecessary.
The last element using this was removed in 4de00c7
jhawthorn
added
changelog:solidus_backend
jhawthorn
changed the title
jhawthorn
added
UI
and removed
changelog:solidus_api
tvdeyen
requested changes
Mar 30, 2017
| @@ -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; | |||
There was a problem hiding this comment.
We deprecated the $color-txt-text variable. Can we use $color-3 instead?
There was a problem hiding this comment.
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
| $input-color: $gray !default; | ||
| $input-border-color: #ccc !default; | ||
| $input-color: $color-txt-text !default; | ||
| $input-border-color: $color-txt-brd !default; |
| $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; |
tvdeyen
approved these changes
Mar 31, 2017
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This makes our forms (inputs and buttons) match those using bootstrap classes (
.btnand.form-control). This should allow us to progressively change our current forms markup to bootstrap.Similar to the changes in #1780, bootstrap variables are set to the legacy styles' values.
Buttons are styled as bootstrap buttons using
@extend.@extendisn't an ideal tool to use, but I looked at the CSS products and it was okay here.This necessitated one change: buttons hover color is now dark blue as it's hardcoded in bootstrap to be 10% darker than the non-hovered BG. I hope this is okay. The new style is nicer. It currently disagrees with the select2 colours, but that will be fixed by #1797
I tried using
@extendfor the form inputs, but the CSS produced was ridiculous. We also don't want some of the styles that would imply (likewidth: 100%). Instead I've just used the bootstrap variables here and pulled in theirplaceholderpseudo-element styling.