diff options
| -rw-r--r-- | ishtar_common/widgets.py | 14 | ||||
| -rw-r--r-- | scss/custom.scss | 1 | ||||
| -rw-r--r-- | scss/switch.scss | 187 |
3 files changed, 202 insertions, 0 deletions
diff --git a/ishtar_common/widgets.py b/ishtar_common/widgets.py index ec3f8b011..2df06cf21 100644 --- a/ishtar_common/widgets.py +++ b/ishtar_common/widgets.py @@ -260,6 +260,20 @@ class DeleteWidget(forms.CheckboxInput): return mark_safe(output) +class SwitchWidget(forms.CheckboxInput): + def render(self, name, value, attrs=None, renderer=None): + attrs = self.build_attrs( + attrs, {"name": name, "value": '0', + 'class': "switch", + 'type': 'checkbox'} + ) + final_attrs = flatatt(attrs) + output = u"""<span class="switch"> + <input{}> +</span>""".format(final_attrs, attrs['id']) + return mark_safe(output) + + class ImageFileInput(ClearableFileInput): template_name = 'widgets/image_input.html' NO_FORM_CONTROL = True diff --git a/scss/custom.scss b/scss/custom.scss index ac04f70b9..d90a41ad6 100644 --- a/scss/custom.scss +++ b/scss/custom.scss @@ -5,6 +5,7 @@ $link-hover-color: darken($link-color, 10%); $link-hover-decoration: none; @import "bootstrap-src/scss/bootstrap"; +@import "switch.scss"; $action-color: #ffe484; $action-button-color: darken($action-color, 20%); diff --git a/scss/switch.scss b/scss/switch.scss new file mode 100644 index 000000000..bb7d4951a --- /dev/null +++ b/scss/switch.scss @@ -0,0 +1,187 @@ +// +// Switches for Bootstrap 4. +// + +$font-size-base: 1rem; +$font-size-lg: ($font-size-base * 1.25); +$font-size-sm: ($font-size-base * .875); +$input-height: 2.375rem; +$input-height-sm: 1.9375rem; +$input-height-lg: 3rem; +$input-btn-focus-width: .2rem; +$custom-control-indicator-bg: #dee2e6; +$custom-control-indicator-disabled-bg: #e9ecef; +$custom-control-description-disabled-color: #868e96; +$white: white; +$theme-colors: ( + 'primary': #08d +); + +// +// These variables can be used to customize the switch component. +// +$switch-height: calc(#{$input-height} * .8) !default; +$switch-height-sm: calc(#{$input-height-sm} * .8) !default; +$switch-height-lg: calc(#{$input-height-lg} * .8) !default; +$switch-border-radius: $switch-height !default; +$switch-bg: $custom-control-indicator-bg !default; +$switch-checked-bg: map-get($theme-colors, 'primary') !default; +$switch-disabled-bg: $custom-control-indicator-disabled-bg !default; +$switch-disabled-color: $custom-control-description-disabled-color !default; +$switch-thumb-bg: $white !default; +$switch-thumb-border-radius: 50% !default; +$switch-thumb-padding: 2px !default; +$switch-focus-box-shadow: 0 0 0 $input-btn-focus-width rgba(map-get($theme-colors, 'primary'), .25); +$switch-danger-focus-box-shadow: 0 0 0 $input-btn-focus-width rgba($danger, .25) ; +$switch-transition: .2s all !default; + +.switch { + font-size: $font-size-base; + position: relative; + + input { + position: absolute; + height: 1px; + width: 1px; + background: none; + border: 0; + clip: rect(0 0 0 0); + clip-path: inset(50%); + overflow: hidden; + padding: 0; + + + label { + position: relative; + min-width: calc(#{$switch-height} * 2); + border-radius: $switch-border-radius; + height: $switch-height; + line-height: $switch-height; + display: inline-block; + cursor: pointer; + outline: none; + user-select: none; + vertical-align: middle; + text-indent: calc(calc(#{$switch-height} * 2) + .5rem); + } + + + label::before, + + label::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: calc(#{$switch-height} * 2); + bottom: 0; + display: block; + } + + + label::before { + right: 0; + background-color: $switch-bg; + border-radius: $switch-border-radius; + transition: $switch-transition; + } + + + label::after { + top: $switch-thumb-padding; + left: $switch-thumb-padding; + width: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2)); + height: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2)); + border-radius: $switch-thumb-border-radius; + background-color: $switch-thumb-bg; + transition: $switch-transition; + } + + &:checked + label::before { + background-color: $switch-checked-bg; + } + + &:checked + label::after { + margin-left: $switch-height; + } + + &:focus + label::before { + outline: none; + box-shadow: $switch-focus-box-shadow; + } + + &:disabled + label { + color: $switch-disabled-color; + cursor: not-allowed; + } + + &:disabled + label::before { + background-color: $switch-disabled-bg; + } + } + + // Small variation + &.switch-sm { + font-size: $font-size-sm; + + input { + + label { + min-width: calc(#{$switch-height-sm} * 2); + height: $switch-height-sm; + line-height: $switch-height-sm; + text-indent: calc(calc(#{$switch-height-sm} * 2) + .5rem); + } + + + label::before { + width: calc(#{$switch-height-sm} * 2); + } + + + label::after { + width: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2)); + height: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2)); + } + + &:checked + label::after { + margin-left: $switch-height-sm; + } + } + } + + // Large variation + &.switch-lg { + font-size: $font-size-lg; + + input { + + label { + min-width: calc(#{$switch-height-lg} * 2); + height: $switch-height-lg; + line-height: $switch-height-lg; + text-indent: calc(calc(#{$switch-height-lg} * 2) + .5rem); + } + + + label::before { + width: calc(#{$switch-height-lg} * 2); + } + + + label::after { + width: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2)); + height: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2)); + } + + &:checked + label::after { + margin-left: $switch-height-lg; + } + } + } + + + .switch { + margin-left: 1rem; + } +} + +.switch.danger{ + input { + &:checked + label::before { + background-color: $danger; + } + + &:focus + label::before { + box-shadow: $switch-danger-focus-box-shadow; + } + } +}
\ No newline at end of file |