@progressiveui/styles 10.30.0

package/scss/components/treeview/_treeview.scss

@@ -0,0 +1,177 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use "../../config" as *;
+@use "../../motion" as *;
+@use "../../spacing" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../utilities/convert" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/skeleton" as *;
+
+/// Treeview styles
+/// @access public
+/// @group treeview
+@mixin treeview {
+  .#{$prefix}--tree {
+    overflow: hidden;
+
+    .#{$prefix}--tree-node {
+      padding-left: $spacing-05;
+      background-color: $ui-01;
+      color: $text-02;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .#{$prefix}--tree-node:focus > .#{$prefix}--tree-node__label {
+      @include focus-outline("outline");
+    }
+
+    .#{$prefix}--tree-node--disabled:focus > .#{$prefix}--tree-node__label {
+      outline: none;
+    }
+
+    .#{$prefix}--tree-node--disabled,
+    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover,
+    .#{$prefix}--tree-node--disabled
+      .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-node__label__details {
+      background-color: $disabled-01;
+      color: $disabled-02;
+    }
+
+    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon,
+    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__icon,
+    .#{$prefix}--tree-node--disabled
+      .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-parent-node__toggle-icon,
+    .#{$prefix}--tree-node--disabled
+      .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-node__icon {
+      fill: $disabled-02;
+    }
+
+    .#{$prefix}--tree-node--disabled,
+    .#{$prefix}--tree-node--disabled
+      .#{$prefix}--tree-parent-node__toggle-icon:hover {
+      cursor: not-allowed;
+    }
+
+    .#{$prefix}--tree-node__label {
+      @include type-style("body-short");
+
+      display: flex;
+      min-height: calcRem(32px);
+      flex: 1;
+      align-items: center;
+
+      &:hover {
+        background-color: $hover-ui;
+        color: $text-01;
+      }
+    }
+
+    .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
+      color: $text-01;
+    }
+
+    .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-parent-node__toggle-icon,
+    .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon {
+      fill: $icon-01;
+    }
+
+    .#{$prefix}--tree-leaf-node {
+      display: flex;
+      padding-left: $spacing-08;
+    }
+
+    .#{$prefix}--tree-leaf-node.#{$prefix}--tree-node--with-icon {
+      padding-left: $spacing-07;
+    }
+
+    .#{$prefix}--tree-node__label__details {
+      display: flex;
+      align-items: center;
+    }
+
+    .#{$prefix}--tree-node--with-icon .#{$prefix}--tree-parent-node__toggle {
+      margin-right: 0;
+    }
+
+    .#{$prefix}--tree-parent-node__toggle {
+      padding: 0;
+      border: 0;
+      margin-right: $spacing-03;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .#{$prefix}--tree-parent-node__toggle-icon {
+      fill: $icon-02;
+      transform: rotate(-90deg);
+      transition: all $duration-fast-02 motion(standard, productive);
+    }
+
+    .#{$prefix}--tree-parent-node__toggle-icon--expanded {
+      transform: rotate(0);
+    }
+
+    .#{$prefix}--tree-node__icon {
+      min-width: 1rem;
+      min-height: 1rem;
+      margin-right: $spacing-03;
+      fill: $icon-02;
+    }
+
+    .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label {
+      background-color: $selected-ui;
+      color: $text-01;
+
+      &:hover {
+        background-color: $hover-selected-ui;
+      }
+    }
+
+    .#{$prefix}--tree-node--selected
+      > .#{$prefix}--tree-node__label
+      .#{$prefix}--tree-parent-node__toggle-icon,
+    .#{$prefix}--tree-node--selected
+      > .#{$prefix}--tree-node__label
+      .#{$prefix}--tree-node__icon {
+      fill: $icon-01;
+    }
+
+    .#{$prefix}--tree-node--active > .#{$prefix}--tree-node__label {
+      position: relative;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: calcRem(4px);
+        height: 100%;
+        background-color: $action-default-fill-primary-default-04;
+        content: "";
+      }
+    }
+  }
+
+  .#{$prefix}--tree--compact .#{$prefix}--tree-node__label {
+    min-height: calcRem(24px);
+  }
+}

package/scss/components/ui-shell/_functions.scss

@@ -0,0 +1,19 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Value
+/// @access private
+/// @group ui-shell
+$unit: 0.5rem;
+
+/// Get a `rem` value based for a number of mini-units.
+/// @param {Number} $count
+/// @returns {Number} In rem
+/// @group ui-shell
+@function mini-units($count) {
+  @return $unit * $count;
+}

package/scss/components/ui-shell/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'ui-shell';
+@use 'ui-shell';
+
+@include ui-shell.ui-shell;

package/scss/components/ui-shell/_mixins.scss

@@ -0,0 +1,56 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../../config' as *;
+
+/// Helper to add in text overflow styles to a particular node. Useful if we
+/// don't want to have display-inline: block from the text helper classes
+/// @access private
+/// @group ui-shell
+/// @example
+///   .my-custom-selector {
+///     @include text-overflow();
+///   }
+@mixin text-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/// Helper for handling selectors for the expansion state of the side-nav.
+/// This helper makes it easier to write code for children that need to respond
+/// to whether the side-nav is open, or closed. For convenience, we also
+/// optionally set properties for opacity and visibility to help with the
+/// transition animation.
+/// @access private
+/// @group ui-shell
+/// @param {Bool} $opacity [false]
+/// @param {Bool} $visibility [false]
+/// @content
+@mixin expanded($opacity: false, $visibility: false) {
+  @if $opacity == true {
+    opacity: 0;
+  }
+
+  @if $visibility == true {
+    visibility: hidden;
+  }
+
+  .#{$prefix}--side-nav:hover &,
+  // Include the fixed variant here so components can render in both expandable
+  // and fixed side navs
+  .#{$prefix}--side-nav--fixed &,
+  .#{$prefix}--side-nav--expanded & {
+    @if $visibility == true {
+      visibility: inherit;
+    }
+    @if $opacity == true {
+      opacity: 1;
+    }
+    @content;
+  }
+}

package/scss/components/ui-shell/_ui-shell.scss

@@ -0,0 +1,23 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'content';
+@use 'header';
+@use 'header-panel';
+@use 'side-nav';
+@use 'switcher';
+
+/// UI shell content
+/// @access private
+/// @group ui-shell
+@mixin ui-shell {
+  @include content.content;
+  @include header.header;
+  @include header-panel.header-panel;
+  @include side-nav.side-nav;
+  @include switcher.switcher;
+}

package/scss/components/ui-shell/content/_content.scss

@@ -0,0 +1,34 @@
+//
+// Copyright IBM Corp. 2016, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use "../functions" as *;
+@use "../../../config" as *;
+@use "../../../theme" as *;
+
+/// UI shell content
+/// @access private
+/// @group ui-shell
+@mixin content {
+  .#{$prefix}--content {
+    padding: 2rem;
+    background: $layer-primary;
+    color: $text-body-default;
+    will-change: margin-left;
+  }
+
+  .#{$prefix}--header ~ .#{$prefix}--content {
+    margin-top: mini-units(6);
+  }
+
+  .#{$prefix}--side-nav ~ .#{$prefix}--content {
+    margin-left: mini-units(6);
+  }
+
+  .#{$prefix}--side-nav.#{$prefix}--side-nav--expanded ~ .#{$prefix}--content {
+    margin-left: mini-units(32);
+  }
+}

package/scss/components/ui-shell/content/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'content';
+@use 'content';
+
+@include content.content;