<div class="Paper  _elevation-4" style="">
</div>
<div class="Paper {{modifier}} _elevation-{{elevationlevel}}" style="{{style}}">
	{{> @children}}
</div>
{
  "elevationlevel": 4,
  "style": null
}
  • 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.