bd-widgets/less/main.css

a library of user interface widgets built with Backdraft

@charset "UTF-8";
@import "icomoon/style.css";
.bd-rbox {
  position: relative;
}
body {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  color: #222222;
  background-color: #f2f2f2;
  margin: 0;
  padding: 0;
}
input {
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
}
.container.Button,
.container.StateButton,
.container.ReactComponent {
  display: inline-block;
  margin: 1em;
  padding: 1em;
  border: 1px solid #CCC;
}
.container.ReactComponent {
  max-width: 20em;
  min-width: 12em;
}
.bd-meta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.15em;
  border: none;
  font-size: 125%;
}
.bd-meta.bd-vStat-valid:before {
  color: #00bc00;
  content: "\e910";
}
.bd-meta.bd-vStat-contextInfo:before,
.bd-meta.scalarInfo:before {
  color: #00bc00;
  content: "\ea08";
}
.bd-meta.bd-vStat-contextWarn:before,
.bd-meta.bd-vStat-scalarWarn:before {
  color: #dd9b00;
  content: "\ea07";
}
.bd-meta.bd-vStat-contextError:before,
.bd-meta.bd-vStat-scalarError:before {
  color: red;
  content: "\ea0d";
}
.bd-button {
  /* center the content both ways */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 1em;
  color: #222222;
  background: #9fb1ce;
  margin: 0.15em;
  padding: 1em;
  border: 1px solid #5a739b;
  border-radius: 5px;
  cursor: pointer;
}
.bd-button > div {
  display: inline-block;
  padding: 0;
  text-align: center;
}
.bd-button div:after {
  padding: 5px;
}
.bd-button:hover,
.bd-button.tickle:hover {
  color: #222222;
  background: #bacff2;
  border-color: #bacff2;
  -webkit-animation-name: none;
  animation-name: none;
}
.bd-button.tickle {
  background-image: none;
  animation-name: yellowTickle;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.bd-button.bd-disabled,
.bd-button.tickle.bd-disabled,
.bd-button.bd-disabled:hover,
.bd-button.tickle.bd-disabled:hover {
  color: #a9a9a9;
  background: #dddddd;
  border-color: #dddddd;
  cursor: default;
  text-shadow: 1px 2px 1px white;
}
@keyframes yellowTickle {
  0% {
    background: white;
  }
  50% {
    background: yellow;
  }
  100% {
    background: white;
  }
}
.bd-state-button {
  display: inline-flex;
  color: #222222;
  background: #9fb1ce;
  margin: 0.15em;
  padding: 0 1em;
  border: 1px solid #5a739b;
  border-radius: 0;
  cursor: pointer;
}
.bd-state-button:hover,
.bd-state-button.tickle:hover {
  color: #222222;
  background: #bacff2;
  border-color: #bacff2;
  -webkit-animation-name: none;
  animation-name: none;
}
.bd-state-button.checkbox {
  padding: 0.2em;
  background-color: inherit;
  border: 1px solid black;
  padding: 3px;
  font-weight: bold;
}
.bd-state-button.checkbox > div::selection {
  background-color: inherit;
  color: inherit;
}
.bd-state-button.checkbox > div:nth-child(2) {
  height: 1em;
  width: 1em;
  text-align: center;
}
.bd-state-button.radio-button {
  padding: 0.2em;
  border: none;
  background-color: inherit;
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.bd-state-button.radio-button div::selection {
  background-color: inherit;
  color: inherit;
}
.bd-state-button.checkbox.state-null,
.bd-state-button.radio-button.state-null {
  color: #c6be1b;
}
.bd-state-button.bd-disabled,
.bd-state-button.tickle.bd-disabled,
.bd-state-button.bd-disabled:hover,
.bd-state-button.tickle.bd-disabled:hover {
  color: #a9a9a9;
  background: #dddddd;
  border-color: #dddddd;
  cursor: default;
  text-shadow: 1px 2px 1px white;
}
.bd-input {
  /* center the content both ways */
  display: inline-flex;
  align-items: center;
  margin: 0.2em;
  border: 1px solid #dddddd;
  border-radius: 5px;
  padding: 0.2em;
  color: #222222;
  background: #f2f2f2;
}
.bd-input input {
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  min-width: 10em;
  padding: 2px;
  border: 0;
  color: #222222;
  background: #f2f2f2;
}
.bd-input.bd-focused {
  color: #222222;
  background: white;
  border-color: #dddddd;
}
.bd-input.bd-focused input {
  color: #222222;
  background: white;
}
.bd-input.bd-disabled,
.bd-input.bd-disabled.bd-focused {
  color: #222222;
  background: #dddddd;
  border-color: #dddddd;
}
.bd-input.bd-disabled input,
.bd-input.bd-disabled.bd-focused input {
  color: #222222;
  background: #dddddd;
}
.bd-listBox {
  display: inline-block;
  color: #222222;
  background: #f2f2f2;
  border-color: #dddddd;
  border-width: 1px;
  border-style: solid;
  min-width: 10em;
  margin: 1em;
  overflow-y: auto;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.bd-listBox.fixed {
  overflow-y: hidden;
}
.bd-listBox .no-items {
  display: none;
}
.bd-listBox.no-data .no-items {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #CCCCCC;
  margin: 2em;
}
.bd-listBox .up-arrow,
.bd-listBox .down-arrow {
  justify-content: center;
  align-items: center;
  font-size: 200%;
  padding: 0.05em;
  color: #222222;
  background: #9fb1ce;
  border-color: #5a739b;
}
.bd-listBox .up-arrow:hover,
.bd-listBox .down-arrow:hover {
  color: #222222;
  background: #bacff2;
  border-color: #bacff2;
}
.bd-listBox.arrows .up-arrow,
.bd-listBox.arrows .down-arrow {
  display: flex;
}
.bd-listBox .items > * {
  border-top-width: 1px;
  padding: 3px;
}
.bd-listBox .items > * .mouseOverItem {
  color: #222222;
  background: white;
}
.bd-listBox .items > * .focusedItem {
  color: #222222;
  background: white;
}
.bd-listBox .items > * .selectedItem {
  color: #222222;
  background: white;
}
.bd-listBox .items > *:first-child {
  border-top-width: 0;
}
.bd-listBox.query-before .up-arrow,
.bd-listBox.query-after .down-arrow {
  color: #222222;
  background: yellow;
  border-color: #bacff2;
}
.bd-listBox.bd-disabled .items > * .mouseOverItem {
  color: #222222;
  background: #dddddd;
}
.bd-listBox.bd-disabled .items > * .focusedItem {
  color: #222222;
  background: #dddddd;
}
.bd-listBox.bd-disabled .items > * .selectedItem {
  color: #222222;
  background: #dddddd;
}
.bd-listBox.bd-disabled.query-before .up-arrow,
.bd-listBox.bd-disabled.query-after .down-arrow {
  color: #222222;
  background: #dddddd;
  border-color: #dddddd;
}
.bd-comboBox {
  display: inline-flex;
  align-items: center;
  margin: 0.2em;
  border: 1px solid #dddddd;
  border-radius: 5px;
  padding: 0.2em;
  color: #222222;
  background: #f2f2f2;
}
.bd-comboBox .bd-rbox {
  flex-basis: 1px;
  flex-grow: 1;
  display: inline-flex;
}
.bd-comboBox.bd-listBox-visible.below {
  border-bottom-width: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.bd-comboBox.bd-listBox-visible.above {
  border-top-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.bd-comboBox .bd-static,
.bd-comboBox input {
  flex-basis: 1px;
  flex-grow: 1;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  border: 0;
  color: #222222;
  background: #f2f2f2;
}
.bd-comboBox .arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  margin: 0;
  padding: 3px;
  border-radius: 5px;
}
.bd-comboBox .arrow:hover {
  background: #bacff2;
}
.bd-comboBox.bd-focused {
  color: #222222;
  background: white;
  border-color: #dddddd;
}
.bd-comboBox.bd-focused .bd-static,
.bd-comboBox.bd-focused input {
  color: #222222;
  background: white;
}
.bd-comboBox.bd-focused .arrow:hover {
  color: #222222;
  background: #bacff2;
}
.bd-comboBox.bd-disabled,
.bd-comboBox.bd-disabled.bd-focused {
  color: #222222;
  background: #dddddd;
  border-color: #dddddd;
}
.bd-comboBox.bd-disabled .bd-static,
.bd-comboBox.bd-disabled.bd-focused .bd-static,
.bd-comboBox.bd-disabled input,
.bd-comboBox.bd-disabled.bd-focused input {
  color: #222222;
  background: #dddddd;
}
.bd-comboBox.bd-disabled .arrow,
.bd-comboBox.bd-disabled.bd-focused .arrow,
.bd-comboBox.bd-disabled .arrow:hover,
.bd-comboBox.bd-disabled.bd-focused .arrow:hover {
  color: #a9a9a9;
  background: #dddddd;
  border-color: #dddddd;
}
.bd-listBox.bd-for-combo {
  position: fixed;
  margin: 0;
  background: #dddddd;
  border: 1px solid #dddddd;
  border-radius: 5px;
  opacity: 1;
  max-height: 15em;
}
.bd-listBox.bd-for-combo.below {
  border-top-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.bd-listBox.bd-for-combo.above {
  border-bottom-width: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.bd-listBox.bd-for-combo .items > div {
  color: #222222;
  background: #f2f2f2;
}
.bd-listBox.bd-for-combo .items > div.mouseOverItem,
.bd-listBox.bd-for-combo .items > div.focusedItem,
.bd-listBox.bd-for-combo .items > div .focusedItem {
  color: #222222;
  background: #bacff2;
}
.bd-dialog {
  margin: 0;
  border: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bd-dialog .bd-inner {
  color: #222222;
  background: #f2f2f2;
  border: 4px solid #9fb1ce;
  padding: 0;
}
.bd-dialog .bd-title-bar {
  background: #9fb1ce;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bd-dialog .bd-title-bar .bd-button {
  padding: 0 5px;
  border-radius: 10px;
  font-size: 80%;
}
.bd-dialog .bd-body {
  padding: 1em;
  overflow: auto;
}
.bd-dialog .bd-bottom-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 1em;
}
.bd-dialog .bd-bottom-buttons .bd-button {
  width: 50px;
}
.bd-labeled {
  margin: 1em;
  padding: 0.7em;
  border: 1px solid #dddddd;
  border-radius: 5px;
  position: relative;
}
.bd-labeled label {
  color: #777777;
  background-color: #f2f2f2;
  position: absolute;
  top: -1em;
  left: 0.3em;
  padding: 0 0.2em;
  font-size: 80%;
}
.bd-dialog .bd-labeled label {
  background-color: #f2f2f2;
}
/*# sourceMappingURL=http://localhost:8080/altoviso/bd-widgests/less/main.css.map */