superdesk-ui-framework 2.4.21 → 3.0.0-rc12

package/app/styles/_helpers.scss

@@ -26,49 +26,283 @@
     cursor: pointer;
 }
 
-// Display helper classes
+// DISPLAY HELPERS
 // --------------------------------------------------
+// Use classes with the form '.sd-display-- ', others will be deprecated
 
-.sd-d-none {
+.sd-display--none {
     display: none !important;
 }
-.sd-d-inline {
+.sd-display--inline {
     display: inline !important;
 }
-.sd-d-inline-block {
+.sd-display--inline-block {
     display: inline-block !important;
 }
-.sd-d-block {
+.sd-display--block {
     display: block !important;
 }
-.sd-d-flex {
-    display: flex !important;
+
+// Browser ignores this element from the flow. 
+// Use it to wrap other elements without breaking the layout (e.g. flex or grid)
+.sd-display--contents { 
+    display: contents !important;
 }
-.sd-d-inline-flex {
+
+// Display Table
+.sd-display--table {
+    display: table;
+}
+.sd-display--table-cell {
+    display: table-cell;
+}
+.sd-display--table-row {
+    display: table-row;
+}
+.sd-display--table-column {
+    display: table-column;
+}
+.sd-display--table-column-group {
+    display: table-column-group;
+}
+.sd-display--table-row-group {
+    display: table-row-group;
+}
+.sd-display--table-footer-group {
+    display: table-footer-group;
+}
+.sd-display--table-header-group {
+    display: table-header-group;
+}
+.sd-display--table-caption {
+    display: table-caption;
+}
+
+
+.sd-display--inline-flex {
     display: inline-flex !important;
 }
+.sd-display--flex {
+    display: flex !important;
+}
+
+
+// FLEXBOX PROPERTIES
+
+// Flex direction
+.sd-flex--direction-row {
+    flex-direction: row !important;
+}
+.sd-flex--direction-col {
+    flex-direction: column !important;
+}
+.sd-flex--direction-row-reverse {
+    flex-direction: row-reverse !important;
+}
+.sd-flex--direction-col-reverse {
+    flex-direction: column-reverse !important;
+}
+// Flex wrap
+.sd-flex--wrap {
+    flex-wrap: wrap;
+}
+.sd-flex--wrap-reverse {
+    flex-wrap: wrap-reverse;
+}
+.sd-flex--nowrap {
+    flex-wrap: nowrap;
+}
+// Flex flex
+.sd-flex--flex-1 {
+    flex: 1 1 0%;
+}
+.sd-flex--flex-1 {
+    flex: 1 1 0%;
+}
+.sd-flex--flex-auto {
+    flex: 1 1 auto;
+}
+.sd-flex--flex-initial {
+    flex: 0 1 auto;
+}
+.sd-flex--flex-none {
+    flex: none;
+}
+// Flex shrink & grow
+.sd-flex--shrink {
+    flex-shrink: 1 !important;
+}
+.sd-flex--shrink-0 {
+    flex-shrink: 0 !important;
+}
+.sd-flex--grow {
+    flex-grow: 1 !important;
+}
+.sd-flex--grow-0 {
+    flex-grow: 0 !important;
+}
+// Flex alignment
+.sd-flex--justify-start {
+    justify-content: flex-start !important;
+}
+.sd-flex--justify-end {
+    justify-content: flex-end !important;
+}
+.sd-flex--justify-center {
+    justify-content: center !important;
+}
+.sd-flex--justify-between {
+    justify-content: space-between !important;
+}
+.sd-flex--justify-around {
+    justify-content: space-around !important;
+}
+.sd-flex--justify-evenly {
+    justify-content: space-evenly !important;
+}
+.sd-flex--items-start {
+    align-items: flex-start !important;
+}
+.sd-flex--items-end {
+    align-items: flex-end !important;
+}
+.sd-flex--items-center {
+    align-items: center !important;
+}
+.sd-flex--items-baseline {
+    align-items: baseline !important;
+}
+.sd-flex--items-stretch {
+    align-items: stretch !important;
+}
 
 // Hide if empty
 .sd-empty:empty {
     display: none !important;
 }
 
-// Overflow helper classes
+// POSITION HELPERS
 // --------------------------------------------------
-.overflow-auto {
+.sd-position--static {
+    position: static;
+}
+.sd-position--fixed {
+    position: fixed;
+}
+.sd-position--relative {
+    position: relative;
+}
+.sd-position--absolute {
+    position: absolute;
+}
+.sd-position--sticky {
+    position: sticky;
+}
+
+// OVERFLOW HELPERS
+// --------------------------------------------------
+
+.sd-overflow--auto {
     overflow: auto !important;
 }
-.overflow-hidden {
+.sd-overflow--hidden {
     overflow: hidden !important;
 }
-.overflow-x-hidden {
+.sd-overflow--visible {
+    overflow: visible !important;
+}
+.sd-overflow--scroll {
+    overflow: scroll !important;
+}
+.sd-overflow--x-auto {
+    overflow-x: auto !important;
+}
+.sd-overflow--y-auto {
+    overflow-y: auto !important;
+}
+.sd-overflow--x-hidden {
     overflow-x: hidden !important;
 }
+.sd-overflow--y-hidden {
+    overflow-y: hidden !important;
+}
+.sd-overflow--x-visible {
+    overflow-x: visible !important;
+}
+.sd-overflow--y-visible {
+    overflow-y: visible !important;
+}
+.sd-overflow--x-scroll {
+    overflow-x: scroll !important;
+}
+.sd-overflow--y-scroll {
+    overflow-y: scroll !important;
+}
+
+// Text overflow
+.sd-overflow-ellipsis, .sd-overflow--ellipsis {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+// OBJECT FIT HELPERS
+// --------------------------------------------------
+
+.sd-object-fit--contain {
+    object-fit: contain;
+}
+.sd-object-fit--cover {
+    object-fit: cover;
+}
+.sd-object-fit--fill {
+    object-fit: fill;
+}
+.sd-object-fit--none {
+    object-fit: none;
+}
+.sd-object-fit--scale-down {
+    object-fit: scale-down;
+}
+
+// OBJECT POSITION HELPERS
+// --------------------------------------------------
+// Defines the positin of any selected replaced element (e.g., an <img>)
+// within the box that contains it. For it to work it must be used with 'sd-object-fit--none' (object-fit: none;)
+
+.sd-object-position--bottom {
+    object-position: bottom;
+}
+.sd-object-position--center {
+    object-position: center;
+}
+.sd-object-position--left {
+    object-position: left;
+}
+.sd-object-position--left-bottom {
+    object-position: left bottom;
+}
+.sd-object-position--left-top {
+    object-position: left top;
+}
+.sd-object-position--right {
+    object-position: right;
+}
+.sd-object-position--right-bottom {
+    object-position: right bottom;
+}
+.sd-object-position--right-top {
+    object-position: right top;
+}
+.sd-object-position--top {
+    object-position: top;
+}
 
-// Shadow helper classes
+// SHADOW HELPER CLASSES
 // --------------------------------------------------
 
 $sd-shadowProperties: (
+    'z0': (none),
     'z1': (0 1px 3px rgba(0,0,0,.16), 0 0 1px rgba(0,0,0,.1)),
     'z2': (0 1px 4px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.1)),
     'z3': (0 1px 6px rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.24), 0 0 1px rgba(0,0,0,.1)),
@@ -113,7 +347,7 @@ $sd-shadowProperties: (
 
 
 
-// Webkit scroll
+// WEBKIT SCROLL
 // --------------------------------------------------
 
 ::-webkit-scrollbar {
@@ -124,54 +358,19 @@ $sd-shadowProperties: (
     right: 10px;
 }
 ::-webkit-scrollbar:hover {
-    background-color: rgba(140,140,140,.2);
+    background-color: var(--sd-colour__webkit-scrollbar--hover);
     cursor: pointer;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: rgba(0,0,0,.3);
+    background: var(--sd-colour__webkit-scrollbar-thumb);
 }
 ::-webkit-scrollbar-thumb:hover {
-    background: rgba(0,0,0,.6);
+    background: var(--sd-colour__webkit-scrollbar-thumb--hover);
     cursor: pointer;
 }
 
-// text overflow
-// --------------------------------------------------
-
-.sd-overflow-ellipsis {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-// content no wrap 
-// --------------------------------------------------
-
-.sd-no-wrap {
-    white-space: nowrap;
-}
-
-// Element with badge
-.element-with-badge {
-    display: inline-block;
-    position: relative;
-    .badge {
-      position: absolute;
-      top: -.9rem;
-      right: -.9rem;
-    }
-    + .element-with-badge, + .btn {
-      margin-left: 1.2rem;
-      vertical-align: top;
-    }
-}
-.btn + .element-with-badge {
-    margin-left: 1.2rem;
-    vertical-align: top;
-}
-
-// Deafult headings 
+// HEADINGS 
 // --------------------------------------------------
 
 .sd-heading-3 {
@@ -185,37 +384,218 @@ p strong {
     font-weight: 500;
 }
 time {
-    color: #747474;
-    font-weight: 300;
+    color: $sd-text-light;
+    font-weight: 400;
     letter-spacing: .025em;
     &.small {
         font-size: calc(100% - 0.1rem);
     }
 }
 
-// General text helpers
-.sd-text__strong-s {
-    font-weight: 500;
+// TYPOGRAPHY HELPERS
+// -------------------------------------------------
+
+// .sd-text {
+//     color: inherit;
+//     font-weight: 300;
+//     line-height: 1.5;
+//     &--medium {
+//         font-size: 1.4rem;
+//     }
+//     &--large {
+//         font-size: 1.6rem;
+//     }
+// }
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
 }
-.sd-text__strong {
-    font-weight: 500;
+.sd-heading {
+    margin: 0;
+    &--h1 {
+        font-size: calc(var(--text-size--base) * 2.4);
+        font-weight: 400;
+    }
+    &--h2 {
+        font-size: calc(var(--text-size--base) * 2);
+        font-weight: 500;
+    }
+    &--h3 {
+        font-size: calc(var(--text-size--base) * 1.6);
+        font-weight: 400;
+    }
+    &--h4 {
+        font-size: calc(var(--text-size--base) * 1.5);
+        font-weight: 500;
+    }
+    &--h5 {
+        font-size: calc(var(--text-size--base) * 1.4);
+        font-weight: 500;
+    }
+    &--h6 {
+        font-size: calc(var(--text-size--base) * 1.2);
+        font-weight: 500;
+        text-transform: uppercase;
+        color: $sd-text-light;
+    }
+}
+
+
+.sd-text {
     font-size: 1.4rem;
+    line-height: 1.4;
 }
-.sd-text__normal {
+
+.sd-time {
+    font-size: 1.2rem;
+    display: inline-block;
+    color: var(--color-text-light);
+    letter-spacing: 0.025em;
+}
+
+// Font weights 
+
+.sd-text__light,
+.sd-text--light {
+    font-weight: 300;
+}
+.sd-text__normal,
+.sd-text--normal {
     font-weight: 400;
 }
-.sd-text__italic {
+.sd-text--medium  {
+    font-weight: 500;
+}
+.sd-text__strong,
+.sd-text--strong  {
+    font-weight: 700;
+}
+.sd-text--bold  {
+    font-weight: 700;
+}
+// Font style
+.sd-text__italic,
+.sd-text--italic {
     font-style: italic;
 }
-.sd-text__right {
-    text-align: right;
+.sd-text--non-italic {
+    font-style: normal;
+}
+// Text alignment
+.sd-text-align--left,
+.sd-text-align--start {
+    text-align: start;
 }
-.sd-text__center {
+.sd-text__center,
+.sd-text-align--center {
     text-align: center;
 }
-.sd-text__serif {
-    font-family:'Merriweather', Georgia, 'Times New Roman', Times, serif !important;
+.sd-text__right,
+.sd-text-align--right,
+.sd-text-align--end {
+    text-align: end;
+}
+.sd-text-align--justify {
+    text-align: justify;
+}
+// Font family
+.sd-text__serif,
+.sd-text--serif  {
+    font-family: $baseFontFamilySerif;
+}
+.sd-text--sans  {
+    font-family: $baseFontFamily;
 }
+.sd-text--mono  {
+    font-family: $baseFontFamilyMono;
+}
+// Word Break
+.sd-word-break--normal {
+    overflow-wrap: normal;
+    word-break: normal;
+}
+.sd-word-break--words {
+    overflow-wrap: break-word;
+}
+.sd-word-break--all {
+    word-break: break-all;
+}
+// Whitespace
+.sd-whitespace--normal {
+    white-space: normal;
+}
+.sd-whitespace--nowrap {
+    white-space: nowrap;
+}
+.sd-whitespace--pre {
+    white-space: pre;
+}
+.sd-whitespace--pre-line {
+    white-space: pre-line;
+}
+.sd-whitespace--pre-wrap {
+    white-space: pre-wrap;
+}
+// Text Transform
+.sd-txt-transform--uppercase {
+    text-transform: uppercase;
+}
+.sd-txt-transform--lowercase {
+    text-transform: lowercase;
+}
+.sd-txt-transform--capitalize {
+    text-transform: capitalize;
+}
+.sd-txt-transform--none {
+    text-transform: none;
+}
+// Text Decoration
+.sd-txt-decoration--underline {
+    text-decoration: underline;
+}
+.sd-txt-decoration--line-through {
+    text-decoration: line-through;
+}
+.sd-txt-decoration--none {
+    text-decoration: none;
+}
+
+// Line Clamp
+// limit the number of horizontal lines in an elemnt (e.g. <p>)
+// it doesn't work if the element has set flex-grow: 1;
+@mixin line-clamp-base {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+.sd-line-clamp--1 {
+    @include line-clamp-base;
+    -webkit-line-clamp: 1;
+}
+.sd-line-clamp--2 {
+    @include line-clamp-base;
+    -webkit-line-clamp: 2;
+}
+.sd-line-clamp--3 {
+    @include line-clamp-base;
+    -webkit-line-clamp: 3;
+}
+.sd-line-clamp--4 {
+    @include line-clamp-base;
+    -webkit-line-clamp: 4;
+}
+.sd-line-clamp--5 {
+    @include line-clamp-base;
+    -webkit-line-clamp: 5;
+}
+.sd-line-clamp--6 {
+    @include line-clamp-base;
+    -webkit-line-clamp: 6;
+}
+.sd-line-clamp--none {
+    -webkit-line-clamp: unset;
+}
+
 // Superdesk specific text helpers 
 .sd-text__slugline {
     color: $sd-slugline;
@@ -231,109 +611,26 @@ time {
     line-height: 1.4;
 }
 
-.sd-text {
-    color: inherit;
-    font-weight: 300;
-    line-height: 1.5;
-    &--medium {
-        font-size: 1.4rem;
-    }
-    &--large {
-        font-size: 1.6rem;
-    }
-}
 .sd-text__date-time {
-    color: #747474;
-    font-weight: 300;
+    color: var(--color-text-light);
+    font-weight: 400;
     letter-spacing: .025em;
     &--small {
         font-size: 1.2rem;
     }
 }
 .sd-text__date-and-author {
-    font-size: 1.2rem;
+    font-size: 1.3rem;
 }
 .sd-text__author {
     font-weight: 500;
-    //color: $sd-text;
 }
+
 .sd-text__info {
     font-weight: 300;
     color: $grayText;
 }
 
-.dark-ui {
-    .sd-text__slugline {
-        color: $sd-slugline-darkUI;
-    }
-}
-
-
-// Dashboard content header
-.dashboard-content-header {
-    display: flex;
-    padding: 1.5rem;
-}
-
-.big-number-block {
-    display: flex;
-    color: $grayNeutral;
-
-    &__number {
-        font-size: 3.6rem;
-        font-weight: 300;
-        line-height: 100%;
-        letter-spacing: -.02em;
-    }
-    &__text {
-        margin: 0 1rem;
-        line-height: 120%;
-        font-weight: 300;
-    }
-
-    &--grow {
-        flex-grow: 1;
-    }
-    &--center {
-        align-items: center;
-    }
-}
-.dashboard-thumbnail-block {
-    display: flex;
-
-    &__image {
-        border: 1px solid #d6d6d6;
-    }
-    &__meta {
-        padding: 0 1rem;
-        display: flex;
-        flex-direction: column;
-    }
-    &__label {
-        font-size: 1.2rem;
-        color: $grayLight;
-    }
-    &__heading {
-        display: flex;
-        font-weight: 700;
-        padding: .3rem 0;
-
-        i {
-            margin-right: .5rem;
-        }
-    }
-    &__link {
-        color: $sd-blue;
-        text-decoration: none;
-        border-bottom: 1px dotted $sd-blue;
-        &:hover {
-            border-bottom: 1px solid $sd-blue;
-            text-decoration: none;
-            color: $sd-blue;
-        }
-    }
-}
-
 .sd-text-icon {
     display: inline-flex;
     i {
@@ -348,7 +645,9 @@ time {
     margin-left: 1rem;
 }
 
-// opacity
+// Opacity helpers
+// -------------------------------------------------
+
 .sd-opacity--20 {
     opacity: 0.2 !important;
 }
@@ -372,26 +671,18 @@ time {
 }
 
 
-// panel border
-.panel-border-left {
-    border-right: 0;
-    border-left: 2px solid rgba(0, 0, 0, 0.4);
-}
-.panel-border-right {
-    border-left: 0;
-    border-right: 2px solid rgba(0, 0, 0, 0.4);
-}
-
-
-// auto margin
+// Margin auto
+// -------------------------------------------------
 
 .ml-auto,
-.sd-margin-l--auto {
-    margin-left: auto !important;
+.sd-margin-l--auto,
+.sd-margin-s--auto {
+    margin-inline-start: auto !important;
 }
 .mr-auto,
-.sd-margin-r--auto {
-    margin-right: auto !important;
+.sd-margin-r--auto,
+.sd-margin-e--auto {
+    margin-inline-end: auto !important;
 }
 .mt-auto,
 .sd-margin-t--auto {
@@ -403,8 +694,8 @@ time {
 }
 .mlr-auto,
 .sd-margin-x--auto {
-    margin-left: auto !important;
-    margin-right: auto !important;
+    margin-inline-start: auto !important;
+    margin-inline-end: auto !important;
 }
 .sd-margin-y--auto {
     margin-top: auto !important;
@@ -414,35 +705,6 @@ time {
     margin: auto !important;
 }
 
-
-// flex
-.sd-display-flex-column {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-}
-.sd-flex-wrap {
-    flex-wrap: wrap;
-}
-.sd-flex-shrink {
-    flex-shrink: 1 !important;
-}
-.sd-flex-no-shrink {
-    flex-shrink: 0 !important;
-}
-.sd-flex-justify-end {
-    justify-content: flex-end !important;
-}
-.sd-flex-align-items-center {
-    align-items: center !important;
-}
-.sd-flex-grow {
-    flex-grow: 1 !important;
-}
-.sd-flex-no-grow {
-    flex-grow: 0 !important;
-}
-
 // Common margin overrides
 // -------------------------------------------------
 
@@ -555,123 +817,234 @@ $sd-properties: (padding, margin); // It's generating these properties
 //-------------------------------------------------------
 
 
-// Overlay block
+.sd-wrap-helper {
+    display: contents !important;
+}
 
-.sd-overlay-block {
-    position: relative;
-    
-    img {
-        width: 100%;
-    }
-    
-    &__overlay {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-        background-color: rgba(0, 0, 0, 0.5);
-        transition: 0.2s linear opacity;   
-        opacity: 0;
-        color: #fff;
-    }
 
-    &:hover {
-        .sd-overlay-block__overlay {
-            opacity: 1;
-        }
-    }
 
-    &__overlay-action-group {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        flex-grow: 1;        
-    }
+.sd-accessibility__btn-text--invisible,
+.sd-accessibility__screenreader-text {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 0.1rem;
+    color: transparent !important;
+    pointer-events: none;
+}
 
-    &__overlay-action {
-        flex-grow: 0;
-        flex-shrink: 0;
-        color: #fff;
-        width: 5.6rem;
-        height: 5.6rem;
-        border: 2px solid rgba(255, 255, 255, 0.5);
-        border-radius: 50%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        transition: 0.2s linear all;
-        cursor: pointer;
-        text-decoration: none;
-        background-color: transparent;
-    
-        i {
-            color: #fff;
-            height: 2.4rem;
-            width: 2.4rem;
-            font-size: 2.4rem;
-            line-height: 1;
-            opacity: 0.5;
-            transition: 0.2s linear all;
-        }
 
-        &:hover {
-            border-color: white;
-            background-color: rgba(0, 0, 0, 0.4);
-            text-decoration: none;
+// remove this after refactoring
+// --------------------------------------------
+.overflow-auto {
+    overflow: auto !important;
+}
+.overflow-hidden {
+    overflow: hidden !important;
+}
+.overflow-x-hidden {
+    overflow-x: hidden !important;
+}
+.sd-d-none {
+    display: none !important;
+}
+.sd-d-inline {
+    display: inline !important;
+}
+.sd-d-inline-block {
+    display: inline-block !important;
+}
+.sd-d-block {
+    display: block !important;
+}
+.sd-d-flex {
+    display: flex !important;
+}
+.sd-d-inline-flex {
+    display: inline-flex !important;
+}
+
 
-            i {
-                opacity: 1;
-            }
-        }
-        + .sd-overlay-block__overlay-action {
-            margin-left: 2rem;
-        }
-    }
-    .sd-overlay-block__overlay-message {
-        display: none;
-        margin-top: 1rem;
-        color: $grayText;
-    }
+.sd-display-flex-column {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+.sd-flex-wrap {
+    flex-wrap: wrap;
+}
+.sd-flex-shrink {
+    flex-shrink: 1 !important;
+}
+.sd-flex-no-shrink {
+    flex-shrink: 0 !important;
+}
+.sd-flex-justify-end {
+    justify-content: flex-end !important;
+}
+.sd-flex-justify-center {
+    justify-content: center  !important;
+}
+.sd-flex-justify-space-between {
+    justify-content: space-between  !important;
+}
+.sd-flex-align-items-center {
+    align-items: center !important;
+}
+.sd-flex-grow {
+    flex-grow: 1 !important;
+}
+.sd-flex-no-grow {
+    flex-grow: 0 !important;
+}
+.sd-no-wrap {
+    white-space: nowrap;
+}
+// --------------------------------------------
 
-    &--no-image {
-        height: 160px;
-        border: 2px dashed $grayDark;
 
-        .sd-overlay-block__overlay {
-            opacity: 1;
-        }
-        img {
-            display: none;
-        }
-        .sd-overlay-block__overlay-action-group {
-            flex-direction: column;
-        }
-        .sd-overlay-block__overlay-message {
-            display: block;
-        }
-    }
+// Border Radius
+.sd-radius--x-small {
+    border-radius: var(--b-radius--x-small);
+}
+.sd-radius--small {
+    border-radius: var(--b-radius--small);
+}
+.sd-radius--medium {
+    border-radius: var(--b-radius--medium);
+}
+.sd-radius--large {
+    border-radius: var(--b-radius--large);
+}
+.sd-radius--x-large {
+    border-radius: var(--b-radius--x-large);
+}
+.sd-radius--full {
+    border-radius: var(--b-radius--full);
 }
 
-.sd-wrap-helper {
-    display: contents !important;
- }
+// Border
+.sd-border--x-light {
+    border: 1px solid var(--sd-colour-line--x-light);
+}
+.sd-border--light {
+    border: 1px solid var(--sd-colour-line--light);
+}
+.sd-border--medium {
+    border: 1px solid var(--sd-colour-line--medium);
+}
+.sd-border--strong {
+    border: 1px solid var(--sd-colour-line--strong);
+}
+.sd-border--x-light {
+    border: 1px solid var(--sd-colour-line--x-light);
+}
+.sd-border-style--dotted {
+    border-style: dotted !important;
+}
+.sd-border-style--dashed{
+    border-style: dashed !important;
+}
 
- .sd-word-break--all {
-    word-break: break-all;
- }
-
- .sd-accessibility__btn-text--invisible, .sd-accessibility__screenreader-text {
-     position: absolute;
-     top: 0;
-     left: 0;
-     font-size: 0.1rem;
-     color: transparent !important;
-     pointer-events: none;
- }
+.sd-border-width--2 {
+    border-width: 2px;
+}
+.sd-border-width--3 {
+    border-width: 3px;
+}
+
+// Font size
+.sd-font-size--x-small {
+    font-size: calc(var(--text-size--base) * 1.2); // 12px;
+}
+.sd-font-size--small {
+    font-size: calc(var(--text-size--base) * 1.4); // 14px;
+}
+.sd-font-size--medium {
+    font-size: calc(var(--text-size--base) * 1.6); // 16px;
+}
+.sd-font-size--large {
+    font-size: calc(var(--text-size--base) * 2); // 20px;
+}
+
+// Text colour
+.sd-text-color--lighter {
+    color: var(--color-text-lighter) !important;
+}
+.sd-text-color--light {
+    color: var(--color-text-light) !important;
+}
+.sd-text-color--normal {
+    color: var(--color-text) !important;
+}
+
+// Background colours
+.sd-panel-bg--100 {
+    background-color: var(--sd-colour-panel-bg--100);
+}
+.sd-panel-bg--000 {
+    background-color: var(--sd-item__main-Bg);
+}
+.sd-panel-bg--gradient-1 {
+    background-color: var(--sd-item__main-Bg);
+    background: linear-gradient(180deg, var(--sd-colour-interactive--alpha-20) 0%, var(--sd-item__main-Bg) 40%);
+}
+
+.sd-state--focus:focus-within,
+.sd-state--active {
+    box-shadow: var(--sd-shadow__item--selected) !important;
+    transition: box-shadow 0.3s ease, filter 0.3s ease ;
+}
+.sd-width--xxx-small {
+    width: var(--width__container--xxx-small) !important;
+}
+.sd-width--xx-small {
+    width: var(--width__container--xx-small);
+}
+.sd-width--x-small {
+    width: var(--width__container--x-small);
+}
+.sd-width--small {
+    width: var(--width__container--small);
+}
+.sd-width--medium {
+    width: var(--width__container--medium);
+}
+.sd-width--large { 
+    width: var(--width__container--large);
+}
+.sd-width--x-large {
+    width: var(--width__container--x-large);
+}
+.sd-width--xx-large {
+    width: var(--width__container--xx-large);
+}
+.sd-width--xxx-large {
+    width: var(--width__container--xxx-large);
+}
+.sd-width--full {
+    width: var(--width__container--full);
+}
+
+
+.sd-gap--x-small {
+    gap: var(--gap--x-small);
+}
+.sd-gap--small {
+    gap: var(--gap--small);
+}
+.sd-gap--medium {
+    gap: var(--gap--medium);
+}
+.sd-gap--large {
+    gap: var(--gap--large);
+}
+.sd-gap--x-large {
+    gap: var(--gap--x-large);
+}
+.sd-gap--xx-large {
+    gap: var(--gap--xx-large);
+}
+.sd-gap--auto {
+    gap: var(--gap--auto);
+}