smart-webcomponents-community/source/styles/default/scss/grid/_checkbox.css

Web Components & Custom Elements Community Version

[editor="checkBox"] .smart-label,
[template="checkBox"] .smart-label,
[checkbox] .smart-label,
[check-boxes_visible] [has-toggle-button] .smart-label {
  display: flex;
  padding-bottom: 0px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
[editor="checkBox"] .smart-label [checkbox],
[template="checkBox"] .smart-label [checkbox],
[checkbox] .smart-label [checkbox],
[check-boxes_visible] [has-toggle-button] .smart-label [checkbox] {
  display: flex;
  padding-bottom: 0px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
[editor="checkBox"] .smart-input:not(.smart-grid-cell-editor),
[template="checkBox"] .smart-input:not(.smart-grid-cell-editor),
[checkbox] .smart-input:not(.smart-grid-cell-editor),
[check-boxes_visible] [has-toggle-button] .smart-input:not(.smart-grid-cell-editor) {
  width: calc(-2px + var(--smart-check-box-default-size));
  height: calc(-2px + var(--smart-check-box-default-size));
  line-height: var(--smart-check-box-default-size);
  box-sizing: initial;
  position: relative;
  border-style: solid;
  padding: 2px;
  border-width: var(--smart-border-width);
  border-radius: var(--smart-border-radius);
  font-family: inherit;
  font-size: 12px;
  background-repeat: no-repeat;
  border-color: var(--smart-border);
  background-color: transparent;
  color: var(--smart-background-color);
  display: block;
  outline: none;
}
[editor="checkBox"] .smart-input:not(.smart-grid-cell-editor):after,
[template="checkBox"] .smart-input:not(.smart-grid-cell-editor):after,
[checkbox] .smart-input:not(.smart-grid-cell-editor):after,
[check-boxes_visible] [has-toggle-button] .smart-input:not(.smart-grid-cell-editor):after {
  cursor: pointer;
  content: inherit;
  text-align: center;
  width: 100%;
  height: 100%;
  font-family: var(--smart-font-family-icon);
  font-weight: normal;
  text-decoration: inherit;
  font-variant: normal;
  text-transform: none;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 2px;
  outline: none;
}
[editor="checkBox"] .smart-input:not(.smart-grid-cell-editor):hover,
[template="checkBox"] .smart-input:not(.smart-grid-cell-editor):hover,
[checkbox] .smart-input:not(.smart-grid-cell-editor):hover,
[check-boxes_visible] [has-toggle-button] .smart-input:not(.smart-grid-cell-editor):hover {
  border-color: var(--smart-ui-state-border-hover);
  background-color: var(--smart-ui-state-hover);
  color: var(--smart-ui-state-color-hover);
}
[editor="checkBox"] .smart-input:not(.smart-grid-cell-editor)[checked],
[template="checkBox"] .smart-input:not(.smart-grid-cell-editor)[checked],
[checkbox] .smart-input:not(.smart-grid-cell-editor)[checked],
[check-boxes_visible] [has-toggle-button] .smart-input:not(.smart-grid-cell-editor)[checked] {
  border-color: var(--smart-ui-state-border-active);
  background-color: var(--smart-ui-state-active);
  color: var(--smart-ui-state-color-active);
}
[editor="checkBox"] .smart-input:not(.smart-grid-cell-editor)[checked]:after,
[template="checkBox"] .smart-input:not(.smart-grid-cell-editor)[checked]:after,
[checkbox] .smart-input:not(.smart-grid-cell-editor)[checked]:after,
[check-boxes_visible] [has-toggle-button] .smart-input:not(.smart-grid-cell-editor)[checked]:after {
  content: var(--smart-icon-check);
}
[editor="checkBox"] .smart-input.smart-grid-check-box-cell-editor,
[template="checkBox"] .smart-input.smart-grid-check-box-cell-editor,
[checkbox] .smart-input.smart-grid-check-box-cell-editor,
[check-boxes_visible] [has-toggle-button] .smart-input.smart-grid-check-box-cell-editor {
  width: calc(-2px + var(--smart-check-box-default-size));
  height: calc(-2px + var(--smart-check-box-default-size));
  line-height: var(--smart-check-box-default-size);
  box-sizing: initial;
  position: relative;
  border-style: solid;
  padding: 2px;
  border-width: var(--smart-border-width);
  border-radius: var(--smart-border-radius);
  font-family: inherit;
  font-size: 12px;
  background-repeat: no-repeat;
  border-color: var(--smart-border);
  background-color: transparent;
  color: var(--smart-background-color);
  display: block;
  outline: none;
}
[editor="checkBox"] .smart-input.smart-grid-check-box-cell-editor:after,
[template="checkBox"] .smart-input.smart-grid-check-box-cell-editor:after,
[checkbox] .smart-input.smart-grid-check-box-cell-editor:after,
[check-boxes_visible] [has-toggle-button] .smart-input.smart-grid-check-box-cell-editor:after {
  cursor: pointer;
  content: inherit;
  text-align: center;
  width: 100%;
  height: 100%;
  font-family: var(--smart-font-family-icon);
  font-weight: normal;
  text-decoration: inherit;
  font-variant: normal;
  text-transform: none;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 2px;
  outline: none;
}
[editor="checkBox"] .smart-input.smart-grid-check-box-cell-editor:hover,
[template="checkBox"] .smart-input.smart-grid-check-box-cell-editor:hover,
[checkbox] .smart-input.smart-grid-check-box-cell-editor:hover,
[check-boxes_visible] [has-toggle-button] .smart-input.smart-grid-check-box-cell-editor:hover {
  border-color: var(--smart-ui-state-border-hover);
  background-color: var(--smart-ui-state-hover);
  color: var(--smart-ui-state-color-hover);
}
[editor="checkBox"] .smart-input.smart-grid-check-box-cell-editor[checked],
[template="checkBox"] .smart-input.smart-grid-check-box-cell-editor[checked],
[checkbox] .smart-input.smart-grid-check-box-cell-editor[checked],
[check-boxes_visible] [has-toggle-button] .smart-input.smart-grid-check-box-cell-editor[checked] {
  border-color: var(--smart-ui-state-border-active);
  background-color: var(--smart-ui-state-active);
  color: var(--smart-ui-state-color-active);
}
[editor="checkBox"] .smart-input.smart-grid-check-box-cell-editor[checked]:after,
[template="checkBox"] .smart-input.smart-grid-check-box-cell-editor[checked]:after,
[checkbox] .smart-input.smart-grid-check-box-cell-editor[checked]:after,
[check-boxes_visible] [has-toggle-button] .smart-input.smart-grid-check-box-cell-editor[checked]:after {
  content: var(--smart-icon-check);
}

smart-grid-column[checkbox],
smart-grid-cell[checkbox] {
  display: flex;
  padding-bottom: 0px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
smart-grid-column[checkbox][selected] .smart-input:not(.smart-grid-cell-editor),
smart-grid-cell[checkbox][selected] .smart-input:not(.smart-grid-cell-editor) {
  border-color: var(--smart-ui-state-border-active);
  background-color: var(--smart-ui-state-active);
  color: var(--smart-ui-state-color-active);
}
smart-grid-column[checkbox][selected] .smart-input:not(.smart-grid-cell-editor):after,
smart-grid-cell[checkbox][selected] .smart-input:not(.smart-grid-cell-editor):after {
  content: var(--smart-icon-check);
}
smart-grid-column[checkbox][selected="indeterminate"] .smart-input:not(.smart-grid-cell-editor):after, smart-grid-column[checkbox][checked="indeterminate"]:after,
smart-grid-cell[checkbox][selected="indeterminate"] .smart-input:not(.smart-grid-cell-editor):after,
smart-grid-cell[checkbox][checked="indeterminate"]:after {
  top: 0;
  background-color: var(--smart-ui-state-color-active);
}

[has-toggle-button][selected] [checkbox] .smart-input[checked] {
  border-color: var(--smart-ui-state-border-hover);
  background-color: var(--smart-ui-state-hover);
  color: var(--smart-ui-state-color-hover);
}

[freeze][checkbox][auto-show] .smart-input {
  opacity: 0;
  transition: opacity ease-in-out 0.2s;
}
[freeze][checkbox][auto-show][selected] .smart-input {
  opacity: 1;
  border-color: var(--smart-border);
}

[radioButton][selected] .smart-input:after {
  content: var(--smart-icon-radio);
}

[editor="checkBox"] .smart-input {
  left: -1px;
}
[editor="checkBox"] .smart-input:focus {
  border-color: var(--smart-ui-state-border-active);
}
[editor="checkBox"]:not([readonly]) .smart-input:focus, [editor="checkBox"]:not([readonly]) .smart-input:hover {
  border-color: var(--smart-ui-state-border-hover);
  background-color: var(--smart-ui-state-hover);
  color: var(--smart-ui-state-color-hover);
}

smart-grid-row:not([selected]):not(:hover) [header][checkbox][auto-show]:not(:hover) .smart-input {
  opacity: 0;
  transition: opacity ease-in-out 0.2s;
}

.smart-grid-dialog-editor[checkbox][selected="indeterminate"] .smart-input:after, .smart-grid-dialog-editor[checkbox][checked="indeterminate"] .smart-input:after,
smart-grid-cell[checkbox][selected="indeterminate"] .smart-input:after,
smart-grid-cell[checkbox][checked="indeterminate"] .smart-input:after,
smart-grid-column[checkbox][selected="indeterminate"] .smart-input:after,
smart-grid-column[checkbox][checked="indeterminate"] .smart-input:after {
  margin: 14%;
  width: 70%;
  height: 70%;
  content: '';
  background-color: var(--smart-ui-state-color-active);
  box-sizing: border-box;
  top: 0px;
  border-radius: 0px;
}
.smart-grid-dialog-editor div[checkbox] .smart-input[checked="indeterminate"]:after,
smart-grid-cell div[checkbox] .smart-input[checked="indeterminate"]:after,
smart-grid-column div[checkbox] .smart-input[checked="indeterminate"]:after {
  margin: 14%;
  width: 70% !important;
  height: 70% !important;
  content: '';
  background-color: var(--smart-ui-state-color-active);
  box-sizing: border-box;
  top: 0px !important;
  border-radius: 0px;
}

.smart-grid-cell-editor.smart-grid-text-area-cell-editor .smart-input, .smart-grid-cell-editor.smart-grid-number-input-cell-editor .smart-input {
  width: calc(100% - var(--smart-editor-addon-width));
  border: none;
  padding: var(--smart-editor-label-padding);
  resize: none;
  border-radius: 0px;
  background: inherit;
  color: inherit;
}
.smart-grid-cell-editor.smart-grid-number-input-cell-editor .smart-input {
  text-align: right;
  height: 100%;
}
.smart-grid-cell-editor.smart-grid-number-input-cell-editor .smart-input[type=number] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
}
.smart-grid-cell-editor.smart-grid-number-input-cell-editor .smart-input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*# sourceMappingURL=_checkbox.css.map */