_objects.list-ui.scss

/*
 * Copyright (c) 2018, General Electric
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

////
/// PX-LIST-UI-DESIGN
/// The UI list object creates blocky list items with a keyline separator out of a `ul` or `ol`.
/// @group px-list-ui-design
////

@import "px-defaults-design/_settings.defaults.scss";
@import "px-colors-design/_settings.colors.scss";

/// Prepend value for all generated classes
/// @group px-list-ui-design:variables:style
/// @type String [default]
/// @todo n/a
$inuit-list-ui-namespace        : $inuit-namespace !default;

/// Border width
/// @group px-list-ui-design:variables:style
/// @type Number [default]
/// @todo n/a
$inuit-list-ui-border-width     : 1px !default;

/// Border style
/// @group px-list-ui-design:variables:style
/// @type String [default]
/// @todo n/a
$inuit-list-ui-border-style     : solid !default;

/// Border color
/// @group px-list-ui-design:variables:style
/// @type Color [default]
/// @todo --px-list-ui-border-color
$inuit-list-ui-border-color     : var(--px-list-ui-border-color, $gray10) !default;

/// Interior border color
/// @group px-list-ui-design:variables:style
/// @type Color [default]
/// @todo --px-list-ui-separator-color
$inuit-list-ui-separator-color  : var(--px-list-ui-separator-color, $gray5) !default;

/// Enable list-uis with tiny padding?
/// @group px-list-ui-design:variables:flag
/// @type Boolean [default]
$inuit-enable-list-ui--tiny     : false !default;

/// Enable list-uis with small padding?
/// @group px-list-ui-design:variables:flag
/// @type Boolean [default]
$inuit-enable-list-ui--small    : false !default;

/// Enable list-uis with large padding?
/// @group px-list-ui-design:variables:flag
/// @type Boolean [default]
$inuit-enable-list-ui--large    : false !default;

/// Enable list-uis with huge padding?
/// @group px-list-ui-design:variables:flag
/// @type Boolean [default]
$inuit-enable-list-ui--huge     : false !default;

/// Default list-ui and list-ui__item
.#{$inuit-list-ui-namespace}list-ui,
%#{$inuit-list-ui-namespace}list-ui {
  margin:  0;
  padding: 0;
  list-style: none;
}
.#{$inuit-list-ui-namespace}list-ui__item,
%#{$inuit-list-ui-namespace}list-ui__item {
    padding: $inuit-base-spacing-unit;
    border-bottom: $inuit-list-ui-border-width $inuit-list-ui-border-style $inuit-list-ui-separator-color;

    &:first-of-type {
      border-top: $inuit-list-ui-border-width $inuit-list-ui-border-style $inuit-list-ui-border-color;
    }
    &:last-of-type {
      border-bottom: $inuit-list-ui-border-width $inuit-list-ui-border-style $inuit-list-ui-border-color;
    }
}


/// Tiny list-ui
@if ($inuit-enable-list-ui--tiny == true) {
  .#{$inuit-list-ui-namespace}list-ui--tiny,
  %#{$inuit-list-ui-namespace}list-ui--tiny {
      > .#{$inuit-list-ui-namespace}list-ui__item,
      > %#{$inuit-list-ui-namespace}list-ui__item {
          padding: $inuit-base-spacing-unit--tiny;
      }
  }
}

/// Small list-ui
@if ($inuit-enable-list-ui--small == true) {
  .#{$inuit-list-ui-namespace}list-ui--small,
  %#{$inuit-list-ui-namespace}list-ui--small {
      > .#{$inuit-list-ui-namespace}list-ui__item,
      > %#{$inuit-list-ui-namespace}list-ui__item {
          padding: $inuit-base-spacing-unit--small;
      }
  }
}

/// Large list-ui
@if ($inuit-enable-list-ui--large == true) {
  .#{$inuit-list-ui-namespace}list-ui--large,
  %#{$inuit-list-ui-namespace}list-ui--large {
      > .#{$inuit-list-ui-namespace}list-ui__item,
      > %#{$inuit-list-ui-namespace}list-ui__item {
          padding: $inuit-base-spacing-unit--large;
      }
  }
}

/// Huge list-ui
@if ($inuit-enable-list-ui--huge == true) {
  .#{$inuit-list-ui-namespace}list-ui--huge,
  %#{$inuit-list-ui-namespace}list-ui--huge {
      > .#{$inuit-list-ui-namespace}list-ui__item,
      > %#{$inuit-list-ui-namespace}list-ui__item {
          padding: $inuit-base-spacing-unit--huge;
      }
  }
}