Fixing RadioButton and Checkbox styles, solves #442 #299 #415 #489 #488 #508
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,10 @@ | ||
| <template role="presentation"> | ||
|
|
||
| <input class="d-reset" type="checkbox" attach-point="focusNode,valueNode" | ||
| checked="{{checked}}" value="{{value}}" name="{{name}}"/> | ||
| <svg class="d-checkbox-visual" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg"> | ||
| <rect class="d-checkbox-visual-outer" x="0" y="0" width="2048" height="2048" stroke-width="204"/> | ||
| <!-- TODO: credit font-awesome for the svg path below. http://fontawesome.io/icon/check/ --> | ||
| <path class="d-checkbox-visual-inner" d="M1799 694q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z"/> | ||
| </svg> | ||
| </template> | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,55 @@ | ||
| label[for] { | ||
| // fixes a ios bug that makes it so that the handler set on document, | ||
| // listening for clicks on label, is never called. | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .d-checkbox { | ||
| position: relative; | ||
| display: inline-block; | ||
| /* #408 Enforce content-box to ensure correctly centered check mark */ | ||
| /* even if border-box is used everywhere else for instance */ | ||
| /* via delite/themes/defaultapp.css */ | ||
| box-sizing: content-box; | ||
|
There was a problem hiding this comment. Enforcing box-sizing looks obsolete with this refactoring. Same comment for radiobutton. |
||
|
|
||
| &.d-disabled *, fieldset[disabled] & * { | ||
| cursor: not-allowed; | ||
| } | ||
|
|
||
| &-visual { | ||
| overflow: visible; | ||
|
There was a problem hiding this comment. I noticed that overflow visible make the border stronger. But I don't understand how it works, could you comment? There was a problem hiding this comment.
|
||
| display: inline-block; | ||
| position: relative; | ||
| &-inner { | ||
| position: absolute; | ||
| visibility: hidden; | ||
|
|
||
| } | ||
| .d-checked &-inner { | ||
| visibility: visible; | ||
| } | ||
| } | ||
|
|
||
| &-visual { | ||
| .d-checkbox-styles(normal); | ||
| } | ||
|
|
||
| .d-disabled &-visual { | ||
| .d-checkbox-styles(disabled); | ||
| } | ||
|
|
||
| .d-focused &-visual { | ||
| .d-checkbox-styles(focused); | ||
| } | ||
| } | ||
|
|
||
| .d-checkbox > input[type=checkbox] { | ||
| /* The input is not stretched so that is spans | ||
| * all over the space available inside d-checkbox */ | ||
| width: 100%; height: 100%; | ||
| /* NOTE: we could have used opacity: 0 here but it breaks the focus */ | ||
| opacity: .01; | ||
| position: absolute; | ||
| z-index: 1; | ||
| } | ||
|
|
||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,107 @@ | ||
| .d-checkbox { | ||
| margin-right: 4px; | ||
| } | ||
| /* interoperability with bootstrap form layouts */ | ||
| .checkbox .d-checkbox, | ||
| .checkbox-inline .d-checkbox { | ||
| margin-left: -20px; | ||
| margin-right: 0; | ||
| position: absolute; | ||
| } | ||
| label[for] { | ||
| cursor: pointer; | ||
| } | ||
| .d-checkbox { | ||
| position: relative; | ||
| display: inline-block; | ||
| /* #408 Enforce content-box to ensure correctly centered check mark */ | ||
| /* even if border-box is used everywhere else for instance */ | ||
| /* via delite/themes/defaultapp.css */ | ||
| box-sizing: content-box; | ||
| } | ||
| .d-checkbox.d-disabled *, | ||
| fieldset[disabled] .d-checkbox * { | ||
| cursor: not-allowed; | ||
| } | ||
| .d-checkbox-visual { | ||
| overflow: visible; | ||
| display: inline-block; | ||
| position: relative; | ||
| } | ||
| .d-checkbox-visual-inner { | ||
| position: absolute; | ||
| visibility: hidden; | ||
| } | ||
| .d-checked .d-checkbox-visual-inner { | ||
| visibility: visible; | ||
| } | ||
| .d-checkbox-visual { | ||
| width: 11px; | ||
| height: 11px; | ||
| } | ||
| .d-checkbox-visual-inner { | ||
| fill: #555555; | ||
| } | ||
| .d-checkbox-visual-outer { | ||
| stroke: #cccccc; | ||
| fill: white; | ||
| } | ||
| .d-disabled .d-checkbox-visual-outer { | ||
| fill: #eeeeee; | ||
| } | ||
| .d-disabled .d-checkbox-visual-inner { | ||
| fill: #999999; | ||
| } | ||
| .d-focused .d-checkbox-visual { | ||
| /* NOTE: from http://github.com/twbs/bootstrap/blob/49519e9/less/mixins/forms.less#L56 */ | ||
| -webkit-box-shadow: 0 0 8px rgba(102, 175, 233, 0.6); | ||
| -moz-box-shadow: 0 0 8px rgba(102, 175, 233, 0.6); | ||
| box-shadow: 0 0 8px rgba(102, 175, 233, 0.6); | ||
| /* interoperability with bootstrap validation states */ | ||
| /* NOTE: from http://github.com/twbs/bootstrap/blob/49519e9/less/mixins/forms.less#L26 */ | ||
| } | ||
| .d-focused .d-checkbox-visual-outer { | ||
| stroke: #66afe9; | ||
| } | ||
| .has-success .d-focused .d-checkbox-visual { | ||
| -webkit-box-shadow: 0 0 6px #67b168; | ||
| -moz-box-shadow: 0 0 6px #67b168; | ||
| box-shadow: 0 0 6px #67b168; | ||
| } | ||
| .has-success .d-focused .d-checkbox-visual-outer { | ||
| stroke: #3c763d; | ||
| } | ||
| .has-info .d-focused .d-checkbox-visual { | ||
| -webkit-box-shadow: 0 0 6px #5ea5c8; | ||
| -moz-box-shadow: 0 0 6px #5ea5c8; | ||
| box-shadow: 0 0 6px #5ea5c8; | ||
| } | ||
| .has-info .d-focused .d-checkbox-visual-outer { | ||
| stroke: #31708f; | ||
| } | ||
| .has-warning .d-focused .d-checkbox-visual { | ||
| -webkit-box-shadow: 0 0 6px #c0a16b; | ||
| -moz-box-shadow: 0 0 6px #c0a16b; | ||
| box-shadow: 0 0 6px #c0a16b; | ||
| } | ||
| .has-warning .d-focused .d-checkbox-visual-outer { | ||
| stroke: #8a6d3b; | ||
| } | ||
| .has-error .d-focused .d-checkbox-visual { | ||
| -webkit-box-shadow: 0 0 6px #ce8483; | ||
| -moz-box-shadow: 0 0 6px #ce8483; | ||
| box-shadow: 0 0 6px #ce8483; | ||
| } | ||
| .has-error .d-focused .d-checkbox-visual-outer { | ||
| stroke: #a94442; | ||
| } | ||
| .d-checkbox > input[type=checkbox] { | ||
| /* The input is not stretched so that is spans | ||
| * all over the space available inside d-checkbox */ | ||
| width: 100%; | ||
| height: 100%; | ||
| /* NOTE: we could have used opacity: 0 here but it breaks the focus */ | ||
| opacity: .01; | ||
| position: absolute; | ||
| z-index: 1; | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,60 @@ | ||
| @import "../../../../delite/themes/common/mixins"; | ||
| @import "../../../../delite/themes/bootstrap/variables"; | ||
|
|
||
|
|
||
| .d-checkbox { | ||
| margin-right: 4px; | ||
| } | ||
| .d-checkbox-styles(@state) when (@state = normal) { | ||
| @size: round(.8*@font-size-base); | ||
| width: @size; height: @size; | ||
| &-inner { | ||
| fill: @input-color; | ||
| } | ||
| &-outer { | ||
| stroke: @input-border; | ||
| fill: white; | ||
| } | ||
| } | ||
| .d-checkbox-styles(@state) when (@state = focused) { | ||
| @color-rgba: rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), .6); | ||
| /* NOTE: from http://github.com/twbs/bootstrap/blob/49519e9/less/mixins/forms.less#L56 */ | ||
| .box-shadow(0 0 8px @color-rgba); // TODO: factorize into one CSS class | ||
| &-outer { | ||
| stroke: @input-border-focus; | ||
| } | ||
|
|
||
| /* interoperability with bootstrap validation states */ | ||
| /* NOTE: from http://github.com/twbs/bootstrap/blob/49519e9/less/mixins/forms.less#L26 */ | ||
| .has-state(@validation-state, @color) { | ||
| .has-@{validation-state} & { | ||
| .box-shadow(0 0 6px lighten(@color, 20%)); | ||
| &-outer { | ||
| stroke: @color; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .has-state(success, @state-success-text); | ||
| .has-state(info, @state-info-text); | ||
| .has-state(warning, @state-warning-text); | ||
| .has-state(error, @state-danger-text); | ||
| } | ||
| .d-checkbox-styles(@state) when (@state = disabled) { | ||
| &-outer { | ||
| fill: @input-bg-disabled; | ||
| } | ||
| &-inner { | ||
| fill: @btn-link-disabled-color; | ||
| } | ||
| } | ||
|
|
||
| /* interoperability with bootstrap form layouts */ | ||
| .checkbox, .checkbox-inline { | ||
| .d-checkbox { | ||
| margin-left: -20px; | ||
| margin-right: 0; | ||
| position: absolute; | ||
| } | ||
| } | ||
| @import "../Checkbox_template"; |
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
d-resetset font, line-height and color. This looks not needed here if only padding and margin must be set. Same comment for radiobutton.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
oversight on my part.