@rolemodel/optics 2.1.2 → 2.1.4

package/dist/css/core/utilities.css

@@ -0,0 +1,429 @@
+/* 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/optics.css

@@ -3134,13 +3134,13 @@ small {
   /* Public API (customizable component options) */
   --_op-card-padding: var(--op-space-medium);
   --_op-card-box-shadow: var(--op-border-all) var(--op-color-border);
+  --_op-card-radius: var(--op-radius-medium);
 
   position: relative;
-  border-radius: var(--op-radius-medium);
+  border-radius: var(--_op-card-radius);
   background-color: var(--op-color-background);
   box-shadow: var(--_op-card-box-shadow);
   color: var(--op-color-on-background);
-  contain: paint;
   font-size: var(--op-font-medium);
   line-height: var(--op-line-height-base);
 
@@ -3182,6 +3182,9 @@ small {
   }
 
   .card__header {
+    border-top-left-radius: var(--_op-card-radius);
+    border-top-right-radius: var(--_op-card-radius);
+
     h1,
     h2,
     h3,
@@ -3191,6 +3194,11 @@ small {
       margin: 0;
     }
   }
+
+  .card__footer {
+    border-bottom-left-radius: var(--_op-card-radius);
+    border-bottom-right-radius: var(--_op-card-radius);
+  }
 }
 .confirm-dialog-wrapper {
   position: fixed;