vault/ui/app/styles/core/checkbox-and-radio.scss
hashicorp-copywrite[bot] 0b12cdcfd1
[COMPLIANCE] License changes (#22290)
* Adding explicit MPL license for sub-package.

This directory and its subdirectories (packages) contain files licensed with the MPLv2 `LICENSE` file in this directory and are intentionally licensed separately from the BSL `LICENSE` file at the root of this repository.

* Adding explicit MPL license for sub-package.

This directory and its subdirectories (packages) contain files licensed with the MPLv2 `LICENSE` file in this directory and are intentionally licensed separately from the BSL `LICENSE` file at the root of this repository.

* Updating the license from MPL to Business Source License.

Going forward, this project will be licensed under the Business Source License v1.1. Please see our blog post for more details at https://hashi.co/bsl-blog, FAQ at www.hashicorp.com/licensing-faq, and details of the license at www.hashicorp.com/bsl.

* add missing license headers

* Update copyright file headers to BUS-1.1

* Fix test that expected exact offset on hcl file

---------

Co-authored-by: hashicorp-copywrite[bot] <110428419+hashicorp-copywrite[bot]@users.noreply.github.com>
Co-authored-by: Sarah Thompson <sthompson@hashicorp.com>
Co-authored-by: Brian Kassouf <bkassouf@hashicorp.com>
2023-08-10 18:14:03 -07:00

125 lines
2.7 KiB
SCSS

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
// This file defines the styles for .checkbox, .radio and .b-checkboxes. The prefix "b" comes from Bulma.
@import '../sass-svg-uri/svg-uri';
// checkbox and radio styling
.checkbox,
.radio {
cursor: pointer;
display: inline-block;
line-height: 1.25;
position: relative;
}
.checkbox input,
.radio input {
cursor: pointer;
}
.checkbox:hover,
.radio:hover {
color: hsl(0, 0%, 21%);
}
.checkbox[disabled],
.radio[disabled],
.checkbox input[disabled],
.radio input[disabled] {
color: $grey;
cursor: not-allowed;
}
// radio only styling
.radio + .radio {
margin-left: 0.5em;
}
// one-off checkbox class
.checkbox-help-text {
color: $ui-gray-700;
font-size: $size-7;
padding-left: 28px;
}
// b-checkbox styling
.b-checkbox {
position: relative;
}
.b-checkbox label::before {
background-color: $white;
border-radius: 3px;
border: 1px solid $ui-gray-300;
content: '';
height: 17px;
left: 0;
position: absolute;
top: 1px;
transition: background 0.1s ease-in-out;
width: 17px;
}
.b-checkbox input[type='checkbox']:checked + label::before {
border-color: $blue;
}
.b-checkbox input[type='checkbox']:checked + label::after,
.b-checkbox input[type='radio']:checked + label::after {
font-family: $family-monospace;
/*checkmark from ionicons*/
content: svg-uri(
'<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 512 512" fill="#{$blue}"><path d="M461.6 109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4-2.4 0-4.6 1-6.3 2.5L194.5 323s-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9s-6.4 3.1-8.7 5.4c-1.7 1.8-29.7 31.2-43.5 45.8-.8.9-1.3 1.4-2 2.1-1.2 1.7-2 3.6-2 5.7 0 2.2.8 4 2 5.7l2.8 2.6s139.3 133.8 141.6 136.1c2.3 2.3 5.1 5.2 9.2 5.2 4 0 7.3-4.3 9.2-6.2l249.1-320c1.2-1.7 2-3.6 2-5.8 0-2.5-1-4.6-2.4-6.4z"/></svg>'
);
}
.b-checkbox input[type='checkbox'],
.b-checkbox input[type='radio'] {
cursor: pointer;
opacity: 0;
z-index: 1;
}
.b-checkbox label::after {
color: $ui-gray-800;
font-size: 12px;
height: 16px;
left: 3px;
position: absolute;
top: 3px;
width: 16px;
}
.b-checkbox label {
display: inline;
line-height: 1;
margin-left: 0.5rem;
padding-left: 5px;
}
.b-checkbox input[type='checkbox']:focus + label::before,
.b-checkbox input[type='radio']:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.b-checkbox input[type='checkbox']:disabled + label::before,
.b-checkbox input[type='radio']:disabled + label::before {
background-color: $ui-gray-100;
cursor: not-allowed;
}
.b-checkbox input[type='checkbox']:disabled + label,
.b-checkbox input[type='radio']:disabled + label {
opacity: 0.65;
}
.b-checkbox > .sub-text {
padding-left: 2rem;
}