@salesforcedevs/dx-components 0.25.5 → 0.26.1-alpha0.3

package/src/modules/helpers/code/code.css

@@ -1,296 +0,0 @@
-/* Custom prism.js stylesheet */
-/* stylelint-disable selector-pseudo-element-no-unknown */
-.dx-variant-block dx-button {
-    --dx-c-button-primary-color: var(--dx-g-gray-50);
-    --dx-c-button-primary-color-hover: var(--dx-g-gray-50);
-    --dx-c-button-secondary-color-hover: var(--dx-g-gray-95);
-    --dx-c-button-inline-color-hover: var(--dx-g-gray-50);
-}
-
-.dx-theme-dark.dx-variant-card dx-button {
-    --dx-c-button-primary-color: var(--dx-g-hot-orange-vibrant-95);
-    --dx-c-button-primary-color-hover: var(--dx-g-hot-orange-vibrant-95);
-    --dx-c-button-secondary-color-hover: var(--dx-g-blue-vibrant-10);
-    --dx-c-button-inline-color-hover: var(--dx-g-hot-orange-vibrant-95);
-}
-
-.dx-theme-light.dx-variant-card dx-button {
-    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-20);
-    --dx-c-button-primary-color-hover: var(--dx-g-blue-vibrant-20);
-    --dx-c-button-secondary-color-hover: var(--dx-g-hot-orange-vibrant-95);
-    --dx-c-button-inline-color-hover: var(--dx-g-hot-orange-vibrant-95);
-}
-
-pre[class*="language-"],
-code[class*="language-"] {
-    font-size: 14px;
-    text-shadow: none;
-    font-family: var(--dx-g-font-mono);
-    direction: ltr;
-    text-align: left;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    line-height: 20px;
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-}
-
-pre[class*="language-"]::selection,
-code[class*="language-"]::selection,
-pre[class*="language-"]::mozselection,
-code[class*="language-"]::mozselection {
-    text-shadow: none;
-}
-
-.dx-theme-dark code[class*="language-"] {
-    color: rgb(255, 255, 255);
-}
-
-.dx-theme-light code[class*="language-"] {
-    color: var(--dx-g-gray-10);
-}
-
-.dx-theme-dark code[class*="language-"]::mozselection {
-    background: rgb(255, 255, 255);
-}
-
-.dx-theme-light code[class*="language-"]::mozselection {
-    background: var(--dx-g-gray-95);
-}
-
-.dx-variant-card pre[class*="language-"] {
-    padding: 1em;
-    border-radius: 0 0 0.3em 0.3em;
-    overflow: auto;
-    word-wrap: normal;
-    white-space: pre;
-}
-
-.dx-variant-card :not(pre) > code[class*="language-"] {
-    padding: 0.1em 0.3em;
-    border-radius: 0.3em;
-}
-
-.dx-variant-block pre[class*="language-"] {
-    padding: 1em;
-    border-radius: 0.3em;
-    overflow: auto;
-    word-wrap: normal;
-    white-space: pre;
-    width: 94%;
-}
-
-.dx-variant-block :not(pre) > code[class*="language-"] {
-    padding: 0.1em 0.3em;
-    border-radius: 0.3em;
-}
-
-.dx-theme-dark pre[class*="language-"] {
-    color: rgb(255, 255, 255);
-    background: var(--dx-g-blue-vibrant-10);
-}
-
-.dx-theme-dark :not(pre) > code[class*="language-"] {
-    color: rgb(255, 255, 255);
-    background: var(--dx-g-blue-vibrant-10);
-}
-
-.dx-theme-light pre[class*="language-"] {
-    color: var(--dx-g-gray-10);
-    background: var(--dx-g-gray-95);
-}
-
-.dx-theme-light :not(pre) > code[class*="language-"] {
-    color: var(--dx-g-gray-10);
-    background: var(--dx-g-gray-95);
-}
-
-/*********************************************************
-* Tokens
-*/
-.namespace {
-    opacity: 0.7;
-}
-
-.token.important,
-.token.bold {
-    font-weight: bold;
-}
-
-.token.italic {
-    font-style: italic;
-}
-
-.token.entity {
-    cursor: help;
-}
-
-/*********************************************************
-* Line highlighting
-*/
-pre[data-line] {
-    position: relative;
-}
-
-pre[class*="language-"] > code[class*="language-"] {
-    position: relative;
-    display: block;
-    z-index: 1;
-}
-
-.line-highlight {
-    position: absolute;
-    left: 0;
-    right: 0;
-    padding: inherit 0;
-    margin-top: 1em;
-    background: #1e2d50;
-    box-shadow: inset 5px 0 0 #0176d3;
-    z-index: 0;
-    pointer-events: none;
-    line-height: inherit;
-    white-space: pre;
-}
-
-.line-numbers .line-highlight::before,
-.line-numbers .line-highlight::after {
-    content: none;
-}
-
-.line-numbers-rows > span::before {
-    content: counter(linenumber);
-    color: var(--dx-g-gray-50);
-    display: block;
-    padding-right: 0.4em;
-    text-align: right;
-}
-
-pre[id].linkable-line-numbers span.line-numbers-rows {
-    pointer-events: all;
-}
-
-pre[id].linkable-line-numbers span.line-numbers-rows > span::before {
-    cursor: pointer;
-}
-
-pre[id].linkable-line-numbers span.line-numbers-rows > span:hover::before {
-    background-color: rgba(128, 128, 128, 0.2);
-}
-
-pre[class*="language-"].line-numbers {
-    position: relative;
-    padding-left: 3.8em;
-    counter-reset: linenumber;
-}
-
-pre[class*="language-"].line-numbers > code {
-    position: relative;
-    white-space: inherit;
-}
-
-.line-numbers .line-numbers-rows {
-    position: absolute;
-    pointer-events: none;
-    top: 0;
-    font-size: 100%;
-    left: -3.8em;
-    width: 3em; /* works for line-numbers below 1000 lines */
-    letter-spacing: -1px;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.line-numbers-rows > span {
-    display: block;
-    counter-increment: linenumber;
-}
-
-.dx-variant-block.code-toolbar {
-    display: flex;
-}
-
-/* for card variant */
-div.code-toolbar.dx-variant-card {
-    display: flex;
-    flex-direction: column-reverse;
-}
-
-div.code-toolbar:hover > .toolbar {
-    opacity: 1;
-}
-
-div.code-toolbar:focus-within > .toolbar {
-    opacity: 1;
-}
-
-div.code-toolbar.dx-variant-card > .toolbar {
-    border-radius: 0.3em 0.3em 0 0;
-    opacity: 1; /* card for base set to 0 */
-    display: flex;
-    align-items: center;
-}
-
-div.code-toolbar.dx-variant-block > .toolbar {
-    transition: opacity 0.3s ease-in-out;
-    opacity: 0; /* card for base set to 0 */
-}
-
-div.code-toolbar.dx-theme-dark.dx-variant-card > .toolbar {
-    background-color: var(--dx-g-blue-natural-20);
-}
-
-div.code-toolbar.dx-theme-light.dx-variant-card > .toolbar {
-    background-color: var(--dx-g-gray-90);
-}
-
-.dx-variant-block .toolbar-item {
-    padding-left: 4px;
-}
-
-.dx-variant-card .toolbar-item:first-child {
-    flex-basis: 95%;
-}
-
-.dx-variant-card .dx-code-block-heading {
-    transform: translateY(3px);
-    padding-left: 20px;
-}
-
-.dx-variant-card.dx-theme-dark .dx-code-block-heading {
-    color: white !important;
-}
-
-.dx-variant-card.dx-theme-light .dx-code-block-heading {
-    color: var(--dx-g-blue-vibrant-20);
-}
-
-/* Separate line b/c rules are thrown out if selector is invalid.
-   IE11 and old Edge versions don't support :focus-within. */
-
-div.code-toolbar > .toolbar .toolbar-item {
-    display: inline-block;
-}
-
-div.code-toolbar > .toolbar a {
-    cursor: pointer;
-}
-
-div.code-toolbar > .toolbar a,
-div.code-toolbar > .toolbar button,
-div.code-toolbar > .toolbar a:hover,
-div.code-toolbar > .toolbar a:focus,
-div.code-toolbar > .toolbar button:hover,
-div.code-toolbar > .toolbar button:focus,
-div.code-toolbar > .toolbar span:hover,
-div.code-toolbar > .toolbar span:focus {
-    color: inherit;
-    text-decoration: none;
-}

package/src/modules/helpers/commonHeader/commonHeader.css

@@ -1,130 +0,0 @@
-@import "helpers/reset";
-@import "helpers/text";
-
-:host {
-    z-index: var(--dx-g-z-index-500);
-}
-
-.header_l2_group-nav_overflow {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-    transition: var(--dx-g-transition-hue-1x);
-}
-
-header {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    position: relative;
-}
-
-header > * {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-header.state-show-mobile-nav .header_l2_group-nav_overflow {
-    opacity: 0;
-    pointer-events: none;
-    overflow: hidden;
-}
-
-.subtitle {
-    color: var(--dx-g-blue-vibrant-20);
-}
-
-/* First row */
-
-.header_l1 {
-    height: var(--dx-g-spacing-3xl);
-    background: var(--dx-g-brand-current-color-background-2);
-    padding: 0 var(--dx-g-page-padding-horizontal);
-    position: relative;
-}
-
-.header-cta-container {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-end;
-}
-
-/* Second row */
-
-.header_l2 {
-    height: var(--dx-g-spacing-4xl);
-    background: var(--dx-g-brand-current-color-background);
-    padding: var(--dx-g-spacing-lg) var(--dx-g-page-padding-horizontal);
-}
-
-.header_l2_group {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-}
-
-.header_l2_group-title {
-    flex-shrink: 0;
-}
-
-.header_l2_group-title
-    .header_version-selector[aria-expanded="true"]::part(icon) {
-    transform: rotateX(180deg);
-}
-
-.header_l2_group-title .header_version-selector::part(container) {
-    padding: 0 var(--dx-g-spacing-xs);
-}
-
-.header_l2_group-title .subtitle {
-    transform: translateY(4px); /* ghost padding */
-    margin-right: var(--dx-g-spacing-md);
-}
-
-.header_l2_group-title > dx-icon {
-    margin-right: var(--dx-g-spacing-sm);
-    color: var(--dx-g-brand-current-color-background);
-    border-radius: var(--dx-g-spacing-xs);
-}
-
-.header_l2_group-nav {
-    flex-grow: 1;
-}
-
-.header_l2_group-nav_overflow > dx-button {
-    margin-left: auto;
-}
-
-.home-link {
-    display: contents;
-}
-
-.home-link .subtitle:not(:first-child) {
-    margin-left: var(--dx-g-spacing-sm);
-}
-
-.header-login-signup {
-    display: flex;
-    align-items: center;
-}
-
-.header-login-signup dx-button {
-    margin-left: var(--dx-g-spacing-smd);
-}
-
-@media (max-width: 768px) {
-    .header_l2_group-nav {
-        padding-left: calc(var(--dx-g-page-padding-horizontal) - 4px);
-    }
-
-    .header_l2_group-nav_overflow {
-        overflow-x: auto;
-        overflow-y: hidden;
-    }
-}