rsuite/FlexboxGrid/styles/index.css

A suite of react components

*[class*=rs-],*[class*=rs-]::before, *[class*=rs-]::after{
  box-sizing:border-box;
}

html{
  -webkit-tap-highlight-color:transparent;
  font-size:16px;
}

body{
  font-family:var(--rs-font-family-base);
  font-size:var(--rs-font-size-sm);
  line-height:var(--rs-line-height-md);
  color:var(--rs-text-primary);
  background-color:var(--rs-body);
}
:root{
  --rs-gray-0:#fff;
  --rs-gray-50:#f7f7fa;
  --rs-gray-800:#343434;
  --rs-gray-900:#121212;
  --rs-body:var(--rs-gray-0);
  --rs-text-primary:var(--rs-gray-800);
}

[data-theme=dark],
.rs-theme-dark{
  --rs-gray-0:#fff;
  --rs-gray-50:#e9ebf0;
  --rs-gray-800:#1a1d24;
  --rs-gray-900:#0f131a;
  --rs-body:var(--rs-gray-900);
  --rs-text-primary:var(--rs-gray-50);
}

[data-theme=high-contrast],
.rs-theme-high-contrast{
  --rs-gray-0:#fff;
  --rs-gray-50:#e9ebf0;
  --rs-gray-800:#1a1d24;
  --rs-gray-900:#0f131a;
  --rs-body:var(--rs-gray-900);
  --rs-text-primary:var(--rs-gray-50);
}

:root{
  --rs-font-family-base:-apple-system, BlinkMacSystemFont, Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STXihei, sans-serif;
  --rs-font-size-sm:0.875rem;
  --rs-line-height-md:calc(20 / 14);
}

@media (max-width: calc(576px - 1px)){
  [data-visible-from=xs]{
    display:none !important;
  }
}
@media (min-width: 576px){
  [data-hidden-from=xs]{
    display:none !important;
  }
}
@media (max-width: calc(768px - 1px)){
  [data-visible-from=sm]{
    display:none !important;
  }
}
@media (min-width: 768px){
  [data-hidden-from=sm]{
    display:none !important;
  }
}
@media (max-width: calc(992px - 1px)){
  [data-visible-from=md]{
    display:none !important;
  }
}
@media (min-width: 992px){
  [data-hidden-from=md]{
    display:none !important;
  }
}
@media (max-width: calc(1200px - 1px)){
  [data-visible-from=lg]{
    display:none !important;
  }
}
@media (min-width: 1200px){
  [data-hidden-from=lg]{
    display:none !important;
  }
}
@media (max-width: calc(1400px - 1px)){
  [data-visible-from=xl]{
    display:none !important;
  }
}
@media (min-width: 1400px){
  [data-hidden-from=xl]{
    display:none !important;
  }
}
.rs-flex-box-grid{
  display:flex;
  flex-flow:row wrap;
}
.rs-flex-box-grid-item{
  width:100%;
  max-width:100%;
}
.rs-flex-box-grid-top{
  align-items:flex-start;
}
.rs-flex-box-grid-middle{
  align-items:center;
}
.rs-flex-box-grid-bottom{
  align-items:flex-end;
}
.rs-flex-box-grid-start{
  justify-content:flex-start;
}
.rs-flex-box-grid-center{
  justify-content:center;
}
.rs-flex-box-grid-end{
  justify-content:flex-end;
}
.rs-flex-box-grid-space-between{
  justify-content:space-between;
}
.rs-flex-box-grid-space-around{
  justify-content:space-around;
}

.rs-flex-box-grid-item-1{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:4.1666666667%;
}

.rs-flex-box-grid-item-order-1{
  order:1;
}

.rs-flex-box-grid-item-2{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:8.3333333333%;
}

.rs-flex-box-grid-item-order-2{
  order:2;
}

.rs-flex-box-grid-item-3{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:12.5%;
}

.rs-flex-box-grid-item-order-3{
  order:3;
}

.rs-flex-box-grid-item-4{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:16.6666666667%;
}

.rs-flex-box-grid-item-order-4{
  order:4;
}

.rs-flex-box-grid-item-5{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:20.8333333333%;
}

.rs-flex-box-grid-item-order-5{
  order:5;
}

.rs-flex-box-grid-item-6{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:25%;
}

.rs-flex-box-grid-item-order-6{
  order:6;
}

.rs-flex-box-grid-item-7{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:29.1666666667%;
}

.rs-flex-box-grid-item-order-7{
  order:7;
}

.rs-flex-box-grid-item-8{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:33.3333333333%;
}

.rs-flex-box-grid-item-order-8{
  order:8;
}

.rs-flex-box-grid-item-9{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:37.5%;
}

.rs-flex-box-grid-item-order-9{
  order:9;
}

.rs-flex-box-grid-item-10{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:41.6666666667%;
}

.rs-flex-box-grid-item-order-10{
  order:10;
}

.rs-flex-box-grid-item-11{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:45.8333333333%;
}

.rs-flex-box-grid-item-order-11{
  order:11;
}

.rs-flex-box-grid-item-12{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:50%;
}

.rs-flex-box-grid-item-order-12{
  order:12;
}

.rs-flex-box-grid-item-13{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:54.1666666667%;
}

.rs-flex-box-grid-item-order-13{
  order:13;
}

.rs-flex-box-grid-item-14{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:58.3333333333%;
}

.rs-flex-box-grid-item-order-14{
  order:14;
}

.rs-flex-box-grid-item-15{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:62.5%;
}

.rs-flex-box-grid-item-order-15{
  order:15;
}

.rs-flex-box-grid-item-16{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:66.6666666667%;
}

.rs-flex-box-grid-item-order-16{
  order:16;
}

.rs-flex-box-grid-item-17{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:70.8333333333%;
}

.rs-flex-box-grid-item-order-17{
  order:17;
}

.rs-flex-box-grid-item-18{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:75%;
}

.rs-flex-box-grid-item-order-18{
  order:18;
}

.rs-flex-box-grid-item-19{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:79.1666666667%;
}

.rs-flex-box-grid-item-order-19{
  order:19;
}

.rs-flex-box-grid-item-20{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:83.3333333333%;
}

.rs-flex-box-grid-item-order-20{
  order:20;
}

.rs-flex-box-grid-item-21{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:87.5%;
}

.rs-flex-box-grid-item-order-21{
  order:21;
}

.rs-flex-box-grid-item-22{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:91.6666666667%;
}

.rs-flex-box-grid-item-order-22{
  order:22;
}

.rs-flex-box-grid-item-23{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:95.8333333333%;
}

.rs-flex-box-grid-item-order-23{
  order:23;
}

.rs-flex-box-grid-item-24{
  flex:0 0 auto;
  position:relative;
  display:block;
  min-height:1px;
  width:100%;
}

.rs-flex-box-grid-item-order-24{
  order:24;
}