bytesforce-form-render/lib/form-render-core/src/atom.css

通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成

.fr-container {
  /* Resets */
  /*
    This will set table to full width and then
    all cells will be equal width
  */
  /* 1. Fix for Chrome 44 bug.
    * https://code.google.com/p/chromium/issues/detail?id=506893 */
  /* Height Percentages - Based off of height of parent */
  /* Screen Height Percentage */
  /* String Properties */
  /* Max Width Percentages */
  /* Max Width Scale */
  /* Max Width String Properties */
}
.fr-container .outline {
  outline: 1px solid;
}
.fr-container .outline-transparent {
  outline: 1px solid transparent;
}
.fr-container .outline-0 {
  outline: 0;
}
.fr-container .ba {
  border-style: solid;
  border-width: 1px;
}
.fr-container .bt {
  border-top-style: solid;
  border-top-width: 1px;
}
.fr-container .br {
  border-right-style: solid;
  border-right-width: 1px;
}
.fr-container .bb {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.fr-container .bl {
  border-left-style: solid;
  border-left-width: 1px;
}
.fr-container .bn {
  border-style: none;
  border-width: 0;
}
.fr-container .br0 {
  border-radius: 0;
}
.fr-container .br1 {
  border-radius: 0.125rem;
}
.fr-container .br2 {
  border-radius: 0.25rem;
}
.fr-container .br3 {
  border-radius: 0.5rem;
}
.fr-container .br4 {
  border-radius: 1rem;
}
.fr-container .br-100 {
  border-radius: 100%;
}
.fr-container .br-pill {
  border-radius: 9999px;
}
.fr-container .br--bottom {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.fr-container .br--top {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.fr-container .br--right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.fr-container .br--left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.fr-container .b--dotted {
  border-style: dotted;
}
.fr-container .b--dashed {
  border-style: dashed;
}
.fr-container .b--solid {
  border-style: solid;
}
.fr-container .b--none {
  border-style: none;
}
.fr-container .b--black-10 {
  border-color: rgba(0, 0, 0, 0.1);
}
.fr-container .b--black-20 {
  border-color: rgba(0, 0, 0, 0.2);
}
.fr-container .b--black-30 {
  border-color: rgba(0, 0, 0, 0.3);
}
.fr-container .bw0 {
  border-width: 0;
}
.fr-container .bw1 {
  border-width: 0.125rem;
}
.fr-container .bw2 {
  border-width: 0.25rem;
}
.fr-container .bw3 {
  border-width: 0.5rem;
}
.fr-container .bw4 {
  border-width: 1rem;
}
.fr-container .bw5 {
  border-width: 2rem;
}
.fr-container .bt-0 {
  border-top-width: 0;
}
.fr-container .br-0 {
  border-right-width: 0;
}
.fr-container .bb-0 {
  border-bottom-width: 0;
}
.fr-container .bl-0 {
  border-left-width: 0;
}
.fr-container .shadow-1 {
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
}
.fr-container .shadow-2 {
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
}
.fr-container .shadow-3 {
  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
}
.fr-container .shadow-4 {
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
}
.fr-container .shadow-5 {
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.fr-container .top-0 {
  top: 0;
}
.fr-container .right-0 {
  right: 0;
}
.fr-container .bottom-0 {
  bottom: 0;
}
.fr-container .left-0 {
  left: 0;
}
.fr-container .top-1 {
  top: 1rem;
}
.fr-container .right-1 {
  right: 1rem;
}
.fr-container .bottom-1 {
  bottom: 1rem;
}
.fr-container .left-1 {
  left: 1rem;
}
.fr-container .top-2 {
  top: 2rem;
}
.fr-container .right-2 {
  right: 2rem;
}
.fr-container .bottom-2 {
  bottom: 2rem;
}
.fr-container .left-2 {
  left: 2rem;
}
.fr-container .top--1 {
  top: -1rem;
}
.fr-container .right--1 {
  right: -1rem;
}
.fr-container .bottom--1 {
  bottom: -1rem;
}
.fr-container .left--1 {
  left: -1rem;
}
.fr-container .top--2 {
  top: -2rem;
}
.fr-container .right--2 {
  right: -2rem;
}
.fr-container .bottom--2 {
  bottom: -2rem;
}
.fr-container .left--2 {
  left: -2rem;
}
.fr-container .absolute--fill {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.fr-container .dn {
  display: none;
}
.fr-container .di {
  display: inline;
}
.fr-container .db {
  display: block;
}
.fr-container .dib {
  display: inline-block;
}
.fr-container .dit {
  display: inline-table;
}
.fr-container .dt {
  display: table;
}
.fr-container .dtc {
  display: table-cell;
}
.fr-container .dt-row {
  display: table-row;
}
.fr-container .dt-row-group {
  display: table-row-group;
}
.fr-container .dt-column {
  display: table-column;
}
.fr-container .dt-column-group {
  display: table-column-group;
}
.fr-container .dt--fixed {
  table-layout: fixed;
  width: 100%;
}
.fr-container .flex {
  display: flex;
}
.fr-container .inline-flex {
  display: inline-flex;
}
.fr-container .flex-auto {
  flex: 1 1 auto;
  min-width: 0;
  /* 1 */
  min-height: 0;
  /* 1 */
}
.fr-container .flex-none {
  flex: none;
}
.fr-container .flex-column {
  flex-direction: column;
}
.fr-container .flex-row {
  flex-direction: row;
}
.fr-container .flex-wrap {
  flex-wrap: wrap;
}
.fr-container .flex-nowrap {
  flex-wrap: nowrap;
}
.fr-container .flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.fr-container .flex-column-reverse {
  flex-direction: column-reverse;
}
.fr-container .flex-row-reverse {
  flex-direction: row-reverse;
}
.fr-container .items-start {
  align-items: flex-start;
}
.fr-container .items-end {
  align-items: flex-end;
}
.fr-container .items-center {
  align-items: center;
}
.fr-container .items-baseline {
  align-items: baseline;
}
.fr-container .items-stretch {
  align-items: stretch;
}
.fr-container .self-start {
  align-self: flex-start;
}
.fr-container .self-end {
  align-self: flex-end;
}
.fr-container .self-center {
  align-self: center;
}
.fr-container .self-baseline {
  align-self: baseline;
}
.fr-container .self-stretch {
  align-self: stretch;
}
.fr-container .justify-start {
  justify-content: flex-start;
}
.fr-container .justify-end {
  justify-content: flex-end;
}
.fr-container .justify-center {
  justify-content: center;
}
.fr-container .justify-between {
  justify-content: space-between;
}
.fr-container .justify-around {
  justify-content: space-around;
}
.fr-container .content-start {
  align-content: flex-start;
}
.fr-container .content-end {
  align-content: flex-end;
}
.fr-container .content-center {
  align-content: center;
}
.fr-container .content-between {
  align-content: space-between;
}
.fr-container .content-around {
  align-content: space-around;
}
.fr-container .content-stretch {
  align-content: stretch;
}
.fr-container .order-0 {
  order: 0;
}
.fr-container .order-1 {
  order: 1;
}
.fr-container .order-2 {
  order: 2;
}
.fr-container .order-3 {
  order: 3;
}
.fr-container .order-4 {
  order: 4;
}
.fr-container .order-5 {
  order: 5;
}
.fr-container .order-6 {
  order: 6;
}
.fr-container .order-7 {
  order: 7;
}
.fr-container .order-8 {
  order: 8;
}
.fr-container .order-last {
  order: 99999;
}
.fr-container .flex-grow-0 {
  flex-grow: 0;
}
.fr-container .flex-grow-1 {
  flex-grow: 1;
}
.fr-container .flex-shrink-0 {
  flex-shrink: 0;
}
.fr-container .flex-shrink-1 {
  flex-shrink: 1;
}
.fr-container .fw1 {
  font-weight: 100;
}
.fr-container .fw2 {
  font-weight: 200;
}
.fr-container .fw3 {
  font-weight: 300;
}
.fr-container .fw4 {
  font-weight: 400;
}
.fr-container .fw5 {
  font-weight: 500;
}
.fr-container .fw6 {
  font-weight: 600;
}
.fr-container .fw7 {
  font-weight: 700;
}
.fr-container .fw8 {
  font-weight: 800;
}
.fr-container .fw9 {
  font-weight: 900;
}
.fr-container .h1 {
  height: 1rem;
}
.fr-container .h2 {
  height: 2rem;
}
.fr-container .h3 {
  height: 4rem;
}
.fr-container .h4 {
  height: 8rem;
}
.fr-container .h5 {
  height: 16rem;
}
.fr-container .h-25 {
  height: 25%;
}
.fr-container .h-50 {
  height: 50%;
}
.fr-container .h-75 {
  height: 75%;
}
.fr-container .h-100 {
  height: 100%;
}
.fr-container .min-h-100 {
  min-height: 100%;
}
.fr-container .vh-25 {
  height: 25vh;
}
.fr-container .vh-50 {
  height: 50vh;
}
.fr-container .vh-75 {
  height: 75vh;
}
.fr-container .vh-100 {
  height: 100vh;
}
.fr-container .min-vh-100 {
  min-height: 100vh;
}
.fr-container .h-auto {
  height: auto;
}
.fr-container .h-inherit {
  height: inherit;
}
.fr-container .tracked {
  letter-spacing: 0.1em;
}
.fr-container .tracked-tight {
  letter-spacing: -0.05em;
}
.fr-container .tracked-mega {
  letter-spacing: 0.25em;
}
.fr-container .lh-solid {
  line-height: 1;
}
.fr-container .lh-title {
  line-height: 1.25;
}
.fr-container .lh-copy {
  line-height: 1.5;
}
.fr-container .mw-100 {
  max-width: 100%;
}
.fr-container .mw1 {
  max-width: 1rem;
}
.fr-container .mw2 {
  max-width: 2rem;
}
.fr-container .mw3 {
  max-width: 4rem;
}
.fr-container .mw4 {
  max-width: 8rem;
}
.fr-container .mw5 {
  max-width: 16rem;
}
.fr-container .mw6 {
  max-width: 32rem;
}
.fr-container .mw7 {
  max-width: 48rem;
}
.fr-container .mw8 {
  max-width: 64rem;
}
.fr-container .mw9 {
  max-width: 96rem;
}
.fr-container .mw-none {
  max-width: none;
}
.fr-container .w1 {
  width: 1rem;
}
.fr-container .w2 {
  width: 2rem;
}
.fr-container .w3 {
  width: 4rem;
}
.fr-container .w4 {
  width: 8rem;
}
.fr-container .w5 {
  width: 16rem;
}
.fr-container .w-10 {
  width: 10%;
}
.fr-container .w-20 {
  width: 20%;
}
.fr-container .w-25 {
  width: 25%;
}
.fr-container .w-30 {
  width: 30%;
}
.fr-container .w-33 {
  width: 33%;
}
.fr-container .w-34 {
  width: 34%;
}
.fr-container .w-40 {
  width: 40%;
}
.fr-container .w-50 {
  width: 50%;
}
.fr-container .w-60 {
  width: 60%;
}
.fr-container .w-70 {
  width: 70%;
}
.fr-container .w-75 {
  width: 75%;
}
.fr-container .w-80 {
  width: 80%;
}
.fr-container .w-90 {
  width: 90%;
}
.fr-container .w-100 {
  width: 100%;
}
.fr-container .w-third {
  width: calc(100% / 3);
}
.fr-container .w-two-thirds {
  width: calc(100% / 1.5);
}
.fr-container .w-auto {
  width: auto;
}
.fr-container .tl {
  text-align: left;
}
.fr-container .tr {
  text-align: right;
}
.fr-container .tc {
  text-align: center;
}
.fr-container .tj {
  text-align: justify;
}
.fr-container .overflow-visible {
  overflow: visible;
}
.fr-container .overflow-hidden {
  overflow: hidden;
}
.fr-container .overflow-scroll {
  overflow: scroll;
}
.fr-container .overflow-auto {
  overflow: auto;
}
.fr-container .overflow-x-visible {
  overflow-x: visible;
}
.fr-container .overflow-x-hidden {
  overflow-x: hidden;
}
.fr-container .overflow-x-scroll {
  overflow-x: scroll;
}
.fr-container .overflow-x-auto {
  overflow-x: auto;
}
.fr-container .overflow-y-visible {
  overflow-y: visible;
}
.fr-container .overflow-y-hidden {
  overflow-y: hidden;
}
.fr-container .overflow-y-scroll {
  overflow-y: scroll;
}
.fr-container .overflow-y-auto {
  overflow-y: auto;
}
.fr-container .static {
  position: static;
}
.fr-container .relative {
  position: relative;
}
.fr-container .absolute {
  position: absolute;
}
.fr-container .fixed {
  position: fixed;
}
.fr-container .o-100 {
  opacity: 1;
}
.fr-container .o-90 {
  opacity: 0.9;
}
.fr-container .o-80 {
  opacity: 0.8;
}
.fr-container .o-70 {
  opacity: 0.7;
}
.fr-container .o-60 {
  opacity: 0.6;
}
.fr-container .o-50 {
  opacity: 0.5;
}
.fr-container .o-40 {
  opacity: 0.4;
}
.fr-container .o-30 {
  opacity: 0.3;
}
.fr-container .o-20 {
  opacity: 0.2;
}
.fr-container .o-10 {
  opacity: 0.1;
}
.fr-container .o-05 {
  opacity: 0.05;
}
.fr-container .o-025 {
  opacity: 0.025;
}
.fr-container .o-0 {
  opacity: 0;
}
.fr-container .pa0 {
  padding: 0;
}
.fr-container .pa1 {
  padding: 0.25rem;
}
.fr-container .pa2 {
  padding: 0.5rem;
}
.fr-container .pa3 {
  padding: 1rem;
}
.fr-container .pa4 {
  padding: 2rem;
}
.fr-container .pa5 {
  padding: 4rem;
}
.fr-container .pa6 {
  padding: 8rem;
}
.fr-container .pa7 {
  padding: 16rem;
}
.fr-container .pl0 {
  padding-left: 0;
}
.fr-container .pl1 {
  padding-left: 0.25rem;
}
.fr-container .pl2 {
  padding-left: 0.5rem;
}
.fr-container .pl3 {
  padding-left: 1rem;
}
.fr-container .pl4 {
  padding-left: 2rem;
}
.fr-container .pl5 {
  padding-left: 4rem;
}
.fr-container .pl6 {
  padding-left: 8rem;
}
.fr-container .pl7 {
  padding-left: 16rem;
}
.fr-container .pr0 {
  padding-right: 0;
}
.fr-container .pr1 {
  padding-right: 0.25rem;
}
.fr-container .pr2 {
  padding-right: 0.5rem;
}
.fr-container .pr3 {
  padding-right: 1rem;
}
.fr-container .pr4 {
  padding-right: 2rem;
}
.fr-container .pr5 {
  padding-right: 4rem;
}
.fr-container .pr6 {
  padding-right: 8rem;
}
.fr-container .pr7 {
  padding-right: 16rem;
}
.fr-container .pb0 {
  padding-bottom: 0;
}
.fr-container .pb1 {
  padding-bottom: 0.25rem;
}
.fr-container .pb2 {
  padding-bottom: 0.5rem;
}
.fr-container .pb3 {
  padding-bottom: 1rem;
}
.fr-container .pb4 {
  padding-bottom: 2rem;
}
.fr-container .pb5 {
  padding-bottom: 4rem;
}
.fr-container .pb6 {
  padding-bottom: 8rem;
}
.fr-container .pb7 {
  padding-bottom: 16rem;
}
.fr-container .pt0 {
  padding-top: 0;
}
.fr-container .pt1 {
  padding-top: 0.25rem;
}
.fr-container .pt2 {
  padding-top: 0.5rem;
}
.fr-container .pt3 {
  padding-top: 1rem;
}
.fr-container .pt4 {
  padding-top: 2rem;
}
.fr-container .pt5 {
  padding-top: 4rem;
}
.fr-container .pt6 {
  padding-top: 8rem;
}
.fr-container .pt7 {
  padding-top: 16rem;
}
.fr-container .pv0 {
  padding-top: 0;
  padding-bottom: 0;
}
.fr-container .pv1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.fr-container .pv2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.fr-container .pv3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.fr-container .pv4 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.fr-container .pv5 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.fr-container .pv6 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.fr-container .pv7 {
  padding-top: 16rem;
  padding-bottom: 16rem;
}
.fr-container .ph0 {
  padding-left: 0;
  padding-right: 0;
}
.fr-container .ph1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.fr-container .ph2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.fr-container .ph3 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.fr-container .ph4 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.fr-container .ph5 {
  padding-left: 4rem;
  padding-right: 4rem;
}
.fr-container .ph6 {
  padding-left: 8rem;
  padding-right: 8rem;
}
.fr-container .ph7 {
  padding-left: 16rem;
  padding-right: 16rem;
}
.fr-container .ma1 {
  margin: 0.25rem;
}
.fr-container .ma2 {
  margin: 0.5rem;
}
.fr-container .ma3 {
  margin: 1rem;
}
.fr-container .ma4 {
  margin: 2rem;
}
.fr-container .ma5 {
  margin: 4rem;
}
.fr-container .ma6 {
  margin: 8rem;
}
.fr-container .ma7 {
  margin: 16rem;
}
.fr-container .ma0 {
  margin: 0;
}
.fr-container .ml1 {
  margin-left: 0.25rem;
}
.fr-container .ml2 {
  margin-left: 0.5rem;
}
.fr-container .ml3 {
  margin-left: 1rem;
}
.fr-container .ml4 {
  margin-left: 2rem;
}
.fr-container .ml5 {
  margin-left: 4rem;
}
.fr-container .ml6 {
  margin-left: 8rem;
}
.fr-container .ml7 {
  margin-left: 16rem;
}
.fr-container .ml0 {
  margin-left: 0;
}
.fr-container .mr1 {
  margin-right: 0.25rem;
}
.fr-container .mr2 {
  margin-right: 0.5rem;
}
.fr-container .mr3 {
  margin-right: 1rem;
}
.fr-container .mr4 {
  margin-right: 2rem;
}
.fr-container .mr5 {
  margin-right: 4rem;
}
.fr-container .mr6 {
  margin-right: 8rem;
}
.fr-container .mr7 {
  margin-right: 16rem;
}
.fr-container .mr0 {
  margin-right: 0;
}
.fr-container .mb1 {
  margin-bottom: 0.25rem;
}
.fr-container .mb2 {
  margin-bottom: 0.5rem;
}
.fr-container .mb3 {
  margin-bottom: 1rem;
}
.fr-container .mb4 {
  margin-bottom: 2rem;
}
.fr-container .mb5 {
  margin-bottom: 4rem;
}
.fr-container .mb6 {
  margin-bottom: 8rem;
}
.fr-container .mb7 {
  margin-bottom: 16rem;
}
.fr-container .mb0 {
  margin-bottom: 0;
}
.fr-container .mt1 {
  margin-top: 0.25rem;
}
.fr-container .mt2 {
  margin-top: 0.5rem;
}
.fr-container .mt3 {
  margin-top: 1rem;
}
.fr-container .mt4 {
  margin-top: 2rem;
}
.fr-container .mt5 {
  margin-top: 4rem;
}
.fr-container .mt6 {
  margin-top: 8rem;
}
.fr-container .mt7 {
  margin-top: 16rem;
}
.fr-container .mt0 {
  margin-top: 0;
}
.fr-container .mv1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.fr-container .mv2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.fr-container .mv3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.fr-container .mv4 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.fr-container .mv5 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}
.fr-container .mv6 {
  margin-top: 8rem;
  margin-bottom: 8rem;
}
.fr-container .mv7 {
  margin-top: 16rem;
  margin-bottom: 16rem;
}
.fr-container .mv0 {
  margin-top: 0;
  margin-bottom: 0;
}
.fr-container .mh1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.fr-container .mh2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.fr-container .mh3 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.fr-container .mh4 {
  margin-left: 2rem;
  margin-right: 2rem;
}
.fr-container .mh5 {
  margin-left: 4rem;
  margin-right: 4rem;
}
.fr-container .mh6 {
  margin-left: 8rem;
  margin-right: 8rem;
}
.fr-container .mh7 {
  margin-left: 16rem;
  margin-right: 16rem;
}
.fr-container .mh0 {
  margin-left: 0;
  margin-right: 0;
}
.fr-container .debug * {
  outline: 1px solid gold;
}
.fr-container .debug-white * {
  outline: 1px solid white;
}
.fr-container .debug-black * {
  outline: 1px solid black;
}
.fr-container .debug-grid {
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left;
}
.fr-container .truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-container .bg-white {
  background-color: #fff;
}
.fr-container .pointer:hover {
  cursor: pointer;
}
.fr-container .link {
  color: #1890ff;
  font-size: 14px;
}
.fr-container .link:hover {
  color: #40a9ff;
  font-size: 14px;
}