superdesk-ui-framework 2.4.20 → 3.0.1-beta.1

package/app/img/spinner.svg

@@ -0,0 +1,3 @@
+<svg class="sd-spinner" viewBox="0 0 50 50">
+    <circle class="sd-spinner__path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
+</svg>

package/app/img/themes/theme-base.svg

@@ -0,0 +1 @@
+<svg height="94" viewBox="0 0 156 94" width="156" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="m22 22h134v22h-134z"/><filter id="b" height="109.1%" width="100.7%" x="-.4%" y="-2.3%"><feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" type="matrix" values="0 0 0 0 0.556862745   0 0 0 0 0.556862745   0 0 0 0 0.556862745  0 0 0 1 0"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="m0 0h156v94h-156z" fill="#fff"/><path d="m22 65h134v29h-134z" fill="#fff"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><use fill="#fff" fill-rule="evenodd" xlink:href="#a"/><circle cx="144" cy="33" fill="#647182" r="4"/><rect fill="#c1c8d1" height="15" rx="2" width="58" x="29" y="52"/><rect fill="#222" height="3" rx="1.5" width="9" x="37" y="58"/><rect fill="#222" height="3" rx="1.5" width="11" x="68" y="58"/><rect fill="#222" height="3" rx="1.5" width="18" x="48" y="58"/><rect fill="#c1c8d1" height="15" rx="2" width="58" x="29" y="71"/><rect fill="#222" height="3" rx="1.5" width="9" x="37" y="77"/><rect fill="#222" height="3" rx="1.5" width="11" x="68" y="77"/><rect fill="#222" height="3" rx="1.5" width="18" x="48" y="77"/><rect fill="#0021ff" height="15" rx="2" width="58" x="91" y="71"/><g fill="#fff"><rect height="3" rx="1.5" width="9" x="99" y="77"/><rect height="3" rx="1.5" width="11" x="130" y="77"/><rect height="3" rx="1.5" width="18" x="110" y="77"/></g><rect fill="#c1c8d1" height="15" rx="2" width="58" x="91" y="52"/><g fill="#222"><rect height="3" rx="1.5" width="9" x="99" y="58"/><rect height="3" rx="1.5" width="11" x="130" y="58"/><rect height="3" rx="1.5" width="18" x="110" y="58"/><rect height="4" rx="2" width="11" x="29" y="31"/><rect height="4" rx="2" width="14" x="70" y="31"/><rect height="4" rx="2" width="23" x="43" y="31"/></g><path d="m0 22h22v72h-22z" fill="#bfc3ca"/><circle cx="11" cy="34" fill="#647182" opacity=".803154" r="6"/><circle cx="11" cy="52" fill="#0021ff" r="6"/><circle cx="11" cy="70" fill="#647182" opacity=".803154" r="6"/><path d="m0 0h156v22h-156z" fill="#1b1e23"/><rect fill="#c1c8d1" height="4" rx="2" width="11" x="31" y="9"/><rect fill="#c1c8d1" height="4" rx="2" width="23" x="45" y="9"/><path d="m0 0h22v22h-22z" fill="#121417"/><path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/></g></svg>

package/app/img/themes/theme-contrast.svg

@@ -0,0 +1,45 @@
+<svg height="94" viewBox="0 0 156 94" width="156" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path id="a" d="m22 22h134v22h-134z"/>
+        <filter id="b" height="109.1%" width="100.7%" x="-.4%" y="-2.3%">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+            <feColorMatrix in="shadowOffsetOuter1" type="matrix" values="0 0 0 0 0.556862745   0 0 0 0 0.556862745   0 0 0 0 0.556862745  0 0 0 1 0"/>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path d="m0 0h156v94h-156z" fill="#fff"/>
+        <path d="m22 65h134v29h-134z" fill="#fff"/>
+        <use fill="#000" filter="url(#b)" xlink:href="#a"/>
+        <use fill="#fff" fill-rule="evenodd" xlink:href="#a"/>
+        <circle cx="144" cy="33" fill="#647182" r="4"/>
+        <rect fill="#c1c8d1" height="15" rx="2" width="58" x="29" y="52"/>
+        <rect fill="#222" height="3" rx="1.5" width="9" x="37" y="58"/>
+        <rect fill="#222" height="3" rx="1.5" width="11" x="68" y="58"/>
+        <rect fill="#222" height="3" rx="1.5" width="18" x="48" y="58"/>
+        <rect fill="#c1c8d1" height="15" rx="2" width="58" x="29" y="71"/>
+        <rect fill="#222" height="3" rx="1.5" width="9" x="37" y="77"/>
+        <rect fill="#222" height="3" rx="1.5" width="11" x="68" y="77"/>
+        <rect fill="#222" height="3" rx="1.5" width="18" x="48" y="77"/>
+        <rect fill="#0021ff" height="15" rx="2" width="58" x="91" y="71"/>
+        <rect fill="#fff" height="3" rx="1.5" width="9" x="99" y="77"/>
+        <rect fill="#fff" height="3" rx="1.5" width="11" x="130" y="77"/>
+        <rect fill="#fff" height="3" rx="1.5" width="18" x="110" y="77"/>
+        <rect fill="#c1c8d1" height="15" rx="2" width="58" x="91" y="52"/>
+        <g fill="#222"><rect height="3" rx="1.5" width="9" x="99" y="58"/>
+            <rect height="3" rx="1.5" width="11" x="130" y="58"/>
+            <rect height="3" rx="1.5" width="18" x="110" y="58"/>
+            <rect height="4" rx="2" width="11" x="29" y="31"/>
+            <rect height="4" rx="2" width="14" x="70" y="31"/>
+            <rect height="4" rx="2" width="23" x="43" y="31"/>
+        </g>
+        <path d="m0 22h22v72h-22z" fill="#bfc3ca"/>
+        <circle cx="11" cy="34" fill="#647182" opacity=".803154" r="6"/>
+        <circle cx="11" cy="52" fill="#0021ff" r="6"/>
+        <circle cx="11" cy="70" fill="#647182" opacity=".803154" r="6"/>
+        <path d="m0 0h156v22h-156z" fill="#1b1e23"/>
+        <rect fill="#c1c8d1" height="4" rx="2" width="11" x="31" y="9"/>
+        <rect fill="#c1c8d1" height="4" rx="2" width="23" x="45" y="9"/>
+        <path d="m0 0h22v22h-22z" fill="#121417"/>
+        <path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/>
+    </g>
+</svg>

package/app/img/themes/theme-dark.svg

@@ -0,0 +1 @@
+<svg height="94" viewBox="0 0 156 94" width="156" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="m22 22h134v22h-134z"/><filter id="b" height="109.1%" width="100.7%" x="-.4%" y="-2.3%"><feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" type="matrix" values="0 0 0 0 0.235294118   0 0 0 0 0.254901961   0 0 0 0 0.28627451  0 0 0 1 0"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="m0 0h156v94h-156z" fill="#23282e"/><path d="m22 44h134v50h-134z" fill="#23282e"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><use fill="#23282e" fill-rule="evenodd" xlink:href="#a"/><circle cx="144" cy="33" fill="#647182" r="4"/><rect fill="#4d5865" height="15" rx="2" width="58" x="29" y="52"/><g fill="#bac1c8"><rect height="3" rx="1.5" width="9" x="37" y="58"/><rect height="3" rx="1.5" width="11" x="68" y="58"/><rect height="3" rx="1.5" width="18" x="48" y="58"/></g><rect fill="#4d5865" height="15" rx="2" width="58" x="29" y="71"/><rect fill="#bac1c8" height="3" rx="1.5" width="9" x="37" y="77"/><rect fill="#bac1c8" height="3" rx="1.5" width="11" x="68" y="77"/><rect fill="#bac1c8" height="3" rx="1.5" width="18" x="48" y="77"/><rect fill="#40bf95" height="15" rx="2" width="58" x="91" y="71"/><rect fill="#fff" height="3" rx="1.5" width="9" x="99" y="77"/><rect fill="#fff" height="3" rx="1.5" width="11" x="130" y="77"/><rect fill="#fff" height="3" rx="1.5" width="18" x="110" y="77"/><rect fill="#4d5865" height="15" rx="2" width="58" x="91" y="52"/><rect fill="#bac1c8" height="3" rx="1.5" width="9" x="99" y="58"/><rect fill="#bac1c8" height="3" rx="1.5" width="11" x="130" y="58"/><rect fill="#bac1c8" height="3" rx="1.5" width="18" x="110" y="58"/><rect fill="#c0c6cd" height="4" rx="2" width="11" x="29" y="31"/><rect fill="#c0c6cd" height="4" rx="2" width="14" x="70" y="31"/><rect fill="#c0c6cd" height="4" rx="2" width="23" x="43" y="31"/><path d="m0 22h22v72h-22z" fill="#373f48"/><circle cx="11" cy="34" fill="#959da7" opacity=".797982" r="6"/><circle cx="11" cy="52" fill="#40bf95" r="6"/><circle cx="11" cy="70" fill="#959da7" opacity=".797982" r="6"/><path d="m0 0h156v22h-156z" fill="#1b1e23"/><rect fill="#c1c8d1" height="4" opacity=".554382" rx="2" width="11" x="31" y="9"/><rect fill="#c1c8d1" height="4" opacity=".554382" rx="2" width="23" x="45" y="9"/><path d="m0 0h22v22h-22z" fill="#121417"/><path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/></g></svg>

package/app/img/themes/theme-light.svg

@@ -0,0 +1 @@
+<svg height="94" viewBox="0 0 156 94" width="156" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="m22 22h134v22h-134z"/><filter id="b" height="109.1%" width="100.7%" x="-.4%" y="-2.3%"><feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" type="matrix" values="0 0 0 0 0.650980392   0 0 0 0 0.674509804   0 0 0 0 0.705882353  0 0 0 0.547072191 0"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="m0 0h156v94h-156z" fill="#fff"/><path d="m22 45h134v49h-134z" fill="#f3f5f6"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><use fill="#f3f5f6" fill-rule="evenodd" xlink:href="#a"/><rect fill="#c1c8d1" height="15" rx="2" width="58" x="29" y="52"/><rect fill="#596473" height="3" rx="1.5" width="9" x="37" y="58"/><rect fill="#596473" height="3" rx="1.5" width="11" x="68" y="58"/><rect fill="#596473" height="3" rx="1.5" width="18" x="48" y="58"/><rect fill="#c1c8d1" height="15" rx="2" width="58" x="29" y="71"/><rect fill="#596473" height="3" rx="1.5" width="9" x="37" y="77"/><rect fill="#596473" height="3" rx="1.5" width="11" x="68" y="77"/><rect fill="#596473" height="3" rx="1.5" width="18" x="48" y="77"/><rect fill="#c1c8d1" height="15" rx="2" width="58" x="91" y="52"/><rect fill="#596473" height="3" rx="1.5" width="9" x="99" y="58"/><rect fill="#596473" height="3" rx="1.5" width="11" x="130" y="58"/><rect fill="#596473" height="3" rx="1.5" width="18" x="110" y="58"/><rect fill="#5ea9c8" height="15" rx="2" width="58" x="91" y="71"/><rect fill="#fff" height="3" rx="1.5" width="9" x="99" y="77"/><rect fill="#fff" height="3" rx="1.5" width="11" x="130" y="77"/><rect fill="#fff" height="3" rx="1.5" width="18" x="110" y="77"/><g fill="#647182"><rect height="4" rx="2" width="11" x="29" y="31"/><rect height="4" rx="2" width="14" x="70" y="31"/><circle cx="11" cy="33" opacity=".404886" r="6"/><rect height="4" rx="2" width="23" x="43" y="31"/></g><path d="m0 22h22v72h-22z" fill="#d4d8de"/><circle cx="144" cy="33" fill="#647182" opacity=".404886" r="4"/><circle cx="11" cy="52" fill="#5ea9c8" r="6"/><circle cx="11" cy="70" fill="#647182" opacity=".404886" r="6"/><circle cx="11" cy="34" fill="#647182" opacity=".404886" r="6"/><path d="m0 0h156v22h-156z" fill="#1b1e23"/><rect fill="#c1c8d1" height="4" rx="2" width="11" x="31" y="9"/><rect fill="#c1c8d1" height="4" rx="2" width="23" x="45" y="9"/><path d="m0 0h22v22h-22z" fill="#121417"/><path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/></g></svg>

package/app/index.js

@@ -27,7 +27,7 @@ export {
     Switch,
     SwitchGroup,
     Loader,
-    Radio,
+    RadioGroup,
     CheckBox,
     RadioButton,
     CheckboxButton,
@@ -48,6 +48,7 @@ export {
     Dropdown,
     Popover,
     Carousel,
+    ContentDivider,
 } from '../app-typescript/index';
 
 export default angular.module('superdesk-ui', [

package/app/scripts/modals.js

@@ -62,6 +62,7 @@ function sdModal($document, $rootScope) {
             $document.bind('keydown', (evt) => {
                 if (evt.which === 27 && $rootScope.modals > 0) {
                     evt.preventDefault();
+
                     closeModal();
                 }
             });

package/app/styles/_accessibility.scss

@@ -1,5 +1,5 @@
 .a11y-only {
-    position: absolute !important;
+    position: absolute;
     top: 0;
     z-index: -1;
     pointer-events: none;
@@ -7,8 +7,310 @@
     height: 0;
     width: 0;
     min-width: 0;
-    overflow: hidden;
+    overflow: hidden !important;
     font-size: 0.01px !important;
     padding: 0 !important;
     margin: 0 !important;
-}
+}
+
+[data-theme="accessible-light-ui"],
+[data-theme="contrast-light-ui"] {
+
+    --font-size-large: 1.5rem;
+  
+    --color-accessible-text:              hsla(0, 0%, 7%, 1);
+    --sd-slugline-color:                  hsla(241, 100%, 50%, 1);
+  
+    --color-input-bg:                     hsla(0, 0%, 0%, 0.05);
+    --color-input-bg--hover:              hsla(0, 0%, 0%, 0.08);
+    --color-input-bg--focus:              hsla(198, 49%, 58%, 0.14);
+    --color-label-text:                   hsla(0, 0%, 25%, 1);
+  
+    --color-input-border:                 hsla(0, 0%, 0%, 0.35);
+    --color-input-border-hover:           hsla(0, 0%, 0%, 0.8);
+  
+    --color-form-bg:                      hsla(0, 0%, 100%, 0);
+    --color-text:                         hsla(0, 0%, 0%, 1);
+  
+    --color-selected-bg:                  hsla(196, 35%, 94%, 1);
+    --color-selected-bg--hover:           hsl(198, 36%, 91%, 1);
+  
+    --color-bg-00:                        hsla(0, 0%, 100%, 1);
+    --color-bg-50:                        hsla(0, 0%, 97%, 1);
+    --color-bg-100:                       hsla(0, 0%, 93%, 1);
+    --color-bg-150:                       hsla(0, 0%, 87%, 1);
+    --color-bg-200:                       hsla(0, 0%, 63%, 1);
+  
+    --color-bg-800:                       hsla(0, 0%, 17%, 1);
+  
+  
+    --color-accessible-primary:           hsla(241, 100%, 50%, 1);
+  
+    [class^="icon-"],
+    [class*=" icon-"],
+    [class^="big-icon--"],
+    [class*=" big-icon--"] {
+      color:                              hsla(0, 0%, 0%, 1);
+    }
+  
+    .sd-checkbox--button-style {
+      color:                              hsla(0, 0%, 7%, 1);
+    }
+    .sd-checkbox--button-style.checked,
+    .sd-checkbox--button-style[checked="checked"] {
+      background-color:                   var(--color-accessible-primary);
+      border-color:                       var(--color-accessible-primary);
+      border-top-color:                   hsla(241, 98%, 17%, 1);
+      color:                              hsla(0, 0%, 100%, 1);
+      &:hover {
+        background-color:                 hsla(241, 98%, 20%, 1);
+        border-color:                     hsla(241, 98%, 20%, 1);
+        border-top-color:                 hsla(241, 100%, 11%, 1);
+      }
+    }
+    .sd-create-btn .circle {
+      background-color:                   var(--color-accessible-primary);
+    }
+  
+    .navbtn.navbtn--active {
+      background-color:                   hsla(0, 0%, 27%, 1);
+      color:                              $white;
+    }
+    .btn {
+      color: var(--color-accessible-text);
+      font-weight: 600;
+      font-size: 1.4rem;
+      &.btn--primary {
+        background-color:                 var(--color-accessible-primary);
+        color:                            $white;
+      }
+      &.btn--hollow {
+        background-color:                 $white;
+      }
+    }
+  
+    .sd-list-item {
+      font-size: 1.5rem;
+      .sd-list-item__slugline {
+        font-size: 1.3rem;
+      }
+      time {
+        color:                            hsla(0, 0%, 28%, 1);
+        font-weight: 400;
+      }
+    }
+    .badge {
+      font-size: 1.2rem;
+      line-height: 1.1em;
+      font-weight: 600;
+    }
+    .side-panel {
+      background-color: $white;
+      color: var(--color-accessible-text);
+      .side-panel__header {
+        background-color:               $white;
+      }
+      .side-panel__heading {
+        font-weight: 500;
+        color:                          var(--color-accessible-text);
+      }
+      p {
+        font-size: 1.6rem;
+        line-height: 1.5;
+        color:                          var(--color-accessible-text);
+      }
+      .sd-text__date-and-author {
+        font-size: 1.4rem;
+        time {
+          font-weight: 400;
+          color:                        hsla(0, 0%, 35%, 1);
+        }
+      }
+      &.side-panel--dark-ui {
+        background-color: var(--color-bg-800);
+        color: $white;
+       i[class^="icon-"] {
+          color:                        $white;
+        }
+        .side-panel__header {
+          background-color:             var(--color-bg-800);
+          color:                        $white !important;
+          i[class^="icon-"] {
+            color:                      $white !important;
+          }
+          
+        }
+      }
+    }
+  
+    .sd-input {
+      .sd-input__label {
+        font-weight: 600;
+        font-size: 1.2rem;
+      }
+      .sd-input__input,
+      .sd-input__select {
+        font-size: 1.5rem;
+      }
+      .sd-input__hint,
+      .sd-input__message {
+        font-size: 1.4rem;
+        margin: 0.8rem 0;
+      }
+      .sd-input__hint {
+        color:                          hsla(0, 0%, 27%, 1);
+      }
+    }
+  
+    .form-label {
+      font-size: 1.2rem;
+      font-weight: 500;
+      &.form-label--light {
+        color:                          hsla(0, 0%, 32%, 1);
+      }
+    }
+  
+    .navbtn {
+      color: #111;
+      [class^="icon-"], [class*=" icon-"] {
+        color: currentColor;
+      }
+    }
+  
+    .dropdown__menu-label {
+      font-size: 1.2rem;
+      color:                            hsla(0, 0%, 35%, 1);
+    }
+    .dropdown__toggle:active,
+    .dropdown.open .dropdown__toggle {
+      color: var(--color-accessible-primary);
+    }
+    .dropdown__menu li a:not(.btn),
+    .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button),
+    .dropdown__menu .dropdown__menu-item a:not(.btn), 
+    .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
+      font-size: 1.5rem;
+      font-weight: 500;
+      color:                            currentColor;
+    }
+    .dropdown__menu li a:not(.btn):hover,
+    .dropdown__menu li a:not(.btn):focus,
+    .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
+    .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus,
+    .dropdown__menu .dropdown__menu-item a:not(.btn):hover,
+    .dropdown__menu .dropdown__menu-item a:not(.btn):focus,
+    .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
+    .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus {
+      background:                       var(--color-accessible-primary);
+      color:                            $white;
+       > i[class^="icon-"] {
+        color:                          $white;
+      }
+    }
+    .dropdown.open .navbtn > i {
+      color:                            var(--color-accessible-primary);
+    }
+  
+    .sd-text__slugline,
+    p.sd-text__slugline {
+      color:                            var(--color-accessible-primary) !important;
+    }
+  
+    .toggle-box--circle .toggle-box__chevron {
+      background-color:                 hsla(0, 0%, 48%, 0.5);
+      height: 2rem;
+      width: 2rem;
+    }
+    .toggle-box__label {
+      font-size: 1.4rem;
+      color:                            var(--color-label-text);
+      font-weight: 500;
+    }
+  
+    .sd-grid-item {
+      time {
+        color:                          hsla(0, 0%, 28%, 1);
+        font-size: 1.3rem;
+        font-weight: 400;
+      }
+      .sd-grid-item__slugline {
+        font-size: 1.2rem;
+      }
+    }
+    .nav-tabs {
+      .nav-tabs__link {
+        font-size: 1.6rem;
+        font-weight: 500;
+      }
+      &--big {
+        .nav-tabs__link {
+          font-size: 2rem;
+        }
+      }
+    }
+  
+    .nav-tabs__tab--active, 
+    .nav-tabs__tab--active:hover {
+      .nav-tabs__link {
+        border-bottom-color:          var(--color-accessible-primary);
+        color:                        var(--color-accessible-text);
+      }
+    }
+  
+    .side-panel.side-panel--dark-ui {
+      .nav-tabs__tab {
+          .nav-tabs__link {
+            border-bottom-color: transparent;
+            color:                    $white;
+            opacity: 0.6;
+        }
+        &:hover {
+          .nav-tabs__link {
+            border-bottom-color:      hsla(0, 0%, 100%, 0.25);
+            opacity: 1;
+          }
+        }
+        &.nav-tabs__tab--active,
+        &.nav-tabs__tab--active:hover {
+          .nav-tabs__link {
+            border-bottom-color:      hsla(240, 100%, 65%, 1);
+            color:                    $white;
+            opacity: 1;
+          }
+        }
+      }
+  
+      .toggle-box__label {
+        color:                        $white;
+      }
+  
+      .sd-line-input .sd-line-input__label {
+        color:                        $white;
+        opacity: 0.7;
+      }
+  
+      a.text-link.text-link--white {
+        color:                        $white;
+        opacity: 0.75;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+    .badge {
+      &.badge--primary {
+        background-color: var(--color-accessible-primary);
+      }
+      &.badge--success {
+        background-color:             hsla(133, 100%, 19%, 1);
+      }
+      &.badge--warning {
+        background-color:             hsla(33, 100%, 26%, 1);
+      }
+    }
+    .sd-sidebar-menu__btn--active,
+    .sd-sidebar-menu__btn--active:hover {
+      background-color:               var(--color-accessible-primary);
+  
+    }
+}