material-design-kit/dist/material-design-kit.css

Interactive web components inspired from Material Design, using vanilla CSS, JavaScript and HTML.

.mdk-header {
  position: relative;
  z-index: 1;
  height: 200px; }[dir] .mdk-header {
  margin-bottom: 1.25rem; }
  [dir] .mdk-header :last-child {
    margin-bottom: 0; }
  .mdk-header [data-fx-condenses] {
    opacity: 0; }
  [dir=ltr] .mdk-header [data-fx-condenses] {
  transform-origin: left top; }
  [dir=rtl] .mdk-header [data-fx-condenses] {
    transform-origin: right top; }
    .mdk-header [data-fx-condenses][data-fx-id] {
      opacity: 1; }
  .mdk-header [data-primary] {
    z-index: 1; }

.mdk-header__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden; }

[dir=ltr] .mdk-header__bg {
  right: 0;
  left: 0; }

[dir=rtl] .mdk-header__bg {
  left: 0;
  right: 0; }

[data-effects*="parallax-background"] .mdk-header__bg {
  visibility: hidden; }

.mdk-header__bg-rear,
.mdk-header__bg-front {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none; }

[dir] .mdk-header__bg-rear, [dir] .mdk-header__bg-front {
  background-size: cover; }

[dir=ltr] .mdk-header__bg-rear, [dir=ltr] .mdk-header__bg-front {
  right: 0;
  left: 0; }

[dir=rtl] .mdk-header__bg-rear, [dir=rtl] .mdk-header__bg-front {
  left: 0;
  right: 0; }

.mdk-header__bg-rear {
  opacity: 0; }

.mdk-header__content {
  position: relative;
  width: 100%;
  height: 100%; }

.mdk-header[data-condenses] .mdk-header__content {
  z-index: 0; }

.mdk-header[data-condenses] [data-primary] {
  z-index: 1; }

.mdk-header--shadow {
  transition: 0.25s box-shadow; }

.mdk-header--shadow::after {
  position: absolute;
  bottom: -5px;
  width: 100%;
  height: 5px;
  content: "";
  pointer-events: none;
  opacity: 0;
  z-index: -1; }

[dir] .mdk-header--shadow::after {
  box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4); }

[dir=ltr] .mdk-header--shadow::after {
  right: 0;
  left: 0; }

[dir=rtl] .mdk-header--shadow::after {
  left: 0;
  right: 0; }

.mdk-header--shadow-show::after {
  opacity: 1; }

.mdk-header--fixed {
  position: fixed;
  top: 0;
  width: 100%; }

[dir] .mdk-header--fixed {
  margin-bottom: 0; }

[dir=ltr] .mdk-header--fixed {
  left: 0; }

[dir=rtl] .mdk-header--fixed {
  right: 0; }

.mdk-header[data-reveals] [data-primary] {
  transition: 0.25s transform; }
  .mdk-header[data-reveals] [data-primary].mdk-header--shadow {
    transition: 0.25s box-shadow, transform; }

.mdk-header[disabled], .mdk-header[disabled]::after,
.mdk-header[disabled] .mdk-header__bg-rear,
.mdk-header[disabled] .mdk-header__bg-front,
.mdk-header[disabled] .mdk-header__content > [data-primary] {
  transition: none !important; }

.mdk-header-layout {
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 0; }
  .mdk-header-layout--fullbleed {
    position: absolute;
    top: 0;
    bottom: 0; }
  [dir=ltr] .mdk-header-layout--fullbleed {
  left: 0;
  right: 0; }
  [dir=rtl] .mdk-header-layout--fullbleed {
    right: 0;
    left: 0; }
  .mdk-header-layout > .mdk-header {
    position: fixed;
    top: 0;
    z-index: 1; }
  [dir=ltr] .mdk-header-layout > .mdk-header {
  left: 0;
  right: 0; }
  [dir=rtl] .mdk-header-layout > .mdk-header {
    right: 0;
    left: 0; }
  .mdk-header-layout[data-fullbleed] > .mdk-header, .mdk-header-layout[data-has-scrolling-region] > .mdk-header {
    position: absolute;
    top: 0; }
  [dir=ltr] .mdk-header-layout[data-fullbleed] > .mdk-header, [dir=ltr] .mdk-header-layout[data-has-scrolling-region] > .mdk-header {
  left: 0;
  right: 0; }
  [dir=rtl] .mdk-header-layout[data-fullbleed] > .mdk-header, [dir=rtl] .mdk-header-layout[data-has-scrolling-region] > .mdk-header {
    right: 0;
    left: 0; }

.mdk-header-layout__content {
  position: relative;
  z-index: 0; }
  .mdk-header-layout__content--fullbleed {
    position: absolute;
    top: 0;
    bottom: 0; }
  [dir=ltr] .mdk-header-layout__content--fullbleed {
  left: 0;
  right: 0; }
  [dir=rtl] .mdk-header-layout__content--fullbleed {
    right: 0;
    left: 0; }
  .mdk-header-layout__content--scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; }

.mdk-box {
  position: relative; }

[dir] .mdk-box {
  margin-bottom: 1.25rem; }

.mdk-box__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  height: 100%; }

[dir=ltr] .mdk-box__bg {
  right: 0;
  left: 0; }

[dir=rtl] .mdk-box__bg {
  left: 0;
  right: 0; }

[data-effects*="parallax-background"] .mdk-box__bg {
  visibility: hidden; }

.mdk-box__bg-rear,
.mdk-box__bg-front {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none; }

[dir] .mdk-box__bg-rear, [dir] .mdk-box__bg-front {
  background-size: cover; }

[dir=ltr] .mdk-box__bg-rear, [dir=ltr] .mdk-box__bg-front {
  right: 0;
  left: 0; }

[dir=rtl] .mdk-box__bg-rear, [dir=rtl] .mdk-box__bg-front {
  left: 0;
  right: 0; }

.mdk-box__bg-rear {
  opacity: 0; }

.mdk-box__content {
  position: relative;
  width: 100%;
  height: 100%; }

.mdk-box[disabled], .mdk-box[disabled]::after,
.mdk-box[disabled] .mdk-box__bg-rear,
.mdk-box[disabled] .mdk-box__bg-front,
.mdk-box[disabled] .mdk-box__content > [data-primary] {
  transition: none !important; }

[dir] .mdk-drawer {
  position: relative;
  visibility: hidden; }
  [dir] .mdk-drawer[data-opened], [dir] .mdk-drawer[data-closing] {
    visibility: visible; }
  [dir] .mdk-drawer[data-persistent] {
    width: 256px; }
    [dir] .mdk-drawer[data-persistent][data-position=left] {
      right: auto; }
    [dir] .mdk-drawer[data-persistent][data-position=right] {
      left: auto; }

[dir] .mdk-drawer__content {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 256px;
  transition: transform 0.2s ease;
  background-color: #fff;
  left: 0;
  transform: translate3d(-100%, 0, 0); }

[dir] [data-position=right] > .mdk-drawer__content {
  right: 0;
  left: auto;
  transform: translate3d(100%, 0, 0); }

[dir] [data-opened] > .mdk-drawer__content {
  transform: translate3d(0, 0, 0); }

[dir] .mdk-drawer__scrim {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: opacity 0.2s ease;
  transform: translateZ(0);
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5); }

[dir] [data-opened] > .mdk-drawer__scrim {
  opacity: 1; }

[dir] [data-persistent] > .mdk-drawer__scrim {
  visibility: hidden;
  opacity: 0; }

.mdk-drawer-layout {
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex; }
  .mdk-drawer-layout--fullbleed {
    position: absolute;
    top: 0;
    bottom: 0; }
  [dir=ltr] .mdk-drawer-layout--fullbleed {
  left: 0;
  right: 0; }
  [dir=rtl] .mdk-drawer-layout--fullbleed {
    right: 0;
    left: 0; }
  .mdk-drawer-layout .mdk-drawer {
    position: relative; }
    .mdk-drawer-layout .mdk-drawer[data-persistent] {
      width: 256px; }
      .mdk-drawer-layout .mdk-drawer[data-persistent][data-position=left] {
        order: 0; }
      .mdk-drawer-layout .mdk-drawer[data-persistent][data-position=right] {
        order: 2; }

.mdk-drawer-layout__content {
  position: relative;
  height: 100%;
  transition: transform 0.2s;
  min-width: 320px;
  z-index: 0;
  order: 1;
  flex: 1 1 0%; }
  .mdk-drawer-layout__content--scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; }

[dir=rtl] .mdk-drawer-layout .mdk-drawer[data-persistent][data-position=left] {
  order: 2; }

[dir=rtl] .mdk-drawer-layout .mdk-drawer[data-persistent][data-position=right] {
  order: 0; }

.mdk-reveal {
  z-index: 0;
  position: relative;
  overflow: hidden;
  display: block; }
  .mdk-reveal[data-opened] .mdk-reveal__partial, .mdk-reveal--hover:hover .mdk-reveal__partial {
    opacity: 0; }

.mdk-reveal__content {
  transition: transform .2s;
  position: relative;
  z-index: 0; }

[dir] .mdk-reveal__content {
  background-color: #ffffff; }

.mdk-reveal__partial {
  position: absolute;
  top: 0;
  width: 100%;
  content: '';
  opacity: 1;
  z-index: 1;
  transition: .2s opacity;
  pointer-events: none; }

[dir] .mdk-reveal__partial {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.95) 80%, white 100%); }

[dir=ltr] .mdk-reveal__partial {
  left: 0; }

[dir=rtl] .mdk-reveal__partial {
  right: 0; }

.mdk-carousel__content {
  transition: transform .4s;
  touch-action: pan-x; }

[dir] .mdk-carousel__content {
  transform: translate3d(0, 0, 0); }

.mdk-carousel__item {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
  width: 100%; }

[dir] .mdk-carousel__item {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab; }

[dir=ltr] .mdk-carousel__item {
  float: left; }

[dir=rtl] .mdk-carousel__item {
  float: right; }

.mdk-tooltip {
  transition: transform .2s;
  will-change: transform;
  display: inline-block;
  color: #fff;
  font-size: 13px;
  z-index: 999;
  font-weight: 500;
  position: fixed;
  line-height: 1;
  max-width: 200px;
  pointer-events: none; }

[dir] .mdk-tooltip {
  transform: scale(0);
  transform-origin: top center;
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  padding: .4rem;
  border-radius: .25rem; }
  [dir] .mdk-tooltip[data-opened] {
    transform: scale(1); }