@ons/design-system 44.0.1 → 45.0.0

package/scss/overrides/rtl.scss

@@ -0,0 +1,131 @@
+@use 'sass:math';
+
+.ons-rtl .ons-page__container > .ons-grid {
+  direction: rtl;
+
+  ul {
+    padding-left: 0;
+    padding-right: 1.5rem;
+  }
+
+  // List
+  .ons-list {
+    padding: 0 1.5rem 0 0;
+
+    &__link {
+      margin-left: 1rem;
+      margin-right: 0;
+    }
+
+    &--bare {
+      padding-right: 0;
+    }
+
+    &--dashed {
+      padding-right: 0;
+
+      .ons-list__item {
+        margin-left: 0;
+        margin-right: 25px;
+
+        &::before {
+          left: auto;
+          margin-left: 0;
+          margin-right: -25px;
+          right: 0;
+        }
+      }
+    }
+  }
+
+  // Panel
+  .ons-panel {
+    border-left: 0;
+    border-right: 8px solid transparent;
+
+    &--info {
+      border-color: $color-info;
+    }
+
+    &--warn,
+    &--warn-branded {
+      .ons-panel__body {
+        padding: 0.222rem 2.8rem 0.222rem 0;
+      }
+    }
+
+    &--bare {
+      .ons-panel__body {
+        padding: 0.1rem 1.5rem 0 0;
+      }
+    }
+  }
+
+  // Buttons
+  .ons-btn {
+    .ons-svg-icon {
+      margin: 0 0.5rem 0.1rem 0;
+      transform: rotate(180deg);
+    }
+  }
+
+  // Content pagination
+  .ons-content-pagination {
+    &__list {
+      padding: 0;
+    }
+
+    &__link-text {
+      margin: 0 0.5rem 0 0;
+    }
+
+    &__link-label {
+      margin: 0 2rem 0 0;
+    }
+
+    .ons-svg-icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  // Download
+  .ons-download {
+    &__image {
+      margin-left: 1.5rem;
+      margin-right: 0;
+    }
+  }
+
+  // Flip push and pull
+  @each $breakpoint-min, $size in $grid-bp {
+    @for $column from 1 through $grid-cols {
+      $width: percentage(math.div($column, $grid-cols));
+
+      @include mq($breakpoint-min) {
+        .ons-push-#{$column}\@#{$breakpoint-min} {
+          left: -$width;
+        }
+
+        .ons-pull-#{$column}\@#{$breakpoint-min} {
+          left: $width;
+        }
+      }
+    }
+
+    @each $breakpoint-max, $size in $grid-bp {
+      @for $column from 1 through $grid-cols {
+        $width: percentage(math.div($column, $grid-cols));
+
+        @include mq($breakpoint-min, $breakpoint-max) {
+          .ons-push-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
+            left: -$width;
+          }
+
+          .ons-pull-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
+            left: $width;
+          }
+        }
+      }
+    }
+  }
+}

package/scss/patternlib.scss

@@ -0,0 +1,216 @@
+@import 'vars/index';
+@import 'helpers/index';
+@import '../views/partials/example/example';
+@import '../views/partials/sub-navigation/sub-navigation';
+@import '../foundations/layout/page-template/examples/block-areas/block-areas';
+@import '../patterns/pages/question/examples/question-anatomy/pl-question-anatomy';
+@import '../foundations/layout/page-template/examples/block-areas/block-areas';
+@import '../foundations/style/colours/colours';
+@import '../foundations/style/icons/icon-swatch';
+@import 'prism-tomorrow';
+
+.ons-patternlib-page {
+  height: 100vh;
+
+  &--example {
+    display: block;
+    height: auto;
+    padding: 1.5rem;
+
+    .ons-page,
+    .ons-page__content {
+      overflow-x: visible;
+    }
+  }
+
+  &__header {
+    margin: 0;
+  }
+
+  &__sub-nav {
+    .ons-nav {
+      width: 100%;
+    }
+  }
+
+  &__body {
+    overflow: hidden;
+  }
+
+  &__content {
+    width: 100%;
+    p,
+    li,
+    h3,
+    h4,
+    h5,
+    h6 {
+      max-width: 40rem;
+    }
+
+    code:not(.ons-patternlib-example__code) {
+      background: $color-grey-5;
+      color: $color-ruby-red;
+      padding: 0.05rem 0.25rem;
+    }
+
+    table {
+      border-collapse: collapse;
+      border-spacing: 0;
+      margin: 0;
+      width: 100%;
+    }
+
+    th {
+      border-bottom: 2px solid $color-grey-100;
+      padding: 0.5rem 0 0.5rem 1rem;
+      text-align: left;
+      vertical-align: top;
+    }
+
+    th,
+    td {
+      line-height: 1.6;
+      padding: 0.5rem 0 0.5rem 1rem;
+      &:first-child {
+        padding-left: 0;
+      }
+    }
+
+    td {
+      background: transparent;
+      border-bottom: 1px solid $color-borders;
+    }
+
+    tr:last-child td {
+      border: 0;
+    }
+  }
+
+  .ons-table-scrollable {
+    position: relative;
+    ::-webkit-scrollbar {
+      height: 7px;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: $color-grey-75;
+      border-radius: 20px;
+    }
+    &--on {
+      th,
+      td {
+        white-space: nowrap;
+      }
+    }
+    &__content {
+      overflow: visible;
+      overflow-x: scroll;
+      width: 100%;
+      &:focus {
+        outline: 3px solid $color-focus;
+        outline-offset: 3px;
+      }
+      th,
+      td {
+        @include mq(xxs, m) {
+          white-space: nowrap;
+        }
+      }
+      .ons-table__right-shadow,
+      .ons-table__left-shadow {
+        height: 100%;
+        position: absolute;
+        top: 0;
+        width: 5px;
+        z-index: 200;
+
+        &.ons-with-transition {
+          transition: box-shadow 0.4s ease-out;
+        }
+      }
+      .ons-table__right-shadow {
+        right: 0;
+        &.ons-visible {
+          box-shadow: inset -1px 0 0 0 #bfc1c3, inset -5px 0 0 0 rgba(191, 193, 195, 0.4);
+        }
+      }
+      .ons-table__left-shadow {
+        left: 0;
+        &.ons-visible {
+          box-shadow: inset 1px 0 0 0 #bfc1c3, inset -5px 0 0 0 rgba(191, 193, 195, 0.4);
+        }
+      }
+    }
+  }
+
+  &__content,
+  &__sub-nav {
+    > {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        &:not(:first-child) {
+          margin-top: 2rem;
+        }
+      }
+
+      h5,
+      h6 {
+        font-size: 1rem;
+      }
+
+      @for $i from 1 through 6 {
+        @for $c from 1 through 6 {
+          h#{$i} + h#{$c}:not(:first-child) {
+            margin-top: 0;
+          }
+        }
+      }
+    }
+  }
+
+  &__content-header {
+    margin-bottom: 1rem;
+    position: relative;
+  }
+
+  .ons-panel + .ons-patternlib-example {
+    margin-top: 2rem;
+  }
+}
+
+.ons-patternlib-example__iframe {
+  padding-right: 1px;
+}
+
+.ons-patternlib-hero {
+  background: $color-grey-5;
+  padding: 2rem 0 1rem;
+  width: 100%;
+
+  &__title {
+    max-width: 30rem;
+  }
+}
+
+.ons-pl-grid-col {
+  background: $color-grey-5;
+  font-size: 0.8rem;
+  margin: 0 0 1rem;
+  padding: 1rem;
+}
+
+.ons-pl-experimental-tag {
+  background: $color-info;
+  color: $color-text-inverse;
+  display: inline-block;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.1rem;
+  margin-right: 0.5rem;
+  padding: 0.3rem 0.5rem;
+  text-transform: uppercase;
+}

package/scss/print.scss

@@ -0,0 +1,66 @@
+$color-black: #222;
+
+.ons-btn,
+.ons-summary__actions,
+.ons-footer,
+.ons-cookies-banner,
+.ons-language-links,
+.ons-breadcrumb {
+  display: none !important;
+}
+
+a::after {
+  content: ' (' attr(href) ') ';
+}
+
+.ons-header {
+  &__main,
+  &__bottom {
+    background: transparent;
+  }
+
+  &__title {
+    color: $color-black;
+  }
+
+  &-nav {
+    display: block;
+    &__item {
+      display: inline-block;
+    }
+    &__item--active {
+      border: 0;
+    }
+    &__link,
+    &__link:hover {
+      color: $color-black;
+    }
+  }
+
+  & &__svg-logo {
+    fill: $color-black;
+  }
+}
+
+.ons-collapsible {
+  &--initialised & {
+    &__icon {
+      display: none;
+    }
+
+    &__title {
+      color: $color-black;
+      margin-bottom: 1rem;
+      margin-left: -1.5rem;
+      text-decoration: none;
+    }
+
+    &__content {
+      display: block;
+    }
+  }
+}
+
+.ons-hero {
+  color-adjust: exact;
+}

package/scss/settings/_census.scss

@@ -0,0 +1,13 @@
+// Census brand
+$color-black: #222;
+$color-branded: #902082;
+$color-branded-tint: rgba(144, 32, 130, 0.1); // 10% of brand colour
+$color-branded-secondary: #df0667;
+$color-branded-tertiary: #3c388e;
+$color-branded-supporting: #00a3a6;
+$color-branded-supporting-tint: rgba(#00a3a6, 0.2);
+$color-census-gradient: linear-gradient(to bottom left, #902082 0%, #3c388e 100%);
+
+// Assignment
+$color-tag-bg: $color-branded-supporting-tint;
+$color-text-link-hover: $color-black;

package/scss/utilities/_border.scss

@@ -0,0 +1,12 @@
+$border: (
+  bt: border-top,
+  br: border-right,
+  bb: border-bottom,
+  bl: border-left,
+);
+
+@each $abbr, $dec in $border {
+  @include bp-suffix(ons-u-#{$abbr}, $create-between-breakpoints: true) {
+    #{$dec}: 1px solid $color-borders !important;
+  }
+}

package/scss/utilities/_colors.scss

@@ -0,0 +1,17 @@
+@each $label, $color in (blue: $color-night-blue, green: $color-leaf-green) {
+  .ons-u-#{'' + $label} {
+    color: $color;
+  }
+  .ons-u-bg-#{'' + $label} {
+    background-color: $color;
+  }
+
+  @for $tint from 1 through 10 {
+    .ons-u-#{'' + $label}-#{$tint*10} {
+      color: tint($color, $tint * 10);
+    }
+    .ons-u-bg-#{'' + $label}-#{$tint*10} {
+      background-color: tint($color, $tint * 10);
+    }
+  }
+}

package/scss/utilities/_display.scss

@@ -0,0 +1,19 @@
+@include bp-suffix('ons-u-d-no', $create-between-breakpoints: true) {
+  display: none !important;
+}
+
+@include bp-suffix('ons-u-d-b', $create-between-breakpoints: true) {
+  display: block !important;
+}
+
+.ons-u-db-no-js_enabled {
+  body.ons-js-enabled & {
+    display: none !important;
+  }
+}
+
+.ons-u-db-no-js_disabled {
+  body:not(.ons-js-enabled) & {
+    display: none !important;
+  }
+}

package/scss/utilities/_float.scss

@@ -0,0 +1,34 @@
+/**
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    contenteditable attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that are clearfixed.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+.ons-u-cf::before,
+.ons-u-cf::after {
+  content: ' '; /* 1 */
+  display: table; /* 2 */
+}
+
+.ons-u-cf::after {
+  clear: both;
+}
+
+.ons-u-fl {
+  float: left;
+}
+
+.ons-u-fr {
+  float: right;
+}
+
+.ons-u-f-no {
+  float: none;
+}
+
+@include bp-suffix(ons-u-fr) {
+  float: right;
+}