@oracle/oraclejet 13.1.10 → 13.1.12

package/dist/pcss/oj/13.1.10/oj/helpers/themes/base/_oj-helpers.scss

@@ -1,547 +0,0 @@
-// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-// WARNING: do not directly import this file, instead import the
-// version in your the theme specific directory,
-// for example theme/themes/redwood/oj-helpers.scss
-// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-@import "../../../utilities/_oj.utilities.modules.scss";
-@import "../../../utilities/_oj.utilities.icons.scss";
-@import "../../../utilities/_oj.utilities.masonrylayout.scss";
-@import "../../../utilities/_oj.utilities.json.scss";
-
-
-@include module-include-once("common.helper") {
-  /* helpers
-  ----------------------------------*/
-  // todo: we won't support the old syntax
-  [data-bind*="ojComponent"]:not(.oj-component-initnode) {
-    visibility: hidden;
-  }
-
-  // write out the theme map
-  $themeRootMap: ();
-
-  @if ($privateThemeName != null) {
-    $themeRootMap: map-merge(
-      $themeRootMap,
-      (
-        name: $privateThemeName
-      )
-    );
-  }
-  @if ($privateThemeTargetPlatform != null) {
-    $themeRootMap: map-merge(
-      $themeRootMap,
-      (
-        targetPlatform: $privateThemeTargetPlatform
-      )
-    );
-  }
-  $themeRootMap: map-merge(
-    $themeRootMap,
-    (
-      behavior: "redwood"
-    )
-  );
-  $themeRootMap: map-merge(
-    $themeRootMap,
-    (
-      jetReleaseVersion: "v13.1.10"
-    )
-  );
-
-  .oj-theme-json {
-    font-family: oj-json-from-map($themeRootMap) !important;
-  }
-
-  .oj-helper-hidden-accessible {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-  }
-
-  .oj-helper-clearfix:before,
-  .oj-helper-clearfix:after {
-    content: " ";
-    display: table;
-  }
-  .oj-helper-clearfix:after {
-    clear: both;
-  }
-
-  /* Used by the framework's support for detecting resize */
-  .oj-helper-detect-expansion,
-  .oj-helper-detect-contraction {
-    position: absolute;
-    overflow: hidden;
-    visibility: hidden;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    direction: ltr;
-  }
-
-  // NOTE: this uses !important, it is meant to be used to override a default value
-  .oj-helper-hidden {
-    display: none !important;
-  }
-
-  // NOTE: this uses !important, it is meant to be used to override a default value
-  .oj-helper-inline-block {
-    display: inline-block !important;
-  }
-  // NOTE: this uses !important, it is meant to be used to override a default value
-  .oj-helper-tabular-nums {
-    font-variant-numeric: tabular-nums !important;
-  }
-  // NOTE: this uses !important, it is meant to be used to override a default value
-  .oj-helper-proportional-nums {
-    font-variant-numeric: proportional-nums !important;
-  }
-
-  
-  // NOTE: this uses !important, it is meant to be used to override a default value
-  .oj-helper-overflow-wrap-anywhere {
-    overflow-wrap: break-word !important;
-    overflow-wrap: anywhere !important;
-  }
-
-  // NOTE: this uses !important, it is meant to be used to override a default value
-  .oj-helper-hyphens-auto {
-    hyphens: auto !important;
-  }
-
-  // todo: add a demo for these text-align classes
-
-  /* aligns text left by default, aligns right when dir="rtl" is set on html element
-     NOTE: this uses !important, it can therefore be used to override a previously set value */
-  .oj-helper-text-align-start {
-    text-align: left !important;
-    html[dir="rtl"] & {
-      text-align: right !important;
-    }
-  }
-
-  // NOTE: this uses !important, it is meant to be used to override a default value
-  .oj-helper-text-align-center {
-    text-align: center !important;
-  }
-
-  /* aligns text right by default, aligns left when dir="rtl" is set on html element
-     NOTE: this uses !important, it can therefore be used to override a previously set value */
-  .oj-helper-text-align-end {
-    text-align: right !important;
-    html[dir="rtl"] & {
-      text-align: left !important;
-    }
-  }
-
-  /* Sets the start margin, equivalent to setting
-     margin-left: auto in ltr languages and margin-right: auto in rtl languages */
-  .oj-helper-margin-start-auto {
-    @include oj-ltr() {
-      margin-left: auto !important;
-    }
-
-    @include oj-rtl() {
-      margin-right: auto !important;
-    }
-  }
-
-  /* Sets the left and right margins to auto */
-  .oj-helper-margin-auto {
-    margin-left: auto !important;
-    margin-right: auto !important;
-  }
-
-  /* Sets the end margin, equivalent to setting
-     margin-right: auto in ltr languages and margin-left: auto in rtl languages */
-  .oj-helper-margin-end-auto {
-    @include oj-ltr() {
-      margin-right: auto !important;
-    }
-
-    @include oj-rtl() {
-      margin-left: auto !important;
-    }
-  }
-
-  /* aligns text right
-     NOTE: this uses !important, it can therefore be used to override a previously set value */
-  .oj-helper-text-align-right {
-    text-align: right !important;
-  }
-
-  /* aligns text left
-     NOTE: this uses !important, it can therefore be used to override a previously set value */
-  .oj-helper-text-align-left {
-    text-align: left !important;
-  }
-
-  /* Used by the ojModule binding on a DIV that will hold cached Views */
-  .oj-helper-module-cache {
-    position: absolute;
-    display: none;
-  }
-
-  // focus
-
-  $focusConfig: ();
-
-  @if ($privateFocusHighlightPolicy) {
-    $focusConfig: map-merge(
-      $focusConfig,
-      (
-        focusHighlightPolicy: $privateFocusHighlightPolicy
-      )
-    );
-  }
-
-  .oj-focus-config {
-    font-family: oj-json-from-map($focusConfig) !important;
-  }
-
-  // marker style for ojDialog accesskey bug #22685535
-  .oj-helper-element-with-accesskey {
-  }
-
-  // marker style for ojDialog accesskey bug #22685535
-  .oj-helper-element-in-dialog-with-accesskey {
-  }
-
-  /* justifies flex content start
-     NOTE: this uses !important, it can therefore be used to override a previously set value */
-  .oj-helper-justify-content-flex-start {
-    justify-content: flex-start !important;
-  }
-
-  /* justifies flex content end
-     NOTE: this uses !important, it can therefore be used to override a previously set value */
-  .oj-helper-justify-content-flex-end {
-    justify-content: flex-end !important;
-  }
-
-  /* justifies flex content center
-     NOTE: this uses !important, it can therefore be used to override a previously set value */
-  .oj-helper-justify-content-center {
-    justify-content: center !important;
-  }
-
-  /* justifies flex content space between
-     NOTE: this uses !important, it can therefore be used to override a previously set value */
-  .oj-helper-justify-content-space-between {
-    justify-content: space-between !important;
-  }
-
-  /* justifies flex content space around
-     NOTE: this uses !important, it can therefore be used to override a previously set value */
-  .oj-helper-justify-content-space-around {
-    justify-content: space-around !important;
-  }
-
-  /* justifies flex content right
-     NOTE: this uses !important, it can therefore be used to override a previously set value */
-  .oj-helper-justify-content-right {
-    @include oj-ltr() {
-      justify-content: flex-end !important;
-    }
-
-    @include oj-rtl() {
-      justify-content: flex-start !important;
-    }
-  }
-
-  /* justifies flex content left
-     NOTE: this uses !important, it can therefore be used to override a previously set value */
-  .oj-helper-justify-content-left {
-    @include oj-ltr() {
-      justify-content: flex-start !important;
-    }
-
-    @include oj-rtl() {
-      justify-content: flex-end !important;
-    }
-  }
-
-  .oj-helper-border-box {
-    box-sizing: border-box !important;
-  }
-
-  .oj-helper-content-box {
-    box-sizing: border-content !important;
-  }
-
-  .oj-helper-white-space-normal{
-    white-space: normal !important;
-  }
-
-  .oj-helper-white-space-nowrap {
-    white-space: nowrap !important;
-  }
-
-  .oj-helper-white-space-pre{
-    white-space: pre !important;
-  }
-
-  .oj-helper-white-space-pre-wrap{
-    white-space: pre-wrap !important;
-  }
-
-  .oj-helper-white-space-pre-line{
-    white-space: pre-line !important;
-  }
-  
-
-  //colors
-  .oj-text-color-primary,
-  .oj-text-primary-color,
-  .oj-icon-color-primary {
-    color: var(--oj-core-text-color-primary) !important;
-  }
-
-  .oj-text-tertiary-color,
-  .oj-text-color-secondary,
-  .oj-text-secondary-color,
-  .oj-icon-color-secondary {
-    color: var(--oj-core-text-color-secondary) !important;
-  }
-
-
-  .oj-text-color-disabled,
-  .oj-text-disabled-color,
-  .oj-icon-color-disabled {
-    color: var(--oj-core-text-color-disabled) !important;
-  }
-  .oj-text-color-danger,
-  .oj-icon-color-danger {
-    color: var(--oj-core-danger-3) !important;
-  }
-  .oj-text-color-warning,
-  .oj-icon-color-warning {
-    color: var(--oj-core-warning-3) !important;
-  }
-  .oj-text-color-success,
-  .oj-icon-color-success {
-    color: var(--oj-core-success-3) !important;
-  }
-
-  .oj-icon-color-info {
-    color: var(--oj-core-info-3) !important;
-  }
-
-  .oj-border {
-    border: 1px solid var(--oj-core-divider-color) !important;
-  }
-
-  //DIVIDER
-
-  .oj-divider-top,
-  .oj-border-top {
-    border-top: 1px solid var(--oj-core-divider-color) !important;
-  }
-
-  .oj-divider-top.oj-divider-padding {
-    padding-top: var(--oj-core-divider-margin) !important;
-  }
-
-  .oj-divider-top.oj-divider-margin {
-    margin-top: var(--oj-core-divider-margin) !important;
-  }
-
-  .oj-divider-bottom,
-  .oj-border-bottom {
-    border-bottom: 1px solid var(--oj-core-divider-color) !important;
-  }
-
-  .oj-divider-bottom.oj-divider-padding {
-    padding-bottom: var(--oj-core-divider-margin) !important;
-  }
-
-  .oj-divider-bottom.oj-divider-margin {
-    margin-bottom: var(--oj-core-divider-margin) !important;
-  }
-
-  .oj-divider-start,
-  .oj-border-start {
-    @include oj-ltr() {
-      border-left: 1px solid var(--oj-core-divider-color) !important;
-    }
-    @include oj-rtl() {
-      border-right: 1px solid var(--oj-core-divider-color) !important;
-    }
-  }
-
-  .oj-divider-start.oj-divider-padding {
-    @include oj-ltr() {
-      padding-left: var(--oj-core-divider-margin) !important;
-    }
-    @include oj-rtl() {
-      padding-right: var(--oj-core-divider-margin) !important;
-    }
-  }
-
-  .oj-divider-start.oj-divider-margin {
-    @include oj-ltr() {
-      margin-left: var(--oj-core-divider-margin) !important;
-      margin-right: 0 !important;
-    }
-    @include oj-rtl() {
-      margin-right: var(--oj-core-divider-margin) !important;
-      margin-left: 0 !important;
-    }
-  }
-
-  .oj-divider-end,
-  .oj-border-end {
-    @include oj-ltr() {
-      border-right: 1px solid var(--oj-core-divider-color) !important;
-    }
-    @include oj-rtl() {
-      border-left: 1px solid var(--oj-core-divider-color) !important;
-    }
-  }
-
-  .oj-divider-end.oj-divider-padding {
-    @include oj-ltr() {
-      padding-right: var(--oj-core-divider-margin) !important;
-    }
-    @include oj-rtl() {
-      padding-left: var(--oj-core-divider-margin) !important;
-    }
-  }
-
-  .oj-divider-end.oj-divider-margin {
-    @include oj-ltr() {
-      margin-right: var(--oj-core-divider-margin) !important;
-    }
-    @include oj-rtl() {
-      margin-left: var(--oj-core-divider-margin) !important;
-    }
-  }
-  
-  .oj-bg-body {
-    background-color: var(--oj-body-bg-color) !important;
-  }
-
-  .oj-bg-neutral-0 {
-    background-color: RGB(var(--oj-palette-neutral-rgb-0)) !important;
-  }
-
-  .oj-bg-neutral-10 {
-    background-color: RGB(var(--oj-palette-neutral-rgb-10)) !important;
-  }
-  .oj-bg-neutral-20 {
-    background-color: RGB(var(--oj-palette-neutral-rgb-20)) !important;
-  }
-
-  .oj-bg-neutral-30 {
-    background-color: RGB(var(--oj-palette-neutral-rgb-30)) !important;
-  }
-
-  .oj-bg-neutral-170 {
-    background-color: RGB(var(--oj-palette-neutral-rgb-170)) !important;
-  }
-
-  .oj-bg-neutral-180 {
-    background-color: RGB(var(--oj-palette-neutral-rgb-180)) !important;
-  }
-  .oj-bg-neutral-190 {
-    background-color: RGB(var(--oj-palette-neutral-rgb-190)) !important;
-  }
-
-  .oj-bg-neutral-200 {
-    background-color: RGB(var(--oj-palette-neutral-rgb-200)) !important;
-  }
-  .oj-bg-danger-10 {
-    background-color: RGB(var(--oj-palette-danger-rgb-10)) !important;
-  }
-
-  .oj-bg-danger-30 {
-    background-color: RGB(var(--oj-palette-danger-rgb-30)) !important;
-  }
-  
-  .oj-bg-danger-20 {
-    background-color: RGB(var(--oj-palette-danger-rgb-20)) !important;
-  }
-
-
-  .oj-bg-warning-10 {
-    background-color: RGB(var(--oj-palette-warning-rgb-10)) !important;
-  }
-
-  .oj-bg-warning-30 {
-    background-color: RGB(var(--oj-palette-warning-rgb-30)) !important;
-  }
-  
-  .oj-bg-warning-20 {
-    background-color: RGB(var(--oj-palette-warning-rgb-20)) !important;
-  }
-
-  .oj-bg-success-10 {
-    background-color: RGB(var(--oj-palette-success-rgb-10)) !important;
-  }
-
-  .oj-bg-success-30 {
-    background-color: RGB(var(--oj-palette-success-rgb-30)) !important;
-  }
-
-  .oj-bg-success-20 {
-    background-color: RGB(var(--oj-palette-success-rgb-20)) !important;
-  }
-
-
-  .oj-bg-info-10 {
-    background-color: RGB(var(--oj-palette-info-rgb-10)) !important;
-  }
-
-  .oj-bg-info-20 {
-    background-color: RGB(var(--oj-palette-info-rgb-20)) !important;
-  }
-
-  .oj-bg-info-30 {
-    background-color: RGB(var(--oj-palette-info-rgb-30)) !important;
-  }
-
-  .oj-bg-brand-10 {
-    background-color: RGB(var(--oj-palette-brand-rgb-10)) !important;
-  }
-
-  .oj-bg-brand-20 {
-    background-color: RGB(var(--oj-palette-brand-rgb-20)) !important;
-  }
-
-  .oj-bg-brand-30 {
-    background-color: RGB(var(--oj-palette-brand-rgb-30)) !important;
-  }
-
-  .oj-line-clamp-1,
-  .oj-line-clamp-2,
-  .oj-line-clamp-3,
-  .oj-line-clamp-4 {
-    display: -webkit-box !important;
-    /* autoprefixer: ignore next */
-    -webkit-box-orient: vertical !important;
-    overflow: hidden !important;
-  }
-
-  .oj-line-clamp-1 {
-    -webkit-line-clamp: 1 !important;
-  }
-
-  .oj-line-clamp-2 {
-    -webkit-line-clamp: 2 !important;
-  }
-
-  .oj-line-clamp-3 {
-    -webkit-line-clamp: 3 !important;
-  }
-
-  .oj-line-clamp-4 {
-    -webkit-line-clamp: 4 !important;
-  }
-}