@mongodb-js/mongodb-ui-components/build/code-widget/style.js

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

"use strict";

module.exports = () => `
.code-widget * {
  box-sizing: border-box;
}

.code-widget {
  font-family: Akzidenz Grotesk BQ Light, Helvetica;
  color: #424242;
}

.code-widget strong,
.code-widget button {
  font-family: Akzidenz Grotesk BQ Medium, Helvetica;
  font-weight: 300;
}

.code-widget a {
  cursor: pointer;
  color: #589636;
  text-decoration: none;
}

.code-widget a:hover {
  text-decoration: underline;
}

.code-widget .monospace {
  font-family: monospace !important;
  font-size: 1em;
}

.code-widget h1,
.code-widget h2,
.code-widget h3 {
  margin: 15px 0;
  font-weight: 300;
  line-height: 1.25em;
}

.code-widget p {
  font-size: 16px
  margin: 15px 0;
  font-weight: 300;
  line-height: 1.5em !important
}

.code-widget pre {
  overflow-y: auto;
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.42857143;
  word-break: break-all;
  word-wrap: break-word;
  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.code-widget button {
  outline: 0;
  cursor: pointer;
  margin: 0;
  background-color: transparent;
  border: 0;
}

.code-widget .btn-fill,
.code-widget .btn-hollow {
  user-select: none;
  cursor: pointer;
  padding: 15px 40px;
  text-decoration: none;
  color: #fff;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid;
}

.code-widget .btn-hollow {
  border-color: #fff;
}

.code-widget .btn-hollow--gray {
  border-color: #616161;
  color: #616161;
}

.code-widget .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.code-widget .flex--wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.code-widget .flex--center-x {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@keyframes bounce-vertical {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0, -8px);
  }
  40% {
    transform: translate(0, 8px);
  }
  60% {
    transform: translate(0, -4px);
  }
  80% {
    transform: translate(0, 4px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.code-widget .code-widget__shadow {
  box-shadow: 2px 0 7px 0 rgba(0, 0, 0, 0.1);
}

.code-widget .code-widget__tab {
  z-index: 0;
  margin: 0 5px -10px 0;
  padding: 15px 21px 25px 21px;
  font-size: 16px;
  color: #fff;
  background-color: #c2e0b4;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: 2px 0 7px 0 rgba(0, 0, 0, 0.1);
}

.code-widget .code-widget__tab--active {
  color: #69b241;
  background-color: #ffffff;
  animation-name: bounce-vertical;
  animation-duration: 500ms;
}

.code-widget .code-widget__column {
  position: relative;
  z-index: 1;
  height: 550px;
}

.code-widget .code-widget__column--inactive {
  display: none;
}

.code-widget .code-widget__column-1 {
  width: 27%;
  background-color: #fff;
}

.code-widget .code-widget__column-2 {
  width: 50%;
}
  
.code-widget .code-widget__column-3 {
  width: 23%;
  background-color: #fff;
}

.code-widget .code-widget__column pre {
  white-space: pre-wrap;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: #f3f7fd;
}

.code-widget .code-widget__column code {
  height: calc(100% - 20px);
  margin: 15px 0 0;
  padding: 0 20px 20px;
  background-color: #f3f7fd;
  font-size: 12px;
}
  
.code-widget .code-widget__column-3 pre {
  background-color: transparent;
}
  
.code-widget .code-widget__column-3 code {
  display: block;
  overflow: hidden;
  font-size: 7px;
  height: calc(100% - 90px);
  background-color: transparent;
}
  
.code-widget .code-widget__column-3 code::-webkit-scrollbar {
  display: none;
}

.code-widget .code-widget__description {
  overflow-y: scroll;
  height: 255px;
  margin: 0;
  padding: 0 20px;
  font-size: 15px;
}

.code-widget .code-widget__navigation {
  padding: 0 20px;
  text-align: right;
}

.code-widget .code-widget__navigation-btn {
  cursor: default !important;
  padding: 10px;
  color: #b4bbc1;
  font-size: 14px;
  transition: color 300ms;
}
  
.code-widget .code-widget__navigation-btn--active {
  cursor: pointer !important;
  color: #69b241;
}
  
.code-widget .download-file-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: calc(100% - 40px);
  padding: 10px;
  font-size: 14px;
}

.code-widget .code-widget__progress {
  position: relative;
  width: calc(100% - 40px);
  margin: 0 20px 10px;
  height: 8px;
  border: solid 1px #e0e7e8;
}

.code-widget .code-widget__progress-bar {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background-color: #69b241;
  transition: 300ms;
  transform-origin: 0 50%;
}

.code-widget .code-widget__progress-bar--stage-0 {
  transform: scale(0.2, 1);
}

.code-widget .code-widget__progress-bar--stage-1 {
  transform: scale(0.4, 1);
}

.code-widget .code-widget__progress-bar--stage-2 {
  transform: scale(0.6, 1);
}

.code-widget .code-widget__progress-bar--stage-3 {
  transform: scale(0.8, 1);
}

.code-widget .code-widget__progress-bar--stage-4 {
  transform: scale(1, 1);
}
  
.code-widget .code-widget__column-1-options {
  position: absolute;
  width: calc(100% - 40px);
  bottom: 20px;
  margin: 10px 20px 0;
}
  
.code-widget .code-widget__column-1-options p {
  margin-bottom: 0;
}

.code-widget .clipboard-btn {
  width: 140px;
  padding: 10px;
  margin: 0 0 20px;
}
  
.code-widget .highlight-box {
  z-index: -1;
  position: absolute;
  width: 100%;
  top: 0;
  background-color: rgba(0,0,0,0.1);
}
  
.code-widget .minimap-section {
  display: block;
  padding: 5px 8px;
  margin: 0 -5px -10px -10px;
  transition: border-color 600ms;
  border: 3px solid transparent;
}
  
.code-widget .minimap-section--active {
  border-color: #6AAF4E;
}
  
.code-widget .hljs-keyword {
  color: #a626a4;
}
  
.code-widget .hljs-string {
  color: #50a14f;
}
  
.code-widget .hljs-number {
  color: #c18401;
}
  
.code-widget .hljs-built_in {
  color: #0184bc;
}
`;