diff options
Diffstat (limited to 'src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss')
-rw-r--r-- | src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss new file mode 100644 index 000000000..dd529777a --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss @@ -0,0 +1,100 @@ +@use './src/styles/vendor/variables' as vv; + +/* Reset checkbox success color */ +.was-validated .form-check-input:valid, +.form-check-input.is-valid { + border-color: rgba(vv.$primary, 0.8); + + &:checked { + background-color: vv.$primary; + border-color: rgba(vv.$primary, 0.8); + box-shadow: 0 0 3px 2px rgba(vv.$primary, 0.5); + } + + &:focus { + border-color: rgba(vv.$primary, 0.8); + box-shadow: 0 0 3px 2px rgba(vv.$primary, 0.5); + } + + ~ .form-check-label { + color: initial; + } + + &:checked ~ .form-check-label::before { + background-color: $component-active-bg; + } + + ~ .form-check-label::before { + border-color: rgba(vv.$primary, 0.8); + } + + &:focus ~ .custom-control-label::before { + box-shadow: 0 0 3px 2px rgba(vv.$primary, 0.5); + } + + &:focus:not(:checked) ~ .custom-control-label::before { + border-color: rgba(vv.$primary, 0.8); + } +} + +/* Buttons */ +.btn-light { + background-color: vv.$white; + border-color: vv.$gray-400 !important; + + &:hover { + background-color: vv.$gray-300; + border-color: vv.$gray-600 !important; + } + + &:disabled { + background-color: vv.$gray-200; + border-color: vv.$gray-400 !important; + } +} + +.btn-primary { + @extend .btn-accent; +} + +// We have some inputs that don't have a corresponding formControlName, +// to be able to get the same styling and no JS errors we need use a different +// class name +.cd-form-control { + @extend .form-control; +} + +.btn { + &, + &:active, + &.active { + &:focus, + &.focus { + outline: 0; + } + } + + &.disabled { + border: 0; + box-shadow: none; + } +} + +.btn-default { + @extend .btn-light; +} + +.btn-primary .badge { + background-color: vv.$gray-200; + color: vv.$primary; +} + +.btn-group > .btn > i.fa, +.cd-datatable-actions button.btn i.fa { + /** Add space between icon and text */ + margin-right: 5px; +} + +.card-footer button.btn:not(:first-child) { + margin-left: 5px; +} |