@mongodb-js/mongodb-ui-components/src/mongodb-framework.styl

A collection of frequently used functional UI components found on mongodb properties

////////////////////
//// Framework /////
////////////////////
body
  margin: 0
  
*
  box-sizing: border-box

////////////
// resets //
////////////
.reset
  margin: 0
  text-decoration: none
  color: inherit
  border: 0
  background-color: inherit
  font-weight: inherit
  
.user-select-none
  -webkit-user-select: none
  user-select: none

//////////
// flex //
//////////
.fl
  display: flex

.fl-row
.fl-column
  display: flex

.fl-row
  flex-direction: row

.fl-row-reverse
  flex-direction: row-reverse

.fl-column
  flex-direction: column

.fl-column-reverse
  flex-direction: column-reverse

.fl-wrap
  flex-wrap: wrap
  
.fl-center-x
  justify-content: center

.fl.fl-center-x
.fl-row.fl-center-x
.fl-column.fl-center-y
  justify-content: center
  
.fl-center-y
  align-items: center

.fl.fl-center-y
.fl-row.fl-center-y
.fl-column.fl-center-x
  align-items: center

.fl-center
  display: flex
  justify-content: center
  align-items: center
  align-content: center

.fl-row
.fl-column
  &.fl-fill
    align-items: stretch
    & > *
      flex: 1

.fl-row
  &.fl-fill-x > *
    flex: 1
  &.fl-fill-y
    align-items: stretch

.fl-column
  &.fl-fill-x
    align-items: stretch
  &.fl-fill-y > *
    flex: 1

for i in 0..10
  .fl-{i}
    flex: i
    
.fl-justify-start
  justify-content: flex-start
.fl-justify-end
  justify-content: flex-end
.fl-justify-center
  justify-content: center
.fl-justify-between
  justify-content: space-between
.fl-justify-around
  justify-content: space-around
.fl-justify-evenly
  justify-content: space-evenly

.fl-items-start
  align-items: flex-start
.fl-items-end
  align-items: flex-end
.fl-items-center
  align-items: center
.fl-items-stretch
  align-items: stretch
.fl-items-baseline
  align-items: baseline

.fl-content-start
  align-content: flex-start
.fl-content-end
  align-content: flex-end
.fl-content-center
  align-content: center
.fl-content-stretch
  align-content: stretch
.fl-content-around
  align-content: space-around
.fl-content-between
  align-content: space-between

//Row class good for image next to text
.row
  display: flex
  flex: row wrap
  align-items: flex-start
  > *
    margin: 0px 5px
  > *:first-child
    margin-left: 0px
    margin-right: 5px
  > *:last-child
    margin-right: 0px
    margin-left: 5px

.row-even > *
  flex: 1
  
/////////////
// display //
/////////////
.disp-none
  display: none

.disp-inline-block
  display: inline-block
  
.disp-block
  display: block

/////////////////
// positioning //
/////////////////
.absolute
  position: absolute

.relative
  position: relative
  
.fixed
  position: fixed
  
.top
  top: 0
  
.bottom
  bottom: 0
  
.left
  left: 0
  
.right
  right: 0

///////////////////
// width, height //
///////////////////
.w-full
  width: 100%
  
.w-full-at-1000
  width: 100%
  
.w-half
  width: 50%
  
.w-quarter
  width: 25%
  
.w-third
  width: 33.3%
  
.h-full
  height: 100%
  
.h-half
  height: 50%
  
.h-quarter
  height: 25%
  
for i in 1..280
  .w-{i * 5}
    width: i * 5px
    
  .w-max-{i * 5}
    max-width: i * 5px
  
  .w-min-{i * 5}
    min-width: i * 5px
    
  .h-{i * 5}
    height: i * 5px
  
  .h-min-{i * 5}
    min-height: i * 5px
    
  .h-max-{i * 5}
    max-height: i * 5px

for i in 100..250
  .full-if-lt-{i * 5}
    @media(max-width: i * 5px)
      width: 100%
  
  .fl-full-if-lt-{i * 5}
    @media(max-width: i * 5px)
      flex: 0 0 100%; /* fg: 0, fs: 0, fb: 100% */

for i in 10..140
  @media(max-width: i * 10px)
    .hide-lt-{i * 10}
      display: none
      
    .show-lt-{i * 10}
      display: initial
    
    .center-lt-{i * 10}
      text-align: center
      margin: auto
      
  @media(min-width: i * 10px)
    .hide-gt-{i * 10}
      display: none
      
    .show-gt-{i * 10}
      display: initial

/////////////////////
// margin, padding //
/////////////////////
.m-auto
  margin: auto
  
for i in 1..4
  .m-{i}
    margin: i * 1px

for i in 0..40
  .m-{i * 5}
    margin: i * 5px

  .m-v-{i * 5}
    margin-top: i * 5px
    margin-bottom: i * 5px

  .m-h-{i * 5}
    margin-left: i * 5px
    margin-right: i * 5px

  .m-l-{i * 5}
    margin-left: i * 5px

  .m-r-{i * 5}
    margin-right: i * 5px
    
  .m-t-{i * 5}
    margin-top: i * 5px
    
  .m-b-{i * 5}
    margin-bottom: i * 5px

  .p-{i * 5}
    padding: i * 5px

  .p-v-{i * 5}
    padding-top: i * 5px
    padding-bottom: i * 5px
    
  .p-h-{i * 5}
    padding-left: i * 5px
    padding-right: i * 5px
    
  .p-t-{i * 5}
    padding-top: i * 5px
    
  .p-b-{i * 5}
    padding-bottom: i * 5px
    
  .p-l-{i * 5}
    padding-left: i * 5px
    
  .p-r-{i * 5}
    padding-right: i * 5px