@iamproperty/components 4.0.0 → 4.1.0-beta

package/assets/sass/_corefiles.scss

@@ -20,7 +20,6 @@
 @use "components/admin-panel.scss";
 @use "components/dialog.scss";
 
-@use "components/nav-global.scss";
 @use "components/pagination.scss";
 @use "components/accordion.scss";
 

package/assets/sass/_func.scss

@@ -1,5 +1,6 @@
 $compatible: 'false'!default;
 $mobileOnly: 'false'!default;
+$darkMode: 'true'!default;
 
 // Declare global vars variable
 $vars: ()!default;

package/assets/sass/_functions/mixins.scss

@@ -18,6 +18,28 @@
   }
 }
 
+@mixin dark-mode(){
+  @media screen and (prefers-color-scheme: dark) {
+    @if $darkMode == "true" {
+        
+      @content;
+    }
+  }
+}
+
+@mixin light-mode(){
+
+  @if $darkMode == "true" {
+    @media screen and (prefers-color-scheme: light) {
+    
+      @content;
+    }
+  }
+  @else {
+    @content;
+  }
+}
+
 @mixin container-up($name) {
   
   @if $name == 'sm' {

package/assets/sass/components/actionbar-global.scss

@@ -7,6 +7,34 @@ iam-actionbar {
   display: block;
   border-top-left-radius: rem(10);
   border-top-right-radius: rem(10);
+
+}
+// #endregion
+
+// #region at the top
+main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
+
+  background-color: #e6eaec;
+  border-radius: rem(8);
+  margin: var(--container-padding);
+  margin-bottom: 2rem;
+  box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
+
+  &:first-child {
+      
+    padding-top: 0;
+  }
+
+  @include media-breakpoint-up(sm) {
+    box-shadow: none;
+    margin-inline: 0;
+    border-radius: 0;
+  }
+
+  @include media-breakpoint-up(md) {
+
+    padding-inline: calc(50% - #{rem(556)} - 2rem);
+  }
 }
 // #endregion
 
@@ -17,24 +45,50 @@ iam-table iam-actionbar {
   margin-right: 1.5rem;
 }
 
+.actionbar__sticky-wrapper {
+  
+  container-type: inline-size;
+
+  @include media-breakpoint-up(sm) {
+
+    padding: 0!important;
+  }
+}
+
 @container (width < 23.4375em) {
 
-  iam-table iam-actionbar {
+  :is(iam-table, .actionbar__sticky-wrapper) > .actionbar__sticky {
 
     display: block;
     position: sticky;
     left: 0;
-    top: calc(var(--nav-height) + #{rem(24)});
+    top: calc(var(--sticky-padding) + #{rem(16)});
+    z-index: var(--index-menu);
+    pointer-events: none;
+
+    &:after {
+      content: "";
+      display: block;
+      width: 100%;
+      height: calc(100vh - #{rem(68 + 24 + 16)});
+      pointer-events: none;
+    }
+
+    & + * {
+      margin-top: calc(-100vh - -6.75rem);
+    }
+  }
+
+  :is(iam-table, .actionbar__sticky) > iam-actionbar {
+
+    pointer-events: all!important;
+    display: block;
     border: none;
     background: var(--colour-canvas-2);
-    
     box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
     border-radius: 0.5rem;
     margin-bottom: rem(24);
-
-    z-index: var(--index-menu);
   }  
-  
 }
 
 @include media-breakpoint-up(sm) {
@@ -66,6 +120,7 @@ iam-actionbar[data-view="small"] ~ [data-view="small"] {
 // #endregion 
 
 // #region Child elements
+
 .actionbar__text {
 
   font-size: rem(18);
@@ -81,9 +136,16 @@ iam-actionbar[data-view="small"] ~ [data-view="small"] {
   background: none;
   border: none;
 }
+button[slot="overflow"],
+button[slot="selected-overflow"] {
+  
+  background: none;
+  border: none;
+  margin: 0!important;
+}
 .dialog__wrapper[slot="selected-overflow"] dialog[open],
 .dialog__wrapper[slot="overflow"] dialog[open] {
 
   display: contents;
 }
-// #endregion
+// #endregion

package/assets/sass/components/actionbar.scss

@@ -75,7 +75,13 @@
 
 .actionbar--selected {
 
-  background-color: #E6EAEC;
+  background-color: var(--colour-canvas);
+
+  @include light-mode {
+    
+    background-color: #E6EAEC;
+  }
+
   display: flex;
   opacity: 0;
   pointer-events: none;
@@ -83,7 +89,12 @@
 
 .actionbar--search {
 
-  background-color: #E6EAEC;
+  background-color: var(--colour-canvas);
+  
+  @include light-mode {
+
+    background-color: #E6EAEC;
+  }
   display: flex;
   z-index: 2;
   position: relative;
@@ -205,11 +216,6 @@
   }
 }
 
-::slotted(.dialog__wrapper[slot="overflow"]) dialog[open]{
-
-  background: red;
-}
-
 .dialog__wrapper.dialog-overflow {
   margin-left: 0.5rem;
   margin-right: -0.5rem;

package/assets/sass/components/admin-panel.scss

@@ -12,7 +12,7 @@
   margin-bottom: rem(24);
   outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
-  @media screen and (prefers-color-scheme: dark) {
+  @include dark-mode() {
     
     background-color: var(--colour-canvas-2);
     color: var(--colour-body);
@@ -161,4 +161,49 @@
     pointer-events: none;
   }
 }
-// #endregion
+// #endregion
+
+// #region Has actionbar
+.admin-panel:has(iam-actionbar) {
+
+  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child {
+    margin-bottom: 0;
+  }
+
+  iam-actionbar {
+    
+    background: var(--colour-canvas);
+    
+    @include light-mode {
+        
+      background: #eeeeee;
+    }
+      
+    margin-inline: calc(var(--padding-x) * -1);
+    margin-bottom: var(--padding-top);
+
+    &:first-child {
+      margin-top: calc(var(--padding-top) * -1);
+    }
+    &:not(:first-child){
+      
+      border-radius: 0;
+    }
+  }
+
+  > iam-table {
+    overflow: visible;
+    
+    &:first-child {
+      margin-top: calc(var(--padding-top) * -1);
+    }
+
+    iam-actionbar {
+      
+      margin-top: 0!important;
+      border-radius: 0;
+      box-shadow: none;
+    }
+  } 
+}
+// #endregion

package/assets/sass/components/card-global.scss

@@ -1,3 +1,5 @@
+@use "../_func.scss" as *;
+
 // #region card with a flag 
 iam-card.card--flag {
   position: relative;
@@ -17,4 +19,47 @@ iam-card.card--flag {
     color: var(--colour, var(--colour-primary));
   }
 }
-// #endregion
+// #endregion
+
+// #region cards with an added checkbox for actionbars
+
+iam-card {
+
+
+  > div:has([type="checkbox"]) {
+    display: contents;
+
+    > input:is([type=radio], [type=checkbox]) + label {
+        
+      position: absolute!important;
+      top: 0;
+      right: 0;
+      width: rem(32);
+      padding-left: rem(32);
+      margin: rem(4) rem(8)!important;
+      height: rem(40);
+      overflow: hidden;
+    }
+  }
+}
+
+[data-select-container]:has([type="checkbox"]:checked) iam-card {
+
+  > div:has([type="checkbox"]) {
+
+    > input:is([type=radio], [type=checkbox]) {
+      width: 100%;
+      height: 100%;
+      max-height: 100%;
+      max-width: 100%;
+      cursor: pointer;
+      pointer-events: all;
+      inset: 0;
+      border-radius: 0;
+      z-index: 10;
+    }
+  }
+}
+
+
+// #endregion

package/assets/sass/components/card.scss

@@ -175,19 +175,12 @@
     }
   }
 
-  &:is(:active, .active){
-    
-    .card__body {
-      background: #E0E0E0;
-    }
-  }
-
-  &:is(:checked, .checked){
-    outline: 2px solid var(--colour,var(--colour-info));
+  &:is(:checked, .checked,:active, .active){
+    outline: 2px solid var(--colour,var(--colour-primary));
     outline-offset: -2px;
 
     .card__body {
-      background: #E0E0E0;
+      background: none;
     }
   }
 
@@ -211,7 +204,7 @@
   }
 }
 
-@media screen and (prefers-color-scheme: dark) {
+@include dark-mode() {
   .card--filter {
 
     .card__body {
@@ -221,7 +214,6 @@
     &:is(:hover,:focus,.hover, :active, .active):not(:checked,.checked){ 
       outline: 2px solid var(--colour, var(--colour-primary))!important;
       outline-offset: -2px;
-
     }
   }
 }
@@ -276,3 +268,13 @@
   }
 }
 //#endregion
+
+
+:host([data-selected]) .card {
+  //background-color: yellow!important;
+
+  &:before,
+  &:after {
+    display: none!important;
+  }
+}

package/assets/sass/components/charts.scss

@@ -22,7 +22,7 @@ $chart-colors: map-merge((
   }
 }
 
-@media screen and (prefers-color-scheme: dark) {
+@include dark-mode() {
 
   :root {
     --colour-chart-1: var(--colour-dark);

package/assets/sass/components/collapsible-side.scss

@@ -4,7 +4,7 @@
   --colour-border: #e9e9e9;
   --side-link-hover: var(--colour-canvas-2);
 
-  @media screen and (prefers-color-scheme: light) {
+  @include light-mode() {
             
     --side-link-hover: #eeeeee;
   }

package/assets/sass/components/dialog.scss

@@ -374,7 +374,7 @@ dialog::backdrop {
       }
     }
 
-    @media screen and (prefers-color-scheme: dark) {
+    @include dark-mode() {
 
       button {
         
@@ -561,36 +561,19 @@ dialog::backdrop {
       width: rem(360);
     }
 
-
     &.dialog--list {
       
       width: fit-content!important;
+
+      @include media-breakpoint-up(sm) {
+        width: max-content!important;
+      }
+
       min-width: rem(140)!important;
       max-width: rem(280)!important;
       padding: rem(16);
       margin: 0;
 
-      .btn-action {
-        border: none;
-        padding: 0;
-        margin: 0;
-        padding-block: rem(6);
-        line-height: rem(20);
-        background: none;
-        white-space: inherit;
-        max-width: 100%;
-        min-width: 100%;
-
-        &:before {
-          min-width: rem(20);
-          display: inline-block;
-        }
-
-        &::after {
-          float: right;
-        }
-      }
-
       hr {
         height: 2px;
         background: var(--colour-border);

package/assets/sass/components/fileupload.scss

@@ -53,7 +53,7 @@
 
 
     
-    @media screen and (prefers-color-scheme: dark) {
+    @include dark-mode() {
 
       background: var(--colour-canvas-2);
       border-color: var(--colour-canvas-2);

package/assets/sass/components/nav-global.scss

@@ -10,11 +10,17 @@ body:has(iam-nav.open:not(.nav--sticky):not(.nav--xs-sticky)) {
 body {
   
   --nav-height: #{rem(96)};
+  --sticky-padding: 0px;
 
   &:has(iam-nav a[slot="secondary"]){
     
     --nav-height: #{rem(96 + 40)};
   }
+
+  &:has(iam-nav.nav--sticky) {
+    
+    --sticky-padding: var(--nav-height);
+  }
 }
 
 // #region Create the correct padding top of the page
@@ -110,7 +116,7 @@ iam-nav {
     text-decoration: none;
   }
 
-  a:not([slot="logo"]):not(:has(iam-card)) {
+  a:not([slot="logo"]):not(.btn):not(:has(iam-card)) {
     
     text-decoration: none;
 
@@ -165,7 +171,7 @@ iam-nav details {
 
     background-color: var(--colour-canvas);
     
-    @media screen and (prefers-color-scheme: light) {
+    @include light-mode() {
       background-color: #EEEEEE;
     }
 
@@ -180,9 +186,9 @@ iam-nav details {
       background-color: var(--colour-white);
 
             
-      @media screen and (prefers-color-scheme: dark) {
+      @include dark-mode() {
         
-      background-color: var(--colour-canvas-2);
+        background-color: var(--colour-canvas-2);
       }
       display:block;
       border: none;
@@ -378,11 +384,11 @@ iam-nav details {
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
 
       
-      @media screen and (prefers-color-scheme: light) {
+      @include light-mode() {
         background: var(--colour-white);
         @include reset-colours();
       }
-      @media screen and (prefers-color-scheme: dark) {
+      @include dark-mode() {
 
         @include invert-colours();
       }
@@ -393,7 +399,7 @@ iam-nav details {
       
       background: var(--colour-canvas-2);
       
-      @media screen and (prefers-color-scheme: light) {
+      @include light-mode() {
         background: #EEEEEE;
       }
       a {
@@ -426,7 +432,7 @@ iam-nav details {
     &[open] > div:not(:has(details)) {
       background: var(--colour-canvas);
 
-      @media screen and (prefers-color-scheme: light) {
+      @include light-mode() {
         background: var(--colour-white);
         --colour-canvas-2: white;
       }
@@ -489,7 +495,7 @@ iam-nav details {
       }
     }
 
-    a:not([slot="logo"]):not(:has(iam-card)) {
+    a:not([slot="logo"]):not(.btn):not(:has(iam-card)) {
 
       font-size: 1rem;
       line-height: rem(24);

package/assets/sass/components/nav.scss

@@ -98,7 +98,7 @@
     }
 
     .btn {
-      @media screen and (prefers-color-scheme: light) {
+      @include light-mode() {
     
         @include reset-colours();
 
@@ -188,13 +188,13 @@
       flex-shrink: 0;
     }
 
-    @media screen and (prefers-color-scheme: dark) {
+    @include dark-mode() {
       --colour-link: var(--colour-white);
       @include invert-colours();
     }
 
     // The menu is always white unless in dark mode
-    @media screen and (prefers-color-scheme: light) {
+    @include light-mode() {
       
       background-color: var(--colour-white);
       @include reset-colours();
@@ -242,7 +242,7 @@
     flex-grow: 1;
     position: relative;
 
-    @media screen and (prefers-color-scheme: light) {
+    @include light-mode() {
       background-color: #EEEEEE;
     }
 
@@ -393,14 +393,13 @@
     left: 0;
     width: 100%;
 
-    @media screen and (prefers-color-scheme: light) {
+    @include light-mode(){
             
       background-color: #EEEEEE;
       @include reset-colours();
     }
 
-    @media screen and (prefers-color-scheme: dark) {
-            
+    @include dark-mode() {
       
       @include invert-colours();
     }
@@ -494,7 +493,7 @@
 
     background: #E6EAEC!important;
 
-    @media screen and (prefers-color-scheme: dark) {
+    @include dark-mode() {
       
       background: var(--colour-canvas-2)!important;
     }
@@ -564,13 +563,13 @@
     flex-shrink: 0;
   }
 
-  @media screen and (prefers-color-scheme: dark) {
+  @include dark-mode() {
     --colour-link: var(--colour-white);
     @include invert-colours();
   }
 
   // The menu is always white unless in dark mode
-  @media screen and (prefers-color-scheme: light) {
+  @include light-mode() {
     
     background-color: var(--colour-white);
     @include reset-colours();

package/assets/sass/components/notification.scss

@@ -90,7 +90,7 @@
   display: flex;
   flex-wrap: nowrap;
 
-  @media screen and (prefers-color-scheme: light) {
+  @include light-mode() {
     color: var(--colour-heading);
   }