@mongodb-js/mongodb-ui-components/public/mongodb-general.css

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

.white {
  color: #fff;
}
.green,
.mongo-green {
  color: #13aa52;
}
.dark-green {
  color: #116149;
}
.charcoal {
  color: #212121;
}
.slate {
  color: #42494f;
}
.ash {
  color: #b3bbc1;
}
.smoke {
  color: #f5f6f7;
}
.blush {
  color: #f4758b;
}
.sienna {
  color: #f58263;
}
.marigold {
  color: #f4b65d;
}
.air {
  color: #c2deff;
}
.bluebird {
  color: #658d95;
}
.dark-gray {
  color: #1a1a1a;
}
.black {
  color: #000;
}
.bg-white {
  background-color: #fff;
}
.bg-green,
.bg-mongo-green {
  background-color: #13aa52;
}
.bg-dark-green {
  background-color: #116149;
}
.bg-charcoal {
  background-color: #212121;
}
.bg-slate {
  background-color: #42494f;
}
.bg-ash {
  background-color: #b3bbc1;
}
.bg-smoke {
  background-color: #f5f6f7;
}
.bg-blush {
  background-color: #f4758b;
}
.bg-sienna {
  background-color: #f58263;
}
.bg-marigold {
  background-color: #f4b65d;
}
.bg-air {
  background-color: #c2deff;
}
.bg-bluebird {
  background-color: #658d95;
}
.bg-black {
  background-color: #000;
}
.bg-dark-gray {
  color: #1a1a1a;
}
.bg-black {
  color: #000;
}
@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) {
  .fnt-14 {
    font-size: 12px;
    line-height: 20px;
  }
}
.fnt-14 {
  font-size: 14px;
  line-height: 24px;
}
@media (max-width: phoneWidth) {
  .fnt-14 {
    font-size: 12px;
    line-height: 22px;
  }
}
.fnt-14 {
  font-size: 14px;
  line-height: 24px;
}
@media (max-width: phoneWidth) {
  .fnt-14 {
    font-size: 12px;
    line-height: 22px;
  }
}
.fnt-18 {
  font-size: 18px;
  line-height: 28px;
}
@media (max-width: phoneWidth) {
  .fnt-18 {
    font-size: 16px;
    line-height: 26px;
  }
}
.fnt-20 {
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: phoneWidth) {
  .fnt-20 {
    font-size: 18px;
    line-height: 26px;
  }
}
h1 {
  font-size: 48px;
  line-height: 58px;
}
@media (max-width: phoneWidth) {
  h1 {
    font-size: 34px;
    line-height: 44px;
  }
}
h2 {
  font-size: 34px;
  line-height: 46px;
}
@media (max-width: phoneWidth) {
  h2 {
    font-size: 26px;
    line-height: 36px;
  }
}
h3 {
  font-size: 24px;
  line-height: 34px;
}
@media (max-width: phoneWidth) {
  h3 {
    font-size: 22px;
    line-height: 30px;
  }
}
h4 {
  font-size: 20px;
  line-height: 30px;
}
@media (max-width: phoneWidth) {
  h4 {
    font-size: 18px;
    line-height: 26px;
  }
}
h5 {
  font-size: 24px;
  line-height: 34px;
}
@media (max-width: phoneWidth) {
  h5 {
    font-size: 22px;
    line-height: 30px;
  }
}
h6 {
  font-size: 18px;
  line-height: 28px;
}
@media (max-width: phoneWidth) {
  h6 {
    font-size: 16px;
    line-height: 26px;
  }
}
p {
  font-size: 16px;
  line-height: 24px;
}
@media (max-width: phoneWidth) {
  p {
    font-size: 14px;
    line-height: 22px;
  }
}
small {
  font-size: 14px;
  line-height: 22px;
}
@media (max-width: phoneWidth) {
  small {
    font-size: 12px;
    line-height: 20px;
  }
}
ul {
  padding: 0;
}
ul li {
  list-style-type: none;
}
.bullets {
  padding-left: 15px;
}
.bullets li {
  list-style-type: disc;
}
.txt-left {
  text-align: left;
}
.txt-right {
  text-align: right;
}
.txt-center {
  text-align: center;
}
a {
  color: #13aa52;
}
.overflow-hidden {
  overflow: hidden;
}
.hover-green:hover {
  color: #13aa52 !important;
}
.hover-bold:hover {
  font-family: Akzidenz Grotesk BQ Medium, Helvetica, Arial;
  font-weight: 400;
}
.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;
}
.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;
}
.btn-gray:hover,
.btn-white:hover,
.btn-slate:hover,
.btn-blush:hover,
.btn-marigold:hover,
.btn-air:hover,
.btn-bluebird:hover,
.btn-green:hover,
.btn-dark-green:hover,
.btn-dark-gray:hover,
.btn-black: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: #fff;
  background-color: #116149;
}
.btn-dark-gray {
  color: #fff;
  background-color: #1a1a1a;
}
.btn-black {
  color: #fff;
  background-color: #fff;
}
.btn-gray {
  color: #b3bbc1;
  background-color: #f5f6f7;
  box-shadow: 0 2px 7px 0 rgba(0,0,0,0.1);
}
.btn-gray.active {
  color: #808d97;
  background-color: #dadde1;
}
.btn-white {
  color: #13aa52;
  background-color: #fff;
}
.btn-slate {
  color: #fff;
  background-color: #42494f;
}
.btn-blush {
  color: #fff;
  background-color: #f4758b;
}
.btn-marigold {
  color: #fff;
  background-color: #f4b65d;
}
.btn-air {
  color: #fff;
  background-color: #c2deff;
}
.btn-bluebird {
  color: #fff;
  background-color: #658d95;
}
.btn-green {
  color: #fff;
  background-color: #13aa52;
}
.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);
}
.play-btn-green:before,
.play-btn-white: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: #13aa52;
  color: #fff;
}
.play-btn-white {
  background: #fff;
  color: #13aa52;
}
.play-btn-wide-green {
  background: #13aa52;
  color: #fff;
}
.play-btn-wide-white {
  background: #fff;
  color: #13aa52;
}
.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;
}
.play-btn-wide-green:before,
.play-btn-wide-white:before {
  content: '\25B6';
  font-size: 18px;
  margin-right: 10px;
  height: 19px;
}
.link {
  font-family: 'Akzidenz Grotesk BQ Medium';
  font-size: 16px;
  color: #13aa52;
  line-height: 24px;
}
.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;
}
.input-elem:focus {
  border: 1px solid #69b241;
  box-shadow: 0 0 2px 0 rgba(0,0,0,0.2);
}
[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;
}
.table:not(.table-striped) {
  width: 100%;
  font-size: 16px;
  border-collapse: collapse;
}
.table:not(.table-striped) td,
.table:not(.table-striped) th {
  padding: 15px 10px;
}
.table:not(.table-striped) th {
  font-family: 'Akzidenz Grotesk BQ Medium';
  font-weight: 500;
}
.table:not(.table-striped) td {
  border-bottom: 1px solid #b3bbc1;
  border-right: 1px solid #b3bbc1;
  line-height: 23px;
}
.table:not(.table-striped) td:last-child {
  border-right: none;
}
.table:not(.table-striped) th {
  border-bottom: 2px solid #b3bbc1;
}
@media (max-width: 800px) {
  .table:not(.table-striped) {
    font-size: 16px;
  }
}
.table.inner-green td:nth-child(2n) {
  background-color: #e7f6ee;
}
.table-align-top td {
  vertical-align: top;
}
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;
}
.blockquote-lg:before,
.blockquote-sm: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;
}
.blockquote-lg p:after,
.blockquote-sm p:after {
  content: '”';
}
.blockquote-lg p:before,
.blockquote-sm p: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 #13aa52;
  background: transparent;
}
.blockquote-lg.no-bg:before,
.blockquote-sm.no-bg:before {
  background: transparent;
}
.blockquote-lg.no-bg p,
.blockquote-sm.no-bg p {
  color: #42494f !important;
}
.blockquote-lg.no-bg p:before,
.blockquote-sm.no-bg p:before {
  position: absoute;
  top: -15px;
  content: url("/assets/images/style-guide/quote-green.svg") !important;
}
.screenshot-left,
.screenshot-right {
  perspective: 300px;
}
.screenshot-left img,
.screenshot-right 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) {
  .screenshot-left img {
    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) {
  .screenshot-right img {
    transform: rotate3d(0, 0, 0, 5deg) scale(0.9, 1);
  }
}
.callout {
  margin-top: 16px;
  padding: 15px;
  background-color: #f5f6f7;
  border-left: 5px solid #13aa52;
  border-radius: 3px;
}
.border {
  border: solid 1px #e0e7e8;
}
.border-green {
  border: solid 1px #13aa52;
}
.border-green-2 {
  border: solid 2px #13aa52;
}
.border-t-green-5 {
  border-top: solid 5px #13aa52;
}
.border-b-green-5 {
  border-bottom: solid 5px #13aa52;
}
.border-l-green-5 {
  border-left: solid 5px #13aa52;
}
.border-r-green-5 {
  border-right: solid 5px #13aa52;
}
.radius {
  border-radius: 4px;
}
.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, #fff 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;
}