Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * mdl-stepper - A Material Design Lite Stepper component polyfill.
- * @version v1.1.6
- * @author Alexandre Thebaldi <ahlechandre@gmail.com>.
- * @link https://github.com/ahlechandre/mdl-stepper
- *
- */
- /* MDL Stepper */
- /**
- * mdl-stepper - A Material Design Lite Stepper component polyfill.
- * @version v1.1.6
- * @author Alexandre Thebaldi <ahlechandre@gmail.com>.
- * @link https://github.com/ahlechandre/mdl-stepper
- *
- */
- /* STEPPER */
- /* GRID */
- /* SHADOWS */
- /**
- * mdl-stepper - A Material Design Lite Stepper component polyfill.
- * @version v1.1.6
- * @author Alexandre Thebaldi <ahlechandre@gmail.com>.
- * @link https://github.com/ahlechandre/mdl-stepper
- *
- */
- /* Animation */
- /* KEYFRAMES */
- /* DISPLAY FLEX */
- /* Shadows */
- /**
- * mdl-stepper - A Material Design Lite Stepper component polyfill.
- * @version v1.1.6
- * @author Alexandre Thebaldi <ahlechandre@gmail.com>.
- * @link https://github.com/ahlechandre/mdl-stepper
- *
- * @contributor Michael Haschke <http://michael.haschke.biz/>
- */
- /**
- * mdl-stepper - A Material Design Lite Stepper component polyfill.
- * @version v1.1.6
- * @author Alexandre Thebaldi <ahlechandre@gmail.com>.
- * @link https://github.com/ahlechandre/mdl-stepper
- *
- */
- /* STEPPER */
- /* GRID */
- /* SHADOWS */
- /**
- * mdl-stepper - A Material Design Lite Stepper component polyfill.
- * @version v1.1.6
- * @author Alexandre Thebaldi <ahlechandre@gmail.com>.
- * @link https://github.com/ahlechandre/mdl-stepper
- *
- */
- /* Animation */
- /* KEYFRAMES */
- /* DISPLAY FLEX */
- /* Shadows */
- /**
- * mdl-stepper - A Material Design Lite Stepper component polyfill.
- * @version v1.1.6
- * @author Alexandre Thebaldi <ahlechandre@gmail.com>.
- * @link https://github.com/ahlechandre/mdl-stepper
- *
- */
- @-webkit-keyframes FadeIn {
- 0% {
- opacity: 0; }
- 100% {
- opacity: 100; } }
- @-moz-keyframes FadeIn {
- 0% {
- opacity: 0; }
- 100% {
- opacity: 100; } }
- @-o-keyframes FadeIn {
- 0% {
- opacity: 0; }
- 100% {
- opacity: 100; } }
- @keyframes FadeIn {
- 0% {
- opacity: 0; }
- 100% {
- opacity: 100; } }
- @-webkit-keyframes FadeInFromBottom {
- 0% {
- height: 0;
- padding-top: 84px;
- background-color: white;
- color: white; }
- 25% {
- color: white; } }
- @-moz-keyframes FadeInFromBottom {
- 0% {
- height: 0;
- padding-top: 84px;
- background-color: white;
- color: white; }
- 25% {
- color: white; } }
- @-o-keyframes FadeInFromBottom {
- 0% {
- height: 0;
- padding-top: 84px;
- background-color: white;
- color: white; }
- 25% {
- color: white; } }
- @keyframes FadeInFromBottom {
- 0% {
- height: 0;
- padding-top: 84px;
- background-color: white;
- color: white; }
- 25% {
- color: white; } }
- /* STEPPER */
- .mdl-stepper {
- position: relative;
- font-family: "Roboto", sans-serif;
- background-color: white;
- display: block;
- box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
- padding: 24px 0;
- max-width: 720px;
- width: 100%;
- border-radius: 2px; }
- .mdl-stepper > li {
- list-style: none; }
- /* STEPPER ON SMALL SCREENS */
- @media only screen and (max-width: 375px) {
- .mdl-stepper {
- width: 100vw; }
- .mdl-grid .mdl-cell .mdl-stepper {
- margin-left: -16px; } }
- /* STEPPER VERTICAL ONLY */
- .mdl-stepper:not(.mdl-stepper--horizontal) > .mdl-step:not(:last-child):after {
- content: '';
- position: absolute;
- top: 50px;
- left: 37px;
- width: 1px;
- height: calc(100% - 24px);
- background-color: rgba(0, 0, 0, 0.1); }
- .mdl-stepper:not(.mdl-stepper--horizontal) > .mdl-step:not(:last-child).is-active:after {
- height: calc(100% - 12px); }
- .mdl-stepper:not(.mdl-stepper--horizontal) .mdl-step__label:hover, .mdl-stepper:not(.mdl-stepper--horizontal) .mdl-step__label:active, .mdl-stepper:not(.mdl-stepper--horizontal) .mdl-step__label:focus {
- background-color: rgba(0, 0, 0, 0.06); }
- /* STEP */
- .mdl-step {
- position: relative;
- height: 460px; }
- .mdl-step:not(.is-active) {
- height: initial !important; }
- .mdl-step:not(:last-child) {
- margin-bottom: 24px; }
- .mdl-step:not(:last-child).is-active {
- margin-bottom: 36px; }
- .mdl-step .mdl-step-error-message {
- display: none; }
- .mdl-step > * {
- -webkit-animation: FadeIn 0.5s ease-in-out;
- -moz-animation: FadeIn 0.5s ease-in-out;
- -ms-animation: FadeIn 0.5s ease-in-out;
- animation: FadeIn 0.5s ease-in-out; }
- /* STEP ACTIVE */
- .mdl-step.is-active .mdl-step__title {
- font-weight: bold; }
- .mdl-step.is-active .mdl-step__content {
- display: block; }
- .mdl-step.is-active .mdl-step__label-indicator {
- background-color: #2196F3;
- color: white; }
- .mdl-step.is-active .mdl-step__actions {
- -webkit-display: flex;
- -moz-display: flex;
- -ms-display: flex;
- display: flex;
- justify-content: flex-start; }
- .mdl-step.is-active .mdl-step__actions [data-stepper-next] {
- order: 1;
- margin-right: 8px; }
- .mdl-step.is-active .mdl-step__actions [data-stepper-cancel] {
- order: 2; }
- .mdl-step.is-active .mdl-step__actions [data-stepper-skip] {
- order: 3;
- margin-left: auto; }
- .mdl-step.is-active .mdl-step__actions [data-stepper-back] {
- order: 4;
- margin-left: auto; }
- /* STEP MOD COMPLETED */
- .mdl-step--completed .mdl-step__label-indicator {
- background-color: #2196F3; }
- /* STEP MOD ERROR */
- .mdl-step--error .mdl-step__title {
- color: #F44336; }
- .mdl-step--error .mdl-step-error-message {
- display: block;
- color: #F44336;
- font-weight: normal; }
- .mdl-step--error .mdl-step__label-indicator {
- background-color: #F44336 !important;
- font-weight: bold; }
- /* STEP MOD OPTIONAL */
- /* STEP MOD TRANSIENT */
- .mdl-step--transient .mdl-step__content {
- overflow: hidden !important; }
- .mdl-step__label {
- position: relative;
- -webkit-display: flex;
- -moz-display: flex;
- -ms-display: flex;
- display: flex;
- cursor: pointer;
- margin-bottom: 8px;
- padding: 12px 24px 24px 24px;
- align-items: center; }
- /* STEP LABEL MOD WITH SUBLABEL */
- .mdl-step__label--with-sublabel {
- align-items: baseline; }
- /* STEP TITLE */
- .mdl-step__title {
- -webkit-display: flex;
- -moz-display: flex;
- -ms-display: flex;
- display: flex;
- flex-flow: column nowrap;
- order: 2;
- width: 100%; }
- /* STEP TITLE MESSAGE */
- .mdl-step__title-message {
- position: absolute;
- font-size: 12px;
- opacity: .7;
- font-weight: 400;
- top: 28px; }
- /* STEP LABEL INDICATOR */
- .mdl-step__label-indicator {
- -webkit-display: flex;
- -moz-display: flex;
- -ms-display: flex;
- display: flex;
- order: 1;
- background-color: rgba(0, 0, 0, 0.3);
- border-radius: 100%;
- color: white;
- margin-right: 12px;
- margin-bottom: auto; }
- .mdl-step__label-indicator > :first-child {
- -webkit-display: flex;
- -moz-display: flex;
- -ms-display: flex;
- display: flex;
- font-size: 15px;
- width: 28px;
- height: 28px;
- align-items: center;
- justify-content: center; }
- /* STEP CONTENT */
- .mdl-step__content {
- display: none;
- height: calc(100% - 132px);
- width: inherit;
- overflow: auto;
- margin-left: 64px;
- margin-right: 24px; }
- /* STEP ACTIONS */
- .mdl-step__actions {
- display: none;
- padding-top: 16px;
- height: 48px;
- margin-left: 64px;
- margin-right: 24px; }
- .mdl-step__actions [data-stepper-next].mdl-button--raised.mdl-button--colored {
- background-color: #2196F3;
- box-shadow: none; }
- /* STEP TRANSIENT */
- .mdl-step__transient {
- position: absolute;
- top: 72px;
- left: 64px;
- z-index: 2;
- -webkit-display: flex;
- -moz-display: flex;
- -ms-display: flex;
- display: flex;
- width: calc(100% - 88px);
- height: calc(100% - 132px);
- transition: 0.3s all ease-in-out; }
- /* STEP TRANSIENT OVERLAY */
- .mdl-step__transient-overlay {
- content: '';
- position: absolute;
- z-index: 3;
- width: 100%;
- height: 100%;
- top: 0;
- background-color: rgba(255, 255, 255, 0.8); }
- /* STEP TRANSIENT LOADER */
- .mdl-step__transient-loader {
- z-index: 4;
- margin: auto; }
- /* STEPPER MOD HORIZONTAL */
- @media only screen and (min-width: 841px) {
- .mdl-stepper--horizontal {
- -webkit-display: flex;
- -moz-display: flex;
- -ms-display: flex;
- display: flex;
- flex-direction: row;
- align-items: baseline;
- max-width: 840px;
- padding: 0;
- min-height: 576px;
- /* HORIZONTAL STEP */
- /* HORIZONTAL STEP LABEL */
- /* HORIZONTAL STEP CONTENT */
- /* HORIZONTAL STEP ACTIONS */
- /* STEPPER MOD HORIZONTAL + MOD LINEAR */ }
- .mdl-stepper--horizontal:before {
- content: '';
- background-color: transparent;
- width: 100%;
- min-height: 84px;
- box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
- position: absolute;
- top: 0;
- left: 0; }
- .mdl-stepper--horizontal > .mdl-step {
- position: static;
- -webkit-display: flex;
- -moz-display: flex;
- -ms-display: flex;
- display: flex;
- justify-content: center;
- align-items: initial;
- margin-top: 0 !important;
- margin-bottom: 0 !important;
- height: initial;
- max-height: 84px;
- overflow: hidden;
- /* STEP MOD COMPLETED */ }
- .mdl-stepper--horizontal > .mdl-step.is-active.mdl-step--transient:before {
- content: attr(data-step-transient-message);
- -webkit-animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99);
- -moz-animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99);
- -ms-animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99);
- animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99);
- position: absolute;
- padding-left: 24px;
- display: flex;
- font-size: 16px;
- justify-content: flex-start;
- align-items: center;
- width: calc(100% - 24px);
- height: 84px;
- background-color: white;
- top: 0;
- left: 0;
- z-index: 9; }
- .mdl-stepper--horizontal > .mdl-step .mdl-step__transient {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%; }
- .mdl-stepper--horizontal > .mdl-step:not(:first-child):not(:last-child) {
- margin: auto auto; }
- .mdl-stepper--horizontal > .mdl-step:not(:last-child) {
- flex: 1; }
- .mdl-stepper--horizontal > .mdl-step:not(:last-child):after {
- content: '';
- position: relative;
- flex: 1;
- top: 42px;
- width: 168px;
- margin-left: -12px;
- height: 1px;
- background-color: rgba(0, 0, 0, 0.1); }
- .mdl-stepper--horizontal > .mdl-step.mdl-step--completed .mdl-step__title > .mdl-step__title-text {
- font-weight: bold; }
- .mdl-stepper--horizontal .mdl-step__label {
- top: -48px;
- flex: initial;
- margin: 0;
- padding: 24px;
- min-height: 132px;
- transition: 0.025s border-radius linear; }
- .mdl-stepper--horizontal .mdl-step__label:hover {
- background-color: rgba(0, 0, 0, 0.06); }
- .mdl-stepper--horizontal .mdl-step__label:active {
- padding: 12px;
- margin: 12px;
- border-radius: 100%; }
- .mdl-stepper--horizontal .mdl-step__label > .mdl-step__title {
- width: initial; }
- .mdl-stepper--horizontal .mdl-step__label > .mdl-step__title > * {
- max-width: 120px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis; }
- .mdl-stepper--horizontal .mdl-step__label > .mdl-step__title > .mdl-step__title-message {
- position: relative;
- top: 0;
- line-height: 14px; }
- .mdl-stepper--horizontal .mdl-step__label > .mdl-step__label-indicator {
- margin-top: auto; }
- .mdl-stepper--horizontal .mdl-step > .mdl-step__content {
- position: absolute;
- top: 84px;
- left: 0;
- width: calc(100% - 48px);
- height: calc(100% - 192px);
- margin: 24px; }
- .mdl-stepper--horizontal .mdl-step > .mdl-step__actions {
- position: absolute;
- top: calc(100% - 84px);
- left: 0;
- margin: 0;
- padding: 24px;
- width: calc(100% - 48px); }
- .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-next] {
- order: 4;
- margin-left: 8px;
- margin-right: 0;
- color: #2196F3;
- background-color: transparent; }
- .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-cancel] {
- order: 3;
- margin-left: auto; }
- .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-skip] {
- order: 2;
- margin-left: auto; }
- .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-back] {
- order: 1;
- margin-left: 0;
- margin-right: auto; }
- .mdl-stepper--horizontal.mdl-stepper--linear > .mdl-step:not(.mdl-step--completed):not(.is-active) .mdl-step__title > .mdl-step__title-text {
- opacity: .5; } }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement