@castlabs/ui 4.18.2

package/src/components/table/ClTableCel/Checkbox/style.scss

@@ -0,0 +1,18 @@
+.cl-table-data {
+  .cl-th-checkbox {
+    @extend %p-tiny;
+
+    font-weight: 700;
+  }
+
+  .cl-td-checkbox {
+    .form-check {
+      margin: 0;
+      padding: 0;
+    }
+
+    input {
+      margin: 0.25em 0;
+    }
+  }
+}

package/src/components/table/ClTableCel/Code/style.scss

@@ -0,0 +1,13 @@
+.cl-table-data {
+  .cl-td-code {
+    @include typography-font($typography-font-list-monospace, 400, px(15), 1.25, 0.025em, 80%);
+
+    padding-top: 0.6rem;
+
+    @include media-breakpoint-down($table-responsive) {
+      table:not(.cl-table-nonresponsive) & {
+        width: 100%;
+      }
+    }
+  }
+}

package/src/components/table/ClTableCel/Currency/style.scss

@@ -0,0 +1,9 @@
+.cl-table-data {
+  @include media-breakpoint-up($table-responsive) {
+    .cl-th-currency,
+    .cl-td-currency {
+      text-align: end;
+      word-wrap: unset;
+    }
+  }
+}

package/src/components/table/ClTableCel/Date/style.scss

@@ -0,0 +1,12 @@
+.cl-table-data {
+  .cl-td-date {
+    width: 9.5em;
+    word-wrap: break-word;
+
+    @include media-breakpoint-down($table-responsive) {
+      table:not(.cl-table-nonresponsive) & {
+        width: 100%;
+      }
+    }
+  }
+}

package/src/components/table/ClTableCel/ID/style.scss

@@ -0,0 +1,16 @@
+.cl-table-data {
+  .cl-td-id,
+  .cl-td-uuid {
+    @include typography-font($typography-font-list-monospace, 400, px(15), 1, 0.025em, 80%);
+
+    padding-top: 0.6rem;
+    width: 2.5em;
+    word-wrap: unset;
+
+    @include media-breakpoint-down($table-responsive) {
+      table:not(.cl-table-nonresponsive) & {
+        width: 100%;
+      }
+    }
+  }
+}

package/src/components/table/ClTableCel/Links/style.scss

@@ -0,0 +1,44 @@
+.cl-table-data {
+  .cl-th-links {
+    @extend %p-tiny;
+
+    font-weight: 700;
+
+    @include media-breakpoint-down($table-responsive) {
+      table:not(.cl-table-nonresponsive) & {
+        display: none;
+      }
+    }
+  }
+
+  .cl-td-links {
+    @extend %cl-font-condensed;
+
+    white-space: nowrap;
+    word-wrap: unset;
+
+    a:not(.cl-a-primary) {
+      @extend %cl-a-text;
+    }
+
+    :not(:first-child) {
+      margin-left: $spacing-tiny;
+
+      &.cl-a-pdf,
+      &.cl-a-image,
+      &.cl-a-video,
+      &.cl-a-file,
+      &.cl-a-zip,
+      &.cl-a-spinner,
+      &.cl-a-lock {
+        margin-left: $spacing-small + $spacing-micro;
+      }
+    }
+
+    @include media-breakpoint-down($table-responsive) {
+      table:not(.cl-table-nonresponsive) & {
+        text-align: end;
+      }
+    }
+  }
+}

package/src/components/table/ClTableCel/style.scss

@@ -0,0 +1,7 @@
+// styles that apply to all types of table cels
+
+@import 'style.variables';
+
+.cl-table-data {
+  @extend %cl-table-data-cel;
+}

package/src/components/table/ClTableCel/style.variables.scss

@@ -0,0 +1,25 @@
+// styles that apply to all types of table cels
+
+%cl-table-data-cel {
+  td {
+    @include typography-font($typography-font-list-sans, 400, px(16), 1.2em);
+
+    padding-bottom: $table-padding-vertical;
+    padding-top: $table-padding-vertical;
+    word-wrap: anywhere;
+
+    .badge {
+      font-size: px(14);
+    }
+  }
+
+  td,
+  th {
+    padding-left: $table-padding-horizontal;
+    padding-right: $table-padding-horizontal;
+  }
+
+  td:not(:last-child) {
+    border-right: 2px dotted $color-ci-smoke;
+  }
+}

package/src/components/table/ClTableFootChecked/style.scss

@@ -0,0 +1,2 @@
+.cl-table-foot-checked {
+}

package/src/components/table/ClTableHead/style.scss

@@ -0,0 +1,36 @@
+.cl-table-head {
+  white-space: nowrap;
+
+  &.cl-table-head-sort {
+    .fa-fw {
+      // sort indicator
+      margin-left: $spacing-micro;
+    }
+
+    .fa-sort {
+      // hide not-sorted indicator
+      opacity: 0;
+    }
+  }
+
+  &.cl-table-head-checkbox {
+    font-size: 1rem;
+
+    .form-check {
+      margin-top: 0;
+      min-height: 1em;
+      position: relative;
+      top: -0.1em;
+    }
+  }
+}
+
+.cl-table-data {
+  th {
+    @include media-breakpoint-down($table-responsive) {
+      table:not(.cl-table-nonresponsive) & {
+        width: 100%;
+      }
+    }
+  }
+}

package/src/components/text/ClCopy/style.scss

@@ -0,0 +1,42 @@
+////
+/// @group components
+/// @access public
+////
+
+@mixin cl-fontawesome-postfix($codepoint) {
+  margin-right: 1em;
+
+  &::after {
+    @include cl-fontawesome($codepoint);
+
+    & {
+      font-weight: 400;
+      left: 0.2em;
+      opacity: 0.5;
+      position: relative;
+      top: 0;
+      width: 0;
+    }
+  }
+}
+
+.cl-copy {
+  @include cl-fontawesome-postfix('\f0c5');
+
+  & {
+    cursor: pointer;
+    top: 0.125em;
+  }
+
+  &::after {
+    font-size: 0.75em;
+  }
+}
+
+.cl-copy-text {
+  @extend %cl-a-text;
+}
+
+.cl-copy-transparent {
+  @extend %cl-a-transparent;
+}

package/src/components/text/ClHashtag/style.scss

@@ -0,0 +1,31 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines custom hashtag styles.
+
+.cl-hashtag {
+  @include cl-badge();
+
+  & {
+    color: $badge-color-fg;
+  }
+
+  &::before {
+    @include cl-fontawesome('\f292');
+
+    & {
+      margin-right: $spacing-micro;
+      position: static;
+    }
+  }
+
+  &.cl-hashtag-secondary {
+    background-color: $color-secondary;
+  }
+
+  .cl-p-large & {
+    font-weight: 500;
+  }
+}

package/src/components/text/ClLinkExternal/style.scss

@@ -0,0 +1,147 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines variants for hyperlinks.
+
+.cl-a,
+.cl-p a,
+main a {
+  // default for body
+  @extend %cl-a-default;
+}
+
+.cl-a-primary a:not(.btn),
+.cl-a-secondary a.cl-a-primary:not(.btn),
+.cl-a-text a.cl-a-primary:not(.btn),
+.cl-a-transparent a.cl-a-primary:not(.btn),
+a.cl-a-primary:not(.btn) {
+  @extend %cl-a-primary;
+}
+
+.cl-a-secondary a:not(.btn),
+.cl-a-primary a.cl-a-secondary:not(.btn),
+.cl-a-text a.cl-a-secondary:not(.btn),
+.cl-a-transparent a.cl-a-secondary:not(.btn),
+a.cl-a-secondary:not(.btn) {
+  @extend %cl-a-secondary;
+}
+
+.cl-a-text a:not(.btn),
+.cl-a-primary a.cl-a-text:not(.btn),
+.cl-a-secondary a.cl-a-text:not(.btn),
+.cl-a-transparent a.cl-a-text:not(.btn),
+a.cl-a-text:not(.btn) {
+  @extend %cl-a-text;
+}
+
+.cl-a-transparent a:not(.btn),
+.cl-a-primary a.cl-a-transparent:not(.btn),
+.cl-a-secondary a.cl-a-transparent:not(.btn),
+.cl-a-text a.cl-a-transparent:not(.btn),
+a.cl-a-transparent:not(.btn) {
+  @extend %cl-a-transparent;
+}
+
+.cl-a-none a:not(.btn),
+.cl-a-primary a.cl-a-none:not(.btn),
+.cl-a-secondary a.cl-a-none:not(.btn),
+.cl-a-text a.cl-a-none:not(.btn),
+a.cl-a-none:not(.btn) {
+  @extend %cl-a-none;
+}
+
+.cl-a-btn {
+  // a link that is more an embedded button
+  @extend %cl-a-btn;
+}
+
+.cl-a-quickaction {
+  @extend %cl-a-btn;
+  @extend %cl-a-transparent;
+
+  margin-left: $spacing-tiny;
+
+  &:not(:hover) {
+    color: $color-ci-silver;
+  }
+}
+
+@keyframes cl-a-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+// --- ::before icons ------------------------------------------------------------
+
+// HINT: if you add new icons here, also add the class to ClTableCel/Links/style.css
+// or the in-table spacings will be off
+
+.cl-a-lock,
+.cl-span-lock {
+  @include cl-fontawesome-before('\f023', -0.15em, 0.8em, -0.15em);
+
+  &::before {
+    font-weight: 900;
+  }
+}
+
+.cl-a-spinner,
+.cl-span-spinner {
+  @include cl-fontawesome-before('\f110', -0.2em, 0.8em, -0.1em);
+
+  &::before {
+    animation: cl-a-spin 2s linear infinite;
+    font-weight: 900;
+    transform-origin: 0.5em 0.5em;
+  }
+}
+
+span.cl-a-lock,
+span.cl-span-lock,
+span.cl-a-spinner,
+span.cl-span-spinner {
+  @extend %cl-a-default; // make it look like a link
+
+  pointer-events: none; // disable hover effects
+}
+
+.cl-a-pdf {
+  @include cl-fontawesome-before('\f1c1', 0.1em);
+}
+
+.cl-a-image {
+  @include cl-fontawesome-before('\f1c5', 0.1em);
+}
+
+.cl-a-video {
+  @include cl-fontawesome-before('\f1c8', 0.1em);
+}
+
+.cl-a-file {
+  @include cl-fontawesome-before('\f15c', 0.1em);
+}
+
+.cl-a-zip {
+  @include cl-fontawesome-before('\f1c6', 0.1em);
+}
+
+// --- ::after icons -------------------------------------------------------------
+
+.cl-a-email {
+  @include cl-fontawesome-after('\f0e0', 0.2em, 0.8em);
+}
+
+.cl-a-external {
+  @include cl-fontawesome-after('\f35d', 0.2em, 0.75em, -0.15em);
+
+  &::after {
+    font-weight: 900;
+  }
+}

package/src/components/text/ClOrg/style.scss

@@ -0,0 +1,40 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines custom org lables.
+
+.cl-org-name {
+  // deprecated
+  font-weight: 600;
+
+  i {
+    color: $color-ci-cloud;
+    display: inline;
+  }
+
+  .cl-p-large & {
+    font-weight: 500;
+  }
+}
+
+.cl-org {
+  font-weight: 600;
+
+  &::before {
+    box-sizing: border-box;
+    content: '\f0ac';
+    font-family: 'Font Awesome 5 Free';
+    font-style: normal;
+    font-variant: normal;
+    font-weight: 900;
+    line-height: 1;
+    margin-right: $spacing-micro;
+    text-rendering: auto;
+  }
+
+  .cl-p-large & {
+    font-weight: 500;
+  }
+}

package/src/components/text/ClPlan/style.scss

@@ -0,0 +1,35 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines custom plan styles.
+
+.cl-plan {
+  @include cl-badge();
+
+  & {
+    color: $badge-color-fg;
+  }
+
+  &::before {
+    @include cl-fontawesome('\f005');
+
+    & {
+      margin-right: $spacing-micro;
+      position: static;
+    }
+  }
+
+  .cl-p-large & {
+    font-weight: 500;
+  }
+}
+
+.cl-badge-derived {
+  @include badge-derived();
+
+  + .cl-plan {
+    margin-left: -1.5em;
+  }
+}

package/src/components/text/ClRole/style.scss

@@ -0,0 +1,39 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines custom role styles.
+
+.cl-role {
+  @include cl-badge();
+
+  & {
+    color: $badge-color-fg;
+  }
+
+  &::before {
+    @include cl-fontawesome('\f02b');
+
+    & {
+      margin-right: $spacing-micro;
+      position: static;
+    }
+  }
+
+  &.cl-role-primary {
+    background-color: $color-primary;
+  }
+
+  .cl-p-large & {
+    font-weight: 500;
+  }
+}
+
+.cl-badge-derived {
+  @include badge-derived();
+
+  + .cl-role {
+    margin-left: -1.5em;
+  }
+}

package/src/components/widget/ClBackCancelOk/style.scss

@@ -0,0 +1,3 @@
+.cl-back-cancel-ok {
+  padding-top: 0;
+}

package/src/components/widget/ClCookieBanner/style.scss

@@ -0,0 +1,40 @@
+.cl-cookie-banner {
+  bottom: $spacing-large;
+  box-shadow: 1px 1px 2px 1px $color-black-25a;
+  left: 50%;
+  opacity: 1;
+  position: fixed;
+  transform: translate(-50%);
+  z-index: $layer-z-sidenav;
+
+  .cl-asset-cookie {
+    font-size: 2em;
+    margin-top: $spacing-small;
+  }
+
+  .btn {
+    display: inline !important; // sass-lint:disable-line no-important
+    width: 8rem !important; // sass-lint:disable-line no-important
+  }
+
+  @include media-breakpoint-up(md) {
+    width: 640px;
+  }
+
+  @include media-breakpoint-down(md) {
+    width: calc(100% - $spacing-small);
+
+    .card-body {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  &.cl-fade-away {
+    opacity: 0;
+    transform: translate(-50%, $spacing-large);
+    transition:
+      transform 0.4s,
+      opacity 0.4s;
+  }
+}

package/src/components/widget/ClPage/style.scss

@@ -0,0 +1,11 @@
+.cl-page-spinner {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  justify-content: space-around;
+
+  .cl-spinner {
+    margin: 0;
+  }
+}