@inkline/inkline/components/IRow/css/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

/**
 * Breakpoint mixins
 */
.row {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: calc(var(--grid--xs--gutter) / -2);
  margin-right: calc(var(--grid--xs--gutter) / -2);
}
@media screen and (min-width: 576px) {
  .row {
    margin-left: calc(var(--grid--sm--gutter) / -2);
    margin-right: calc(var(--grid--sm--gutter) / -2);
  }
}
@media screen and (min-width: 768px) {
  .row {
    margin-left: calc(var(--grid--md--gutter) / -2);
    margin-right: calc(var(--grid--md--gutter) / -2);
  }
}
@media screen and (min-width: 992px) {
  .row {
    margin-left: calc(var(--grid--lg--gutter) / -2);
    margin-right: calc(var(--grid--lg--gutter) / -2);
  }
}
@media screen and (min-width: 1200px) {
  .row {
    margin-left: calc(var(--grid--xl--gutter) / -2);
    margin-right: calc(var(--grid--xl--gutter) / -2);
  }
}
@media screen and (min-width: 1400px) {
  .row {
    margin-left: calc(var(--grid--2xl--gutter) / -2);
    margin-right: calc(var(--grid--2xl--gutter) / -2);
  }
}
.row.-reverse {
  flex-direction: row-reverse;
}
.row.-no-gutter {
  margin-left: 0;
  margin-right: 0;
}
.row.-no-gutter > .column {
  padding-left: 0;
  padding-right: 0;
}
.row.-no-collapse {
  flex-flow: row nowrap;
}
.row.-start-xs {
  justify-content: flex-start;
  text-align: start;
}
.row.-center-xs {
  justify-content: center;
  text-align: center;
}
.row.-end-xs {
  justify-content: flex-end;
  text-align: end;
}
.row.-top-xs {
  align-items: flex-start;
}
.row.-middle-xs {
  align-items: center;
}
.row.-bottom-xs {
  align-items: flex-end;
}
.row.-around-xs {
  justify-content: space-around;
}
.row.-between-xs {
  justify-content: space-between;
}
.row.-reverse-xs {
  flex-direction: row-reverse;
}
@media screen and (min-width: 576px) {
  .row.-start-sm {
    justify-content: flex-start;
    text-align: start;
  }
  .row.-center-sm {
    justify-content: center;
    text-align: center;
  }
  .row.-end-sm {
    justify-content: flex-end;
    text-align: end;
  }
  .row.-top-sm {
    align-items: flex-start;
  }
  .row.-middle-sm {
    align-items: center;
  }
  .row.-bottom-sm {
    align-items: flex-end;
  }
  .row.-around-sm {
    justify-content: space-around;
  }
  .row.-between-sm {
    justify-content: space-between;
  }
  .row.-reverse-sm {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 768px) {
  .row.-start-md {
    justify-content: flex-start;
    text-align: start;
  }
  .row.-center-md {
    justify-content: center;
    text-align: center;
  }
  .row.-end-md {
    justify-content: flex-end;
    text-align: end;
  }
  .row.-top-md {
    align-items: flex-start;
  }
  .row.-middle-md {
    align-items: center;
  }
  .row.-bottom-md {
    align-items: flex-end;
  }
  .row.-around-md {
    justify-content: space-around;
  }
  .row.-between-md {
    justify-content: space-between;
  }
  .row.-reverse-md {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 992px) {
  .row.-start-lg {
    justify-content: flex-start;
    text-align: start;
  }
  .row.-center-lg {
    justify-content: center;
    text-align: center;
  }
  .row.-end-lg {
    justify-content: flex-end;
    text-align: end;
  }
  .row.-top-lg {
    align-items: flex-start;
  }
  .row.-middle-lg {
    align-items: center;
  }
  .row.-bottom-lg {
    align-items: flex-end;
  }
  .row.-around-lg {
    justify-content: space-around;
  }
  .row.-between-lg {
    justify-content: space-between;
  }
  .row.-reverse-lg {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 1200px) {
  .row.-start-xl {
    justify-content: flex-start;
    text-align: start;
  }
  .row.-center-xl {
    justify-content: center;
    text-align: center;
  }
  .row.-end-xl {
    justify-content: flex-end;
    text-align: end;
  }
  .row.-top-xl {
    align-items: flex-start;
  }
  .row.-middle-xl {
    align-items: center;
  }
  .row.-bottom-xl {
    align-items: flex-end;
  }
  .row.-around-xl {
    justify-content: space-around;
  }
  .row.-between-xl {
    justify-content: space-between;
  }
  .row.-reverse-xl {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 1400px) {
  .row.-start-2xl {
    justify-content: flex-start;
    text-align: start;
  }
  .row.-center-2xl {
    justify-content: center;
    text-align: center;
  }
  .row.-end-2xl {
    justify-content: flex-end;
    text-align: end;
  }
  .row.-top-2xl {
    align-items: flex-start;
  }
  .row.-middle-2xl {
    align-items: center;
  }
  .row.-bottom-2xl {
    align-items: flex-end;
  }
  .row.-around-2xl {
    justify-content: space-around;
  }
  .row.-between-2xl {
    justify-content: space-between;
  }
  .row.-reverse-2xl {
    flex-direction: row-reverse;
  }
}
.row.-start {
  justify-content: flex-start;
  text-align: start;
}
.row.-center {
  justify-content: center;
  text-align: center;
}
.row.-end {
  justify-content: flex-end;
  text-align: end;
}
.row.-top {
  align-items: flex-start;
}
.row.-middle {
  align-items: center;
}
.row.-bottom {
  align-items: flex-end;
}
.row.-around {
  justify-content: space-around;
}
.row.-between {
  justify-content: space-between;
}
.row.-reverse {
  flex-direction: row-reverse;
}