@md-plugins/quasar-app-extension-q-press 0.1.0-alpha.10

package/src/templates/update/src/_q-press/css/app.scss

@@ -0,0 +1,662 @@
+@use 'sass:math';
+
+@import './fonts.scss';
+@import './prism-theme.scss';
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+.primary-line-height {
+  line-height: 1.5;
+}
+
+.normal-line-height {
+  line-height: normal;
+}
+
+.markdown-technical {
+  font-family: $font-family-technical;
+  font-weight: $font-weight-technical;
+  font-size: $font-size;
+  color: $light-text;
+  background-color: $light-bg;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: auto;
+}
+
+.markdown-brand {
+  font-size: $font-size-brand;
+  line-height: 1.5;
+}
+
+.markdown-brand,
+.markdown-header-menu {
+  font-family: $font-family-brand;
+  font-weight: $font-weight-brand;
+}
+
+// resets .markdown-technical above to Quasar original
+.markdown-example-typography {
+  font-size: 14px;
+  line-height: 1.5em;
+}
+
+strong {
+  font-weight: 700;
+}
+
+ul {
+  margin: 0 0 16px;
+}
+
+.q-list,
+.q-item {
+  color: $brand-light-text !important;
+  background: $brand-light-bg !important;
+  border-color: rgba(0, 0, 0, 0.28);
+}
+
+.q-list--dark,
+.q-item--dark {
+  color: $brand-dark-text !important;
+  background: $brand-dark-bg !important;
+  border-color: rgba(255, 255, 255, 0.28);
+}
+
+.markdown-token {
+  display: inline-block;
+  padding: 4px 6px;
+  font-size: $font-size;
+  line-height: $font-size;
+  border-radius: $generic-border-radius;
+  font-family: inherit;
+  color: $brand-primary;
+  vertical-align: baseline;
+  border: 1px solid currentColor;
+}
+
+.markdown-note {
+  font-size: $font-size;
+  border-radius: $generic-border-radius;
+  margin: 16px 0;
+  padding: 16px;
+  border-width: 1px;
+  border-style: solid;
+
+  > p,
+  > ul {
+    margin-bottom: 0;
+  }
+
+  &:not(.markdown-note--tip, .markdown-note--warning, .markdown-note--danger) {
+    color: $brand-light-text;
+    background-color: $brand-light-bg;
+    border-color: $separator-color;
+    // .markdown-note__title,
+    .markdown-link,
+    .markdown-token {
+      color: $brand-primary;
+    }
+    .markdown-token {
+      border-color: $brand-primary;
+    }
+  }
+
+  &--tip {
+    color: scale-color($positive, $lightness: -40%) !important;
+    background-color: scale-color($positive, $lightness: 85%);
+    border-color: $positive;
+    .markdown-note__title,
+    .markdown-link,
+    .markdown-token {
+      color: scale-color($positive, $lightness: -40%);
+    }
+    .markdown-token {
+      border-color: scale-color($positive, $lightness: -40%);
+    }
+  }
+
+  &--warning {
+    color: scale-color($warning, $lightness: -40%);
+    background-color: scale-color($warning, $lightness: 85%);
+    border-color: scale-color($warning, $lightness: -30%);
+    .markdown-note__title,
+    .markdown-link,
+    .markdown-token {
+      color: scale-color($warning, $lightness: -40%);
+    }
+    .markdown-token {
+      border-color: scale-color($warning, $lightness: -40%);
+    }
+  }
+
+  &--danger {
+    color: scale-color($negative, $lightness: -40%);
+    background-color: scale-color($negative, $lightness: 90%);
+    border-color: $negative;
+    .markdown-note__title,
+    .markdown-link,
+    .markdown-token {
+      color: $negative;
+    }
+    .markdown-token {
+      border-color: $negative;
+    }
+  }
+
+  &--details {
+    .markdown-note__title {
+      cursor: pointer;
+      display: list-item;
+    }
+
+    &:not([open]) > .markdown-note__title {
+      padding-bottom: 0;
+    }
+  }
+
+  &__title {
+    font-weight: 700;
+    letter-spacing: $letter-spacing-brand;
+    padding-bottom: 8px;
+  }
+}
+
+.markdown-heading {
+  color: $brand-light-text;
+  word-break: break-word;
+  letter-spacing: $letter-spacing-brand;
+  padding: 0;
+  line-height: 1.1em;
+  margin: 2.5em 0 1em;
+
+  &:not(#introduction) {
+    cursor: pointer;
+
+    &:after {
+      content: ' #';
+      opacity: 0;
+    }
+    &:hover:after {
+      opacity: 1;
+    }
+  }
+}
+
+.markdown-h1 {
+  font-size: 2.4em;
+  font-weight: 700;
+  margin: 0 0 1em !important;
+  display: flex;
+  align-items: center;
+}
+
+.markdown-h2 {
+  font-size: 1.8em;
+  font-weight: 600;
+  padding-bottom: 8px !important;
+  border-bottom: 1px solid $separator-color;
+}
+
+.markdown-h3 {
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+.markdown-h4 {
+  font-size: 1.4em;
+  font-weight: 500;
+  &:before {
+    content: '» ';
+    vertical-align: text-top;
+  }
+}
+
+.markdown-h5 {
+  font-size: 1em;
+  font-weight: 500;
+  &:before {
+    content: '»» ';
+    vertical-align: text-top;
+  }
+}
+
+.markdown-h6 {
+  font-size: 1em;
+  font-weight: 400;
+  &:before {
+    content: '»»» ';
+    vertical-align: text-top;
+  }
+}
+
+@media (max-width: 850px) {
+  .markdown-h1 {
+    font-size: 1.7em;
+  }
+  .markdown-h2 {
+    font-size: 1.4em;
+  }
+  .markdown-h3 {
+    font-size: 1.3em;
+  }
+  .markdown-h4 {
+    font-size: 1.2em;
+  }
+  .markdown-h5 {
+    font-size: 1.1em;
+  }
+}
+
+.markdown-img {
+  max-width: 100%;
+}
+
+.markdown-page-listing {
+  .q-icon {
+    font-size: 20px;
+    margin-right: 8px;
+    color: $brand-primary;
+  }
+}
+
+kbd {
+  font-family: $font-family-examples;
+  white-space: nowrap;
+  display: inline-block;
+  padding: 4px 4px 6px;
+  font-size: 0.8em;
+  line-height: 0.8em;
+  border-radius: 4px;
+  margin: 0 0.2em;
+  color: $grey-8;
+  background: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
+  box-shadow:
+    inset 0 -2px 0 0 #cdcde6,
+    inset 0 0 1px 1px #fff,
+    0 1px 2px 1px rgba(30, 35, 90, 0.4);
+}
+
+.markdown-gdpr {
+  font-family: $font-family-brand;
+  max-width: 360px;
+  &,
+  .q-btn {
+    font-weight: 700;
+  }
+}
+
+.q-page > .q-badge + .markdown-example {
+  margin-top: 0;
+}
+
+body.q-scroll--lock .q-page > * {
+  overflow-anchor: none;
+}
+
+body.q-scroll--lock .q-page > .q-scroll--anchor {
+  overflow-anchor: auto;
+}
+
+// makes the scroll bar look better for the drop-down menus in the header
+::-webkit-scrollbar {
+  height: 12px;
+  width: 14px;
+  background: transparent;
+  z-index: 12;
+  overflow: visible;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 10px;
+  background-color: $brand-primary;
+  border-radius: 10px;
+  z-index: 12;
+  border: 4px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  transition: background-color $header-quick-transition;
+  margin: 4px;
+  min-height: 32px;
+  min-width: 32px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: $brand-primary;
+}
+
+.shadow-bottom {
+  &-small {
+    box-shadow: $shadow--small;
+  }
+
+  &-medium {
+    box-shadow: $shadow--medium;
+  }
+
+  &-large {
+    box-shadow: $shadow--large;
+  }
+}
+
+.heading {
+  display: block;
+  text-align: center;
+  text-transform: uppercase;
+
+  &--large {
+    color: $brand-primary;
+    font-size: 24px;
+    font-weight: 700;
+    letter-spacing: 6.75px;
+    margin: 12px 0 36px 0;
+
+    @media (min-width: $breakpoint-sm-min) {
+      font-size: 36px;
+    }
+  }
+
+  &--medium {
+    color: $brand-primary;
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 4.5px;
+
+    @media (min-width: $breakpoint-sm-min) {
+      font-size: 24px;
+    }
+  }
+
+  &--small {
+    color: white;
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: 3.75px;
+    text-transform: initial;
+
+    @media (min-width: $breakpoint-sm-min) {
+      font-size: 20px;
+    }
+  }
+
+  &--quote {
+    color: $brand-primary;
+    font-size: $font-size;
+    font-weight: 400;
+    letter-spacing: 3px;
+    text-transform: initial;
+
+    @media (min-width: $breakpoint-sm-min) {
+      font-size: 16px;
+    }
+  }
+}
+
+.landing-mb--large {
+  margin-bottom: 64px;
+  @media (min-width: $breakpoint-sm-min) {
+    margin-bottom: 100px;
+  }
+}
+
+.landing-mx--large {
+  margin-left: 64px;
+  margin-right: 64px;
+  @media (min-width: $breakpoint-sm-min) {
+    margin-left: 100px;
+    margin-right: 100px;
+  }
+}
+
+.landing-my-large {
+  margin: 36px 0;
+}
+
+.call-to-action-btn {
+  background: $brand-accent;
+  color: #fff;
+  font-weight: 700;
+  font-size: $font-size;
+  letter-spacing: 2.63px;
+
+  &.q-btn--rectangle {
+    padding: 16px;
+  }
+}
+
+.markdown-table {
+  width: fit-content;
+  max-width: 100%;
+  th,
+  td {
+    font-size: $font-size !important;
+  }
+  th {
+    font-weight: 700;
+    letter-spacing: $letter-spacing-brand;
+  }
+}
+
+.header-btn {
+  color: $header-btn-color--light;
+  transition: color $header-transition;
+
+  &.q-btn--round {
+    font-size: 12px;
+    .q-icon {
+      font-size: 21px;
+    }
+  }
+
+  &:not(.disabled):hover {
+    color: $header-btn-hover-color--light;
+  }
+
+  .q-focus-helper,
+  .q-focus-helper:before,
+  .q-focus-helper:after {
+    transition:
+      background-color $header-transition,
+      opacity $header-transition;
+  }
+}
+
+.header-toolbar {
+  color: $header-btn-color--light;
+  background: $brand-light;
+}
+
+.header-tabs,
+.header-tabs .q-tabs__content {
+  background: $brand-light;
+  letter-spacing: $letter-spacing-brand;
+  border-radius: $generic-border-radius $generic-border-radius 0 0;
+}
+
+.header-toolbar,
+.header-tabs,
+.header-tabs .q-tab {
+  min-height: 40px;
+  transition: color $header-transition;
+}
+
+.markdown-heading .q-badge,
+.header-badge {
+  color: $brand-primary;
+  background: scale-color($light-bg, $lightness: 15%);
+  vertical-align: super;
+  letter-spacing: $letter-spacing-brand;
+  padding: 4px 8px;
+  border: $brand-primary 1px solid;
+}
+
+$additional-colors: (
+  'brand-primary' $brand-primary,
+  'brand-secondary' $brand-secondary,
+  'brand-accent' $brand-accent
+);
+@each $color-name, $color in $additional-colors {
+  :root {
+    --q-#{$color-name}: #{$color};
+  }
+
+  .bg-#{$color-name} {
+    background-color: var(--q-#{$color-name}) !important;
+  }
+
+  .text-#{$color-name} {
+    color: var(--q-#{$color-name}) !important;
+  }
+}
+
+$text-size-list: 12, 14, 16, 20, 24, 36;
+@each $text-size in $text-size-list {
+  .text-size-#{$text-size} {
+    font-size: #{$text-size}px !important;
+  }
+}
+
+$letter-spacing-list: 40, 100, 225, 263, 300, 375, 450;
+@each $letter-spacing in $letter-spacing-list {
+  .letter-spacing-#{$letter-spacing} {
+    letter-spacing: math.div($letter-spacing, 100) + px !important;
+  }
+}
+
+body.body--dark {
+  .markdown-technical {
+    color: $brand-dark-text;
+    background: $brand-dark-bg;
+  }
+
+  .header-btn {
+    color: $header-btn-color--dark;
+    &:not(.disabled):hover {
+      color: $header-btn-hover-color--dark;
+    }
+  }
+
+  .header-toolbar {
+    color: $header-btn-color--dark;
+    background: $dark-bg;
+  }
+
+  .header-tabs,
+  .q-tabs__content {
+    background: $dark-bg;
+  }
+
+  .markdown-heading {
+    color: $brand-dark-text;
+  }
+
+  .markdown-heading .q-badge,
+  .header-badge {
+    color: $brand-primary;
+    background: $brand-dark-codeblock-bg;
+  }
+
+  .markdown-img {
+    background-color: $brand-medium;
+    border-radius: $generic-border-radius;
+  }
+
+  .markdown-note {
+    &:not(.markdown-note--tip, .markdown-note--warning, .markdown-note--danger) {
+      color: scale-color($dark-pill, $lightness: 80%);
+      background-color: $dark-pill;
+      border-color: scale-color($dark-pill, $lightness: 50%);
+      .markdown-token {
+        border-color: #ddd;
+        color: #ddd;
+      }
+    }
+
+    &--tip {
+      border-color: $positive;
+      background-color: scale-color($positive, $lightness: -85%);
+      .markdown-note__title,
+      .markdown-link,
+      .markdown-token {
+        color: $positive;
+      }
+      .markdown-token {
+        border-color: $positive;
+      }
+    }
+
+    &--warning {
+      border-color: $warning;
+      background-color: scale-color($warning, $lightness: -85%);
+      .markdown-note__title,
+      .markdown-link,
+      .markdown-token {
+        color: $warning;
+      }
+      .markdown-token {
+        border-color: $warning;
+      }
+    }
+
+    &--danger {
+      border-color: $negative;
+      background-color: scale-color($negative, $lightness: -80%);
+    }
+  }
+
+  .markdown-h2 {
+    border-color: $separator-dark-color;
+  }
+
+  kbd {
+    color: $dark-text;
+    background: linear-gradient(-225deg, $brown, $brown-9);
+    box-shadow:
+      inset 0 -2px 0 0 $brown-10,
+      inset 0 0 1px 1px $brown-8,
+      -1px 0 0 0 $brown,
+      1px 0 0 0 $brown,
+      0 1px 0 0 $brown;
+  }
+}
+
+.markdown-card-title {
+  margin-left: -12px;
+  padding: 4px 8px 4px 28px;
+  position: relative;
+  border-radius: 3px 5px 5px 0;
+  background: scale-color($brand-light, $lightness: -15%);
+  color: $brand-secondary;
+  font-size: ($font-size + 2px);
+  letter-spacing: $letter-spacing-brand;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 0;
+    height: 0;
+    border: 0 solid transparent;
+    border-width: 9px 0 0 11px;
+    border-top-color: scale-color($brand-light, $lightness: -25%);
+  }
+}
+
+body.body--dark .markdown-card-title {
+  background: $brand-secondary;
+  color: $dark-text;
+  &:after {
+    border-top-color: scale-color($brand-secondary, $lightness: -30%);
+  }
+}