@rolemodel/optics 2.1.0 → 2.1.2

package/dist/css/core/utilities.css

@@ -1,429 +0,0 @@
-/* Container Properties */
-
-.container {
-  width: 100%;
-  max-width: var(--op-breakpoint-medium);
-  padding: 0 var(--op-space-large);
-  margin: 0 auto;
-}
-
-.container--sm {
-  max-width: var(--op-breakpoint-small);
-}
-
-.container--md-padding {
-  padding: 0 var(--op-space-medium);
-}
-
-.container--sm-padding {
-  padding: 0 var(--op-space-small);
-}
-
-.container--xs {
-  max-width: var(--op-breakpoint-x-small);
-}
-
-/* Width Properties */
-
-.full-width {
-  width: 100%;
-}
-
-.half-width {
-  width: 50%;
-}
-
-.four-fifths-width {
-  width: calc(100% * 4 / 5);
-}
-
-.three-fifths-width {
-  width: calc(100% * 3 / 5);
-}
-
-.two-fifths-width {
-  width: calc(100% * 2 / 5);
-}
-
-.one-fifth-width {
-  width: calc(100% * 1 / 5);
-}
-
-.three-quarters-width {
-  width: calc(100% * 3 / 4);
-}
-
-.one-quarter-width {
-  width: calc(100% * 1 / 4);
-}
-
-.two-thirds-width {
-  width: calc(100% * 2 / 3);
-}
-
-.one-third-width {
-  width: calc(100% * 1 / 3);
-}
-
-/* Flex Properties */
-
-.flex {
-  display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.flex-row {
-  flex-direction: row;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.flex-no-wrap {
-  flex-wrap: nowrap;
-}
-
-.flex-grow-1 {
-  flex-grow: 1;
-}
-
-/* Gap Properties */
-.gap-xxs {
-  gap: var(--op-space-2x-small);
-
-  --op-gap: var(--op-space-2x-small);
-}
-
-.gap-xs {
-  gap: var(--op-space-x-small);
-
-  --op-gap: var(--op-space-x-small);
-}
-
-.gap-sm {
-  gap: var(--op-space-small);
-
-  --op-gap: var(--op-space-small);
-}
-
-.gap-md {
-  gap: var(--op-space-medium);
-
-  --op-gap: var(--op-space-medium);
-}
-
-.gap-lg {
-  gap: var(--op-space-large);
-
-  --op-gap: var(--op-space-large);
-}
-
-.gap-xl {
-  gap: var(--op-space-x-large);
-
-  --op-gap: var(--op-space-x-large);
-}
-
-/* Justify Content */
-
-.justify-start {
-  justify-content: flex-start;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.justify-around {
-  justify-content: space-around;
-}
-
-/* Align Items */
-
-.items-stretch {
-  align-items: stretch;
-}
-
-.items-start {
-  align-items: flex-start;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.items-end {
-  align-items: flex-end;
-}
-
-.items-baseline {
-  align-items: baseline;
-}
-
-/* Align Self */
-
-.self-auto {
-  align-self: auto;
-}
-
-.self-start {
-  align-self: flex-start;
-}
-
-.self-center {
-  align-self: center;
-}
-
-.self-end {
-  align-self: flex-end;
-}
-
-.self-stretch {
-  align-self: stretch;
-}
-
-.self-baseline {
-  align-self: baseline;
-}
-
-/* Text Alignment */
-
-.text-left {
-  text-align: left;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-justify {
-  text-align: justify;
-}
-
-/* Box Margin */
-
-.margin-xl {
-  margin: var(--op-space-x-large);
-}
-
-.margin-lg {
-  margin: var(--op-space-large);
-}
-
-.margin-md {
-  margin: var(--op-space-medium);
-}
-
-.margin-sm {
-  margin: var(--op-space-small);
-}
-
-.margin-xs {
-  margin: var(--op-space-x-small);
-}
-
-.margin-none {
-  margin: 0;
-}
-
-.margin-auto {
-  margin: auto;
-}
-
-/* Vertical Margin */
-
-.margin-y-xl {
-  margin-top: var(--op-space-x-large);
-  margin-bottom: var(--op-space-x-large);
-}
-
-.margin-y-lg {
-  margin-top: var(--op-space-large);
-  margin-bottom: var(--op-space-large);
-}
-
-.margin-y-md {
-  margin-top: var(--op-space-medium);
-  margin-bottom: var(--op-space-medium);
-}
-
-.margin-y-sm {
-  margin-top: var(--op-space-small);
-  margin-bottom: var(--op-space-small);
-}
-
-.margin-y-xs {
-  margin-top: var(--op-space-x-small);
-  margin-bottom: var(--op-space-x-small);
-}
-
-.margin-y-none {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-/* Horizontal Margin */
-
-.margin-x-xl {
-  margin-right: var(--op-space-x-large);
-  margin-left: var(--op-space-x-large);
-}
-
-.margin-x-lg {
-  margin-right: var(--op-space-large);
-  margin-left: var(--op-space-large);
-}
-
-.margin-x-md {
-  margin-right: var(--op-space-medium);
-  margin-left: var(--op-space-medium);
-}
-
-.margin-x-sm {
-  margin-right: var(--op-space-small);
-  margin-left: var(--op-space-small);
-}
-
-.margin-x-xs {
-  margin-right: var(--op-space-x-small);
-  margin-left: var(--op-space-x-small);
-}
-
-.margin-x-none {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-/* Top Margin */
-
-.margin-top-xl {
-  margin-top: var(--op-space-x-large);
-}
-
-.margin-top-lg {
-  margin-top: var(--op-space-large);
-}
-
-.margin-top-md {
-  margin-top: var(--op-space-medium);
-}
-
-.margin-top-sm {
-  margin-top: var(--op-space-small);
-}
-
-.margin-top-xs {
-  margin-top: var(--op-space-x-small);
-}
-
-.margin-top-none {
-  margin-top: 0;
-}
-
-/* Bottom Margin */
-
-.margin-bottom-xl {
-  margin-bottom: var(--op-space-x-large);
-}
-
-.margin-bottom-lg {
-  margin-bottom: var(--op-space-large);
-}
-
-.margin-bottom-md {
-  margin-bottom: var(--op-space-medium);
-}
-
-.margin-bottom-sm {
-  margin-bottom: var(--op-space-small);
-}
-
-.margin-bottom-xs {
-  margin-bottom: var(--op-space-x-small);
-}
-
-.margin-bottom-none {
-  margin-bottom: 0;
-}
-
-/* Right Margin */
-
-.margin-right-xl {
-  margin-right: var(--op-space-x-large);
-}
-
-.margin-right-lg {
-  margin-right: var(--op-space-large);
-}
-
-.margin-right-md {
-  margin-right: var(--op-space-medium);
-}
-
-.margin-right-sm {
-  margin-right: var(--op-space-small);
-}
-
-.margin-right-xs {
-  margin-right: var(--op-space-x-small);
-}
-
-.margin-right-none {
-  margin-left: 0;
-}
-
-/* Left Margin */
-
-.margin-left-xl {
-  margin-left: var(--op-space-x-large);
-}
-
-.margin-left-lg {
-  margin-left: var(--op-space-large);
-}
-
-.margin-left-md {
-  margin-left: var(--op-space-medium);
-}
-
-.margin-left-sm {
-  margin-left: var(--op-space-small);
-}
-
-.margin-left-xs {
-  margin-left: var(--op-space-x-small);
-}
-
-.margin-left-none {
-  margin-left: 0;
-}
-
-/*
-  Accessibility
-  Use the following class to hide accessibility text that is needed for screen readers but needs to be hidden from regular users.
-  https: //snook.ca/archives/html_and_css/hiding-content-for-accessibility
-*/
-.sr-only {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  clip: rect(1px 1px 1px 1px);
-  clip: rect(1px, 1px, 1px, 1px);
-}

package/dist/css/recipes/16six-sidebar.css

@@ -1,63 +0,0 @@
-/* 16Six Sidebar Example */
-
-.icon--rotated-135 {
-  rotate: 135deg;
-}
-
-.icon--rotated-90 {
-  rotate: 90deg;
-}
-
-.sidebar {
-  .sidebar__brand {
-    justify-content: center;
-
-    .sidebar__brand-label {
-      display: none;
-    }
-  }
-
-  &.sidebar--16six {
-    --_op-sidebar-background-color: hsl(256deg 66% 15%);
-    --_op-sidebar-text-color: hsl(26deg 100% 95%);
-    --_op-sidebar-border-color: hsl(26deg 100% 95%);
-    --_op-sidebar-rail-width: 6.4rem;
-    --_op-sidebar-drawer-width: 22.4rem;
-    --_op-sidebar-drawer-brand-width: calc(var(--op-space-3x-large) + (2 * var(--op-space-medium)));
-    --_op-sidebar-brand-spacing: var(--op-space-medium) var(--op-space-x-small);
-    --_op-sidebar-content-item-spacing: var(--op-space-x-small);
-    --_op-sidebar-spacing: 0 0 var(--op-space-x-small);
-
-    .sidebar__brand {
-      display: flex;
-      margin: 0;
-      color: inherit;
-      gap: var(--op-space-medium);
-      text-decoration: none;
-
-      svg {
-        width: var(--op-space-3x-large);
-        height: var(--op-space-3x-large);
-      }
-
-      .sidebar__brand-label {
-        display: flex;
-        flex-direction: column;
-        font-size: var(--op-font-small);
-      }
-    }
-
-    .btn {
-      &.btn--no-border {
-        background-color: transparent;
-        box-shadow: none;
-        color: var(--_op-sidebar-text-color);
-
-        &.btn--active,
-        &:hover {
-          background-color: hsl(256deg 23% 32%);
-        }
-      }
-    }
-  }
-}

package/dist/css/recipes/aligned-header.css

@@ -1,16 +0,0 @@
-.aligned-header {
-  /* Public API (allowed to be overridden) */
-  --_op-line-height: var(--op-line-height-base);
-  --_op-font-size: var(--op-font-4x-large);
-
-  font-size: var(--_op-font-size);
-  font-weight: var(--op-font-weight-semi-bold);
-  line-height: var(--_op-line-height);
-
-  .aligned-header__centered-suffix {
-    display: inline-flex;
-    height: calc(var(--_op-line-height) * var(--_op-font-size));
-    align-items: center;
-    vertical-align: top;
-  }
-}

package/dist/css/recipes/domains-sidebar.css

@@ -1,40 +0,0 @@
-/* Domains Sidebar Example */
-.sidebar {
-  &.sidebar--domains {
-    --_op-sidebar-drawer-width: 28rem;
-    --_op-sidebar-content-spacing: 0;
-    --_op-sidebar-content-item-spacing: 0;
-
-    box-shadow: none;
-
-    .btn {
-      border-radius: 0;
-
-      &.btn--no-border {
-        box-shadow: none;
-
-        &.btn--active {
-          background-color: var(--op-color-primary-plus-five);
-          color: var(--op-color-primary-on-plus-five);
-        }
-
-        &:hover:not(.btn--active) {
-          background-color: var(--op-color-neutral-plus-six);
-          box-shadow: none;
-          color: var(--op-color-neutral-on-plus-six);
-        }
-      }
-
-      &.btn--pill-right {
-        border-radius: 0 var(--op-radius-pill) var(--op-radius-pill) 0;
-      }
-    }
-
-    .sidebar__footer {
-      display: flex;
-      align-items: center;
-      gap: var(--op-space-small);
-      padding-inline-start: var(--op-space-large);
-    }
-  }
-}