@patreon/studio/module/components/Stack/Stack.module.css

Patreon Studio Design System

.flowBlock {
  display: flex;
}

.flowInline {
  display: inline-flex;
}

.flexDirectionColumn {
    flex-direction: column;
  }

.flexDirectionRow {
    flex-direction: row;
  }

.flexDirectionColumnReverse {
    flex-direction: column-reverse;
  }

.flexDirectionRowReverse {
    flex-direction: row-reverse;
  }

.justifyContentInitial {
    justify-content: initial;
  }

.justifyContentSpaceAround {
    justify-content: space-around;
  }

.justifyContentSpaceBetween {
    justify-content: space-between;
  }

.justifyContentSpaceEvenly {
    justify-content: space-evenly;
  }

.justifyContentFlexStart {
    justify-content: flex-start;
  }

.justifyContentFlexEnd {
    justify-content: flex-end;
  }

.justifyContentStretch {
    justify-content: stretch;
  }

.justifyContentCenter {
    justify-content: center;
  }

.alignItemsInitial {
    align-items: initial;
  }

.alignItemsFlexStart {
    align-items: flex-start;
  }

.alignItemsFlexEnd {
    align-items: flex-end;
  }

.alignItemsCenter {
    align-items: center;
  }

.alignItemsStretch {
    align-items: stretch;
  }

.alignItemsBaseline {
    align-items: baseline;
  }

.flexWrapWrap {
    flex-wrap: wrap;
  }

.flexWrapNoWrap {
    flex-wrap: nowrap;
  }

.widthFluid {
    width: 100%;
  }

.widthMinContent {
    width: -moz-min-content;
    width: min-content;
  }

.widthMaxContent {
    width: -moz-max-content;
    width: max-content;
  }

.widthFitContents {
    width: fit-contents;
  }

.widthAuto {
    width: auto;
  }

.heightFluid {
    height: 100%;
  }

.heightMinContent {
    height: -moz-min-content;
    height: min-content;
  }

.heightMaxContent {
    height: -moz-max-content;
    height: max-content;
  }

.heightFitContents {
    height: fit-contents;
  }

.heightAuto {
    height: auto;
  }

@media (min-width: 588px) {

  .flexDirectionColumnBreakpointSm {
    flex-direction: column;
  }

  .flexDirectionRowBreakpointSm {
    flex-direction: row;
  }

  .flexDirectionColumnReverseBreakpointSm {
    flex-direction: column-reverse;
  }

  .flexDirectionRowReverseBreakpointSm {
    flex-direction: row-reverse;
  }

  .justifyContentInitialBreakpointSm {
    justify-content: initial;
  }

  .justifyContentSpaceAroundBreakpointSm {
    justify-content: space-around;
  }

  .justifyContentSpaceBetweenBreakpointSm {
    justify-content: space-between;
  }

  .justifyContentSpaceEvenlyBreakpointSm {
    justify-content: space-evenly;
  }

  .justifyContentFlexStartBreakpointSm {
    justify-content: flex-start;
  }

  .justifyContentFlexEndBreakpointSm {
    justify-content: flex-end;
  }

  .justifyContentStretchBreakpointSm {
    justify-content: stretch;
  }

  .justifyContentCenterBreakpointSm {
    justify-content: center;
  }

  .alignItemsInitialBreakpointSm {
    align-items: initial;
  }

  .alignItemsFlexStartBreakpointSm {
    align-items: flex-start;
  }

  .alignItemsFlexEndBreakpointSm {
    align-items: flex-end;
  }

  .alignItemsCenterBreakpointSm {
    align-items: center;
  }

  .alignItemsStretchBreakpointSm {
    align-items: stretch;
  }

  .alignItemsBaselineBreakpointSm {
    align-items: baseline;
  }

  .flexWrapWrapBreakpointSm {
    flex-wrap: wrap;
  }

  .flexWrapNoWrapBreakpointSm {
    flex-wrap: nowrap;
  }

  .widthFluidBreakpointSm {
    width: 100%;
  }

  .widthMinContentBreakpointSm {
    width: -moz-min-content;
    width: min-content;
  }

  .widthMaxContentBreakpointSm {
    width: -moz-max-content;
    width: max-content;
  }

  .widthFitContentsBreakpointSm {
    width: fit-contents;
  }

  .widthAutoBreakpointSm {
    width: auto;
  }

  .heightFluidBreakpointSm {
    height: 100%;
  }

  .heightMinContentBreakpointSm {
    height: -moz-min-content;
    height: min-content;
  }

  .heightMaxContentBreakpointSm {
    height: -moz-max-content;
    height: max-content;
  }

  .heightFitContentsBreakpointSm {
    height: fit-contents;
  }

  .heightAutoBreakpointSm {
    height: auto;
  }
}

@media (min-width: 796px) {

  .flexDirectionColumnBreakpointMd {
    flex-direction: column;
  }

  .flexDirectionRowBreakpointMd {
    flex-direction: row;
  }

  .flexDirectionColumnReverseBreakpointMd {
    flex-direction: column-reverse;
  }

  .flexDirectionRowReverseBreakpointMd {
    flex-direction: row-reverse;
  }

  .justifyContentInitialBreakpointMd {
    justify-content: initial;
  }

  .justifyContentSpaceAroundBreakpointMd {
    justify-content: space-around;
  }

  .justifyContentSpaceBetweenBreakpointMd {
    justify-content: space-between;
  }

  .justifyContentSpaceEvenlyBreakpointMd {
    justify-content: space-evenly;
  }

  .justifyContentFlexStartBreakpointMd {
    justify-content: flex-start;
  }

  .justifyContentFlexEndBreakpointMd {
    justify-content: flex-end;
  }

  .justifyContentStretchBreakpointMd {
    justify-content: stretch;
  }

  .justifyContentCenterBreakpointMd {
    justify-content: center;
  }

  .alignItemsInitialBreakpointMd {
    align-items: initial;
  }

  .alignItemsFlexStartBreakpointMd {
    align-items: flex-start;
  }

  .alignItemsFlexEndBreakpointMd {
    align-items: flex-end;
  }

  .alignItemsCenterBreakpointMd {
    align-items: center;
  }

  .alignItemsStretchBreakpointMd {
    align-items: stretch;
  }

  .alignItemsBaselineBreakpointMd {
    align-items: baseline;
  }

  .flexWrapWrapBreakpointMd {
    flex-wrap: wrap;
  }

  .flexWrapNoWrapBreakpointMd {
    flex-wrap: nowrap;
  }

  .widthFluidBreakpointMd {
    width: 100%;
  }

  .widthMinContentBreakpointMd {
    width: -moz-min-content;
    width: min-content;
  }

  .widthMaxContentBreakpointMd {
    width: -moz-max-content;
    width: max-content;
  }

  .widthFitContentsBreakpointMd {
    width: fit-contents;
  }

  .widthAutoBreakpointMd {
    width: auto;
  }

  .heightFluidBreakpointMd {
    height: 100%;
  }

  .heightMinContentBreakpointMd {
    height: -moz-min-content;
    height: min-content;
  }

  .heightMaxContentBreakpointMd {
    height: -moz-max-content;
    height: max-content;
  }

  .heightFitContentsBreakpointMd {
    height: fit-contents;
  }

  .heightAutoBreakpointMd {
    height: auto;
  }
}

@media (min-width: 978px) {

  .flexDirectionColumnBreakpointLg {
    flex-direction: column;
  }

  .flexDirectionRowBreakpointLg {
    flex-direction: row;
  }

  .flexDirectionColumnReverseBreakpointLg {
    flex-direction: column-reverse;
  }

  .flexDirectionRowReverseBreakpointLg {
    flex-direction: row-reverse;
  }

  .justifyContentInitialBreakpointLg {
    justify-content: initial;
  }

  .justifyContentSpaceAroundBreakpointLg {
    justify-content: space-around;
  }

  .justifyContentSpaceBetweenBreakpointLg {
    justify-content: space-between;
  }

  .justifyContentSpaceEvenlyBreakpointLg {
    justify-content: space-evenly;
  }

  .justifyContentFlexStartBreakpointLg {
    justify-content: flex-start;
  }

  .justifyContentFlexEndBreakpointLg {
    justify-content: flex-end;
  }

  .justifyContentStretchBreakpointLg {
    justify-content: stretch;
  }

  .justifyContentCenterBreakpointLg {
    justify-content: center;
  }

  .alignItemsInitialBreakpointLg {
    align-items: initial;
  }

  .alignItemsFlexStartBreakpointLg {
    align-items: flex-start;
  }

  .alignItemsFlexEndBreakpointLg {
    align-items: flex-end;
  }

  .alignItemsCenterBreakpointLg {
    align-items: center;
  }

  .alignItemsStretchBreakpointLg {
    align-items: stretch;
  }

  .alignItemsBaselineBreakpointLg {
    align-items: baseline;
  }

  .flexWrapWrapBreakpointLg {
    flex-wrap: wrap;
  }

  .flexWrapNoWrapBreakpointLg {
    flex-wrap: nowrap;
  }

  .widthFluidBreakpointLg {
    width: 100%;
  }

  .widthMinContentBreakpointLg {
    width: -moz-min-content;
    width: min-content;
  }

  .widthMaxContentBreakpointLg {
    width: -moz-max-content;
    width: max-content;
  }

  .widthFitContentsBreakpointLg {
    width: fit-contents;
  }

  .widthAutoBreakpointLg {
    width: auto;
  }

  .heightFluidBreakpointLg {
    height: 100%;
  }

  .heightMinContentBreakpointLg {
    height: -moz-min-content;
    height: min-content;
  }

  .heightMaxContentBreakpointLg {
    height: -moz-max-content;
    height: max-content;
  }

  .heightFitContentsBreakpointLg {
    height: fit-contents;
  }

  .heightAutoBreakpointLg {
    height: auto;
  }
}

@media (min-width: 1280px) {

  .flexDirectionColumnBreakpointXl {
    flex-direction: column;
  }

  .flexDirectionRowBreakpointXl {
    flex-direction: row;
  }

  .flexDirectionColumnReverseBreakpointXl {
    flex-direction: column-reverse;
  }

  .flexDirectionRowReverseBreakpointXl {
    flex-direction: row-reverse;
  }

  .justifyContentInitialBreakpointXl {
    justify-content: initial;
  }

  .justifyContentSpaceAroundBreakpointXl {
    justify-content: space-around;
  }

  .justifyContentSpaceBetweenBreakpointXl {
    justify-content: space-between;
  }

  .justifyContentSpaceEvenlyBreakpointXl {
    justify-content: space-evenly;
  }

  .justifyContentFlexStartBreakpointXl {
    justify-content: flex-start;
  }

  .justifyContentFlexEndBreakpointXl {
    justify-content: flex-end;
  }

  .justifyContentStretchBreakpointXl {
    justify-content: stretch;
  }

  .justifyContentCenterBreakpointXl {
    justify-content: center;
  }

  .alignItemsInitialBreakpointXl {
    align-items: initial;
  }

  .alignItemsFlexStartBreakpointXl {
    align-items: flex-start;
  }

  .alignItemsFlexEndBreakpointXl {
    align-items: flex-end;
  }

  .alignItemsCenterBreakpointXl {
    align-items: center;
  }

  .alignItemsStretchBreakpointXl {
    align-items: stretch;
  }

  .alignItemsBaselineBreakpointXl {
    align-items: baseline;
  }

  .flexWrapWrapBreakpointXl {
    flex-wrap: wrap;
  }

  .flexWrapNoWrapBreakpointXl {
    flex-wrap: nowrap;
  }

  .widthFluidBreakpointXl {
    width: 100%;
  }

  .widthMinContentBreakpointXl {
    width: -moz-min-content;
    width: min-content;
  }

  .widthMaxContentBreakpointXl {
    width: -moz-max-content;
    width: max-content;
  }

  .widthFitContentsBreakpointXl {
    width: fit-contents;
  }

  .widthAutoBreakpointXl {
    width: auto;
  }

  .heightFluidBreakpointXl {
    height: 100%;
  }

  .heightMinContentBreakpointXl {
    height: -moz-min-content;
    height: min-content;
  }

  .heightMaxContentBreakpointXl {
    height: -moz-max-content;
    height: max-content;
  }

  .heightFitContentsBreakpointXl {
    height: fit-contents;
  }

  .heightAutoBreakpointXl {
    height: auto;
  }
}

@media (min-width: 1440px) {

  .flexDirectionColumnBreakpointXxl {
    flex-direction: column;
  }

  .flexDirectionRowBreakpointXxl {
    flex-direction: row;
  }

  .flexDirectionColumnReverseBreakpointXxl {
    flex-direction: column-reverse;
  }

  .flexDirectionRowReverseBreakpointXxl {
    flex-direction: row-reverse;
  }

  .justifyContentInitialBreakpointXxl {
    justify-content: initial;
  }

  .justifyContentSpaceAroundBreakpointXxl {
    justify-content: space-around;
  }

  .justifyContentSpaceBetweenBreakpointXxl {
    justify-content: space-between;
  }

  .justifyContentSpaceEvenlyBreakpointXxl {
    justify-content: space-evenly;
  }

  .justifyContentFlexStartBreakpointXxl {
    justify-content: flex-start;
  }

  .justifyContentFlexEndBreakpointXxl {
    justify-content: flex-end;
  }

  .justifyContentStretchBreakpointXxl {
    justify-content: stretch;
  }

  .justifyContentCenterBreakpointXxl {
    justify-content: center;
  }

  .alignItemsInitialBreakpointXxl {
    align-items: initial;
  }

  .alignItemsFlexStartBreakpointXxl {
    align-items: flex-start;
  }

  .alignItemsFlexEndBreakpointXxl {
    align-items: flex-end;
  }

  .alignItemsCenterBreakpointXxl {
    align-items: center;
  }

  .alignItemsStretchBreakpointXxl {
    align-items: stretch;
  }

  .alignItemsBaselineBreakpointXxl {
    align-items: baseline;
  }

  .flexWrapWrapBreakpointXxl {
    flex-wrap: wrap;
  }

  .flexWrapNoWrapBreakpointXxl {
    flex-wrap: nowrap;
  }

  .widthFluidBreakpointXxl {
    width: 100%;
  }

  .widthMinContentBreakpointXxl {
    width: -moz-min-content;
    width: min-content;
  }

  .widthMaxContentBreakpointXxl {
    width: -moz-max-content;
    width: max-content;
  }

  .widthFitContentsBreakpointXxl {
    width: fit-contents;
  }

  .widthAutoBreakpointXxl {
    width: auto;
  }

  .heightFluidBreakpointXxl {
    height: 100%;
  }

  .heightMinContentBreakpointXxl {
    height: -moz-min-content;
    height: min-content;
  }

  .heightMaxContentBreakpointXxl {
    height: -moz-max-content;
    height: max-content;
  }

  .heightFitContentsBreakpointXxl {
    height: fit-contents;
  }

  .heightAutoBreakpointXxl {
    height: auto;
  }
}