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

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

////////////
// Colors //
////////////

white = #ffffff
mongo_green = green = #13AA52
dark_green = #116149
charcoal = #212121
slate = #42494F
ash = #B3BBC1
smoke = #F5F6F7
blush = #F4758B
sienna = #F58263
marigold = #F4B65D
air = #C2DEFF
bluebird = #658D95
dark_gray = #1A1A1A
black = #000

.white
  color: white
.green
.mongo-green
  color: green
.dark-green
  color: dark_green
.charcoal
  color: charcoal
.slate
  color: slate
.ash
  color: ash
.smoke
  color: smoke
.blush
  color: blush
.sienna
  color: sienna
.marigold
  color: marigold
.air
  color: air
.bluebird
  color: bluebird
.dark-gray
  color: dark_gray
.black
  color: black


.bg-white
  background-color: white
.bg-green
.bg-mongo-green
  background-color: green
.bg-dark-green
  background-color: dark_green
.bg-charcoal
  background-color: charcoal
.bg-slate
  background-color: slate
.bg-ash
  background-color: ash
.bg-smoke
  background-color: smoke
.bg-blush
  background-color: blush
.bg-sienna
  background-color: sienna
.bg-marigold
  background-color: marigold
.bg-air
  background-color: air
.bg-bluebird
  background-color: bluebird
.bg-black
  background-color: black
.bg-dark-gray
  color: dark_gray
.bg-black
  color: black

////////////////
// Typography //
////////////////

@font-face
  font-family: 'Akzidenz Grotesk BQ Light'
  src: url('/assets/fonts/akzidenzgroteskbq_light-webfont.woff2') format('woff2'),url('/assets/fonts/akzidenzgroteskbq_light-webfont.woff') format('woff')
  font-weight: normal
  font-style: normal

@font-face
  font-family: 'Akzidenz Grotesk BQ Medium'
  src: url('/assets/fonts/akzidenzgroteskbq_medium-webfont.woff2') format('woff2'),url('/assets/fonts/akzidenzgroteskbq_medium-webfont.woff') format('woff')
  font-weight: normal
  font-style: normal

@font-face
  font-family: 'DIN'
  src: url('/assets/fonts/DINWeb-Light.woff')

@font-face
  font-family: 'DIN'
  src: url('/assets/fonts/DINWeb-Bold.woff')
  font-weight: bold
  
@font-face
  font-family: 'SourceCodePro'
  src: url('/assets/fonts/SourceCodePro-Regular.otf')

@font-face
  font-family: 'SourceCodePro'
  src: url('/assets/fonts/SourceCodePro-Semibold.otf')
  font-weight: bold

@font-face
  font-family: 'icomoon'
  src: url('/assets/fonts/icomoon.woff') format('woff')
  font-weight: normal
  font-style: normal

*
  -webkit-font-smoothing: subpixel-antialiased

@media (-webkit-min-device-pixel-ratio: 2)
  *
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale

body, input, button
  font-family: Akzidenz Grotesk BQ Light, Helvetica
  color: #42494F
  font-size: 16px
  
h1, h2, h3, h4, h5, h6, p
  margin: 15px 0

h1, h2, h3, h4, strong, button, b, .bold
  font-family: Akzidenz Grotesk BQ Medium, Helvetica, Arial
  font-weight: 400

.fnt-light
  font-family: Akzidenz Grotesk BQ Light, Helvetica, Arial

h5, h6, p, small, body, input
  font-family: Akzidenz Grotesk BQ Light, Helvetica, Arial
  font-weight: 500
  
.fnt-14
  font-size: 14px
  line-height: 22px
  
  @media(max-width: phoneWidth)
    font-size: 12px
    line-height: 20px

.fnt-14
  font-size: 14px
  line-height: 24px
  
  @media(max-width: phoneWidth)
    font-size: 12px
    line-height: 22px

.fnt-14
  font-size: 14px
  line-height: 24px
  
  @media(max-width: phoneWidth)
    font-size: 12px
    line-height: 22px

.fnt-18
  font-size: 18px
  line-height: 28px

  @media(max-width: phoneWidth)
    font-size: 16px
    line-height: 26px

.fnt-20
  font-size: 20px
  line-height: 30px

  @media(max-width: phoneWidth)
    font-size: 18px
    line-height: 26px

h1
  font-size: 48px
  line-height: 58px

  @media(max-width: phoneWidth)
    font-size: 34px
    line-height: 44px

h2
  font-size: 34px
  line-height: 46px

  @media(max-width: phoneWidth)
    font-size: 26px
    line-height: 36px

h3
  font-size: 24px
  line-height: 34px

  @media(max-width: phoneWidth)
    font-size: 22px
    line-height: 30px

h4
  font-size: 20px
  line-height: 30px

  @media(max-width: phoneWidth)
    font-size: 18px
    line-height: 26px

h5
  font-size: 24px
  line-height: 34px

  @media(max-width: phoneWidth)
    font-size: 22px
    line-height: 30px

h6
  font-size: 18px
  line-height: 28px

  @media(max-width: phoneWidth)
    font-size: 16px
    line-height: 26px

p
  font-size: 16px
  line-height: 24px
  
  @media(max-width: phoneWidth)
    font-size: 14px
    line-height: 22px
  
small
  font-size: 14px
  line-height: 22px
  
  @media(max-width: phoneWidth)
    font-size: 12px
    line-height: 20px
    
ul
  padding: 0
    
  li
    list-style-type: none

.bullets
  padding-left: 15px
  li
    list-style-type: disc

.txt-left
  text-align: left

.txt-right
  text-align: right

.txt-center
  text-align: center

a
  color: green
  
.overflow-hidden
  overflow: hidden
  
.hover-green:hover
  color: green !important
  
.hover-bold:hover
  font-family: Akzidenz Grotesk BQ Medium, Helvetica, Arial
  font-weight: 400
  
///////////////////
// Code Snippets //
///////////////////

.code
  overflow-y: auto
  display: block
  padding: 10px
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace
  font-size: 14px
  line-height: 1.42857143
  border-radius: 4px
  
code, .inline-code
  padding: 0
  font-size: inherit
  background-color: transparent
  border-radius: 0

.code-dark
.code-light
  overflow-y: auto
  display: block
  padding: 20px
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace
  font-size: 12px
  line-height: 1.42857143
  word-break: break-all
  word-wrap: break-word
  border-radius: 4px

.code-dark
  background-color: #2C303A

.code-light
  background-color: #f0f0f0

/////////////
// Buttons //
/////////////

.btn-gray
.btn-white
.btn-slate
.btn-blush
.btn-marigold
.btn-air
.btn-bluebird
.btn-green
.btn-dark-green
.btn-dark-gray
.btn-black
  font-family: 'Akzidenz Grotesk BQ Medium'
  font-weight: 400
  cursor: pointer
  border-radius: 4px
  border: none
  font-size: 16px
  padding: 10px 30px
  box-shadow: 0 2px 7px 0 rgba(0,0,0,0.1)
  transform: translateY(0)
  transition: transform 150ms, box-shadow 150ms
  &:hover
    transform: translateY(-2px)
    box-shadow: 0 3px 9px 0 rgba(0,0,0,0.15)

.btn-small
  padding: 8px 16px
  font-size: 13px

.btn-med
  padding: 18px 30px

.btn-lg
  padding: 25px 40px

.btn-dark-green
  color: white
  background-color: dark_green

.btn-dark-gray
  color: white
  background-color: dark_gray

.btn-black
  color: white
  background-color: white
    
.btn-gray
  color: ash
  background-color: smoke
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.1)
  
.btn-gray.active
  color: darken(ash, 25%)
  background-color: darken(smoke, 10%)
  
.btn-white
  color: green
  background-color: white

.btn-slate
  color: white
  background-color: slate
  
.btn-blush
  color: white
  background-color: blush
  
.btn-marigold
  color: white
  background-color: marigold
  
.btn-air
  color: white
  background-color: air
  
.btn-bluebird
  color: white
  background-color: bluebird

.btn-green
  color: white
  background-color: green

.play-btn-green
.play-btn-white
  border-radius: 100%
  width: 100%
  height: 100%
  position: relative
  box-shadow: 0 2px 7px 0 rgba(0,0,0,0.2)
  &:before
    content: '\25B6'
    position absolute
    top: calc(50% - 15px)
    left: calc(50% - 10px)
    width: 30px
    font-size: 30px
    line-height: 30px

.play-btn-green
  background: green
  color: white

.play-btn-white
  background: white
  color: green

.play-btn-wide-green
  background: green
  color: white

.play-btn-wide-white
  background: white
  color: green

.play-btn-wide-green
.play-btn-wide-white
  padding: 15px 25px
  border-radius: 25px
  box-shadow: 0 2px 7px 0 rgba(0,0,0,0.2);
  font-size: 16px
  display: flex
  align-items: center
  &:before
    content: '\25B6'
    font-size: 18px
    margin-right: 10px
    height: 19px
    
///////////
// Links //
///////////

.link
  font-family: 'Akzidenz Grotesk BQ Medium'
  font-size: 16px
  color: mongo_green
  line-height: 24px


///////////
// Input //
///////////

.input-elem
  padding: 12px
  font-size: 16px
  line-height: 19px
  width: 100%
  border-radius: 2px
  border: 1px solid #B3BBC1
  box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.2)
  transition: all 300ms
  &:focus
    border: 1px solid #69B241
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.2)

///////////
// Icons //
///////////

[class^="icon-"], [class*=" icon-"]
  font-family: 'icomoon'
  speak: none
  font-style: normal
  font-weight: normal
  font-variant: normal
  text-transform: none
  line-height: 1

.icon-presentation:before
  content: "\e609"
.icon-lightbulb:before
  content: "\e60a"
.icon-world:before
  content: "\e60b"
.icon-in:before
  content: "\e600"
.icon-library:before
  content: "\e611"
.icon-phone:before
  content: "\e601"
.icon-calendar:before
  content: "\e60c"
.icon-share:before
  content: "\e613"
.icon-google-plus-square:before
  content: "\e602"
.icon-facebook:before
  content: "\e60d"
.icon-facebook-square:before
  content: "\e603"
.icon-twitter:before
  content: "\e60e"
.icon-twitter-square:before
  content: "\e604"
.icon-play:before
  content: "\e612"
.icon-youtube:before
  content: "\e60f"
.icon-github:before
  content: "\e610"
.icon-linux:before
  content: "\e606"
.icon-apple:before
  content: "\e607"
.icon-windows:before
  content: "\e608"
.icon-linkedin-square:before
  content: "\e605"
.icon-angle-left:before
  content: "\f104"
.icon-angle-right:before
  content: "\f105"
.icon-angle-up:before
  content: "\f106"
.icon-angle-down:before
  content: "\f107"
.icon-life-bouy:before
  content: "\f1cd"
.icon-monitor:before
  content: "\e021"
.icon-search:before
  content: "\e036"
.icon-circle-check:before
  content: "\e042"
.icon-circle-cross:before
  content: "\e043"
.icon-check:before
  content: "\e116"
.icon-cross:before
  content: "\e117"
.icon-menu:before
  content: "\e120"
.icon-open:before
  content: "\e128"

.no-decor
  text-decoration: none !important
  color: inherit
  
.no-decor *
  text-decoration: none !important

.hover-underline:hover
  text-decoration: underline !important
  

////////////
// Tables //
////////////

.table:not(.table-striped)
  width: 100%
  font-size: 16px
  border-collapse: collapse
  
  td, th
    padding: 15px 10px
  
  th
    font-family: 'Akzidenz Grotesk BQ Medium'
    font-weight: 500
  
  td
    border-bottom: 1px solid #B3BBC1
    border-right: 1px solid #B3BBC1
    line-height: 23px

  td:last-child
    border-right: none
  
  th
    border-bottom: 2px solid #B3BBC1
  
  @media(max-width: 800px)
    font-size: 16px

.table.inner-green td:nth-child(2n)
  background-color: #e7f6ee
    
.table-align-top
  td
    vertical-align: top

/////////////////
// Blockquotes //
/////////////////
blockquote
  margin: 0

.blockquote-lg
  padding: 50px
.blockquote-sm
  padding: 10px 0px
.blockquote-lg p
  font-size: 24px
  line-height: 34px
.blockquote-sm p
  font-size: 20px
  line-height: 28px

.blockquote-lg
.blockquote-sm
  display: flex
  justify-content: center
  align-items: center
  width: 100%
  background: #F3F7FD
  position: relative
  margin: 0
  &:before
    position: absolute
    content: ' '
    width: 100%
    height: 100%
    background: url('/assets/images/style-guide/testimonial-bg.svg')
    background-size: 100%
    z-index: 0

.blockquote-lg blockquote
.blockquote-sm blockquote
  margin: 20px 15px

.blockquote-lg img
.blockquote-sm img
  width: 150px
  margin-right: 60px
  z-index: 1

.blockquote-lg p
.blockquote-sm p
  margin: 0px 0px 10px 0px
  color: #8D8D8E
  z-index: 1
  max-width: 500px
  position: relative
  &:after
    content: '”'
  &:before
    content: url('/assets/images/style-guide/quote.svg')
    position: absolute
    top: -15px
    left: -20px

.blockquote-lg.no-bg
.blockquote-sm.no-bg
  border-left: 3px solid green
  background: transparent
  &:before
    background: transparent
  p
    color: slate !important
    &:before
      position: absoute
      top: -15px
      content: url('/assets/images/style-guide/quote-green.svg') !important

/////////////////
// Screenshots //
/////////////////

.screenshot-left
.screenshot-right
  perspective: 300px
  img
    border-radius: 8px
    box-shadow: 0 20px 25px 0 rgba(0,0,0,0.1)
    transform-style: preserve-3d

.screenshot-left img
  transform: rotate3d(0, 1, 0, 5deg) scale(0.9, 1)
  @media(max-width: 800px)
    transform: rotate3d(0, 0, 0, 5deg) scale(0.9, 1)

.screenshot-right img
  transform: rotate3d(0, 1, 0, -5deg) scale(0.9, 1)
  @media(max-width: 800px)
    transform: rotate3d(0, 0, 0, 5deg) scale(0.9, 1)
  
/////////////
// Callout //
/////////////

.callout
  margin-top: 16px
  padding: 15px
  background-color: smoke
  border-left: 5px solid mongo_green
  border-radius: 3px
  
/////////////
// Borders //
/////////////
.border
  border: solid 1px #e0e7e8
  
.border-green
  border: solid 1px mongo_green
  
.border-green-2
  border: solid 2px mongo_green

.border-t-green-5
  border-top: solid 5px mongo_green
  
.border-b-green-5
  border-bottom: solid 5px mongo_green
  
.border-l-green-5
  border-left: solid 5px mongo_green
  
.border-r-green-5
  border-right: solid 5px mongo_green

.radius
  border-radius: 4px

///////////////
// Templates //
///////////////

.shadow 
  box-shadow: 0 2px 7px 0 rgba(0,0,0,0.2)

.no-shadow
  box-shadow: none
  
.arrow-down
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent
  border-right: 10px solid transparent
  border-top: 10px solid #fff

.gradient-one
  background: linear-gradient(115.46deg, #FCFCFC 0%, #FCFDFD 49.07%, #F3F8FF 100%)

.gradient-two
  background: linear-gradient(116.13deg, #FFFFFF 0%, #FCFDFD 49.18%, #F5F6F7 100%) 
  
.box-shadow-top
  width: 100%
  height: 15px
  position: absolute
  bottom: 20px
  box-shadow: 0 0px 70px 50px #fff
  background: #fff

.list
  li
    line-height: 1.5em !important
    margin: 15px 0 15px 0 !important

ol.list
ul.list
  padding-left: 30px !important

ul.list
  list-style-type: disc !important

ol.list
  list-style-type: decimal !important