600 West

Paper 

<!-- Default -->
<div class="Paper  _elevation-1" style="">
</div>


<!-- Elevation 2 -->
<div class="Paper  _elevation-2" style="">
</div>


<!-- Elevation 3 -->
<div class="Paper  _elevation-3" style="">
</div>


<!-- Elevation 4 -->
<div class="Paper  _elevation-4" style="">
</div>


<!-- Elevation 5 -->
<div class="Paper  _elevation-5" style="">
</div>


<!-- Interactive -->
<div class="Paper Paper--interactive _elevation-1" style="">
</div>


<div class="Paper {{modifier}} _elevation-{{elevationlevel}}" style="{{style}}">
	{{> @children}}
</div>
 
/* Default */
{
  "elevationlevel": 1,
  "style": null
}


/* Elevation 2 */
{
  "elevationlevel": 2,
  "style": null
}


/* Elevation 3 */
{
  "elevationlevel": 3,
  "style": null
}


/* Elevation 4 */
{
  "elevationlevel": 4,
  "style": null
}


/* Elevation 5 */
{
  "elevationlevel": 5,
  "style": null
}


/* Interactive */
{
  "elevationlevel": 1,
  "style": null,
  "modifier": "Paper--interactive"
}
  • Content: 
    .Paper {
    display: block;
    transition: transform $transition-time-default $transition-move-default;
    &._elevation-0 {
        border: 1px solid get-color(neutral, 300);
    }
    &._elevation-1 {
        @include BoxShadow($level: "Card");
    }
    &._elevation-2 {
        @include BoxShadow($level: "Navbar");
    }
    &._elevation-3 {
        @include BoxShadow($level: "Navbar-submenu");
    }
    &._elevation-4 {
        @include BoxShadow($level: "Sidebar");
    }
    &._elevation-5 {
        @include BoxShadow($level: "Modal");
    }
}
a.Paper,
.Paper--interactive {
    color: theme-color(text);
}
a.Paper:active,
a.Paper:hover,
a.Paper:focus,
.Paper--interactive:active,
.Paper--interactive:hover,
.Paper--interactive:focus {
    text-decoration: none;
    &._elevation-1 {
        @include Elevate("Navbar");
    }
    &._elevation-2 {
        @include Elevate("Navbar-submenu");
    }
    &._elevation-3 {
        @include Elevate("Sidebar");
    }
    &._elevation-4 {
        @include Elevate("Modal");
    }
}
.Paper--rounded {
    border-radius: $Border-radius--500;
}
  • URL: /components/raw/paper/Paper.scss
  • Filesystem Path: components/molecules/Paper/Paper.scss
  • Size: 1.1 KB

There are no notes for this item.