Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- CSS (SCSS)
- @import "bourbon";
- // Main Colors
- $accent: null;
- $white: #ffffff;
- $black: #000000;
- $dark-gray: lighten($black, 20%);
- $gray: lighten($black, 40%);
- $light-gray: lighten($black, 60%);
- $lighter-gray: lighten($black, 80%);
- // Pen Settings
- $primary: #363636;
- $accent: #ed2553;
- $max-width: 460px;
- // Mixins
- $level: 1;
- @mixin materialShadow($level) {
- @if $level == 1 {
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- }
- @else if $level == 2 {
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
- }
- @else if $level == 3 {
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
- }
- @else if $level == 4 {
- box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
- }
- @else if $level == 5 {
- box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
- }
- }
- body {
- background: #e9e9e9;
- color: $gray;
- font-family: 'RobotoDraft', 'Roboto', sans-serif;
- font-size: 14px;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- /* Pen Title */
- .pen-title {
- padding: 50px 0;
- text-align: center;
- letter-spacing: 2px;
- h1 {
- margin: 0 0 20px;
- font-size: 48px;
- font-weight: 300;
- }
- span {
- font-size: 12px;
- .fa {
- color: $accent;
- }
- a {
- color: $accent;
- font-weight: 600;
- text-decoration: none;
- }
- }
- }
- /* Rerun */
- .rerun {
- margin: 0 0 30px;
- text-align: center;
- a {
- cursor: pointer;
- display: inline-block;
- background: $accent;
- border-radius: 3px;
- @include materialShadow(1);
- padding: 10px 20px;
- color: $white;
- text-decoration: none;
- @include transition(0.3s ease);
- &:hover {
- @include materialShadow(2);
- }
- }
- }
- /* Scroll To Bottom */
- #codepen {
- position: fixed;
- bottom: 30px;
- right: 30px;
- background: $primary;
- width: 56px;
- height: 56px;
- border-radius: 100%;
- @include materialShadow(1);
- @include transition(0.3s ease);
- color: $white;
- text-align: center;
- i {
- line-height: 56px;
- }
- &:hover {
- @include materialShadow(3);
- }
- }
- /* CodePen */
- #portfolio {
- @extend #codepen;
- bottom: 96px;
- right: 36px;
- background: $accent;
- width: 44px;
- height: 44px;
- @include animation(buttonFadeInUp 1s ease);
- i {
- line-height: 44px;
- }
- }
- /* Container */
- .container {
- position: relative;
- max-width: $max-width;
- width: 100%;
- margin: 0 auto 100px;
- &.active {
- .card {
- &:first-child {
- background: darken($white, 5%);
- margin: 0 15px;
- }
- &:nth-child(2) {
- background: darken($white, 2%);
- margin: 0 10px;
- }
- &.alt {
- top: 20px;
- right: 0;
- width: 100%;
- min-width: 100%;
- height: auto;
- border-radius: 5px;
- padding: 60px 0 40px;
- overflow: hidden;
- .toggle {
- position: absolute;
- top: 40px;
- right: -70px;
- box-shadow: none;
- @include transform(scale(10));
- transition: transform .3s ease;
- &:before {
- content: '';
- }
- }
- .title,
- .input-container,
- .button-container {
- left: 0;
- opacity: 1;
- visibility: visible;
- transition: .3s ease;
- }
- .title {
- transition-delay: .3s;
- }
- .input-container {
- transition-delay: .4s;
- &:nth-child(2) {
- transition-delay: .5s;
- }
- &:nth-child(3) {
- transition-delay: .6s;
- }
- }
- .button-container {
- transition-delay: .7s;
- }
- }
- }
- }
- }
- /* Card */
- .card {
- position: relative;
- background: $white;
- border-radius: 5px;
- padding: 60px 0 40px 0;
- box-sizing: border-box;
- @include materialShadow(1);
- transition: .3s ease;
- &:first-child {
- background: darken($white, 2%);
- height: 10px;
- border-radius: 5px 5px 0 0;
- margin: 0 10px;
- padding: 0;
- }
- /* Title */
- .title {
- position: relative;
- z-index: 1;
- border-left: 5px solid $accent;
- margin: 0 0 35px;
- padding: 10px 0 10px 50px;
- color: $accent;
- font-size: 32px;
- font-weight: 600;
- text-transform: uppercase;
- }
- /* Inputs */
- .input-container {
- position: relative;
- margin: 0 60px 50px;
- input {
- outline: none;
- z-index: 1;
- position: relative;
- background: none;
- width: 100%;
- height: 60px;
- border: 0;
- color: #212121;
- font-size: 24px;
- font-weight: 400;
- &:focus {
- ~ label {
- color: #9d9d9d;
- transform: translate(-12%, -50%) scale(0.75);
- }
- ~ .bar {
- &:before,
- &:after {
- width: 50%;
- }
- }
- }
- &:valid {
- ~ label {
- color: #9d9d9d;
- transform: translate(-12%, -50%) scale(0.75);
- }
- }
- }
- label {
- position: absolute;
- top: 0;
- left: 0;
- color: #757575;
- font-size: 24px;
- font-weight: 300;
- line-height: 60px;
- @include transition(0.2s ease);
- }
- .bar {
- position: absolute;
- left: 0;
- bottom: 0;
- background: #757575;
- width: 100%;
- height: 1px;
- &:before,
- &:after {
- content: '';
- position: absolute;
- background: $accent;
- width: 0;
- height: 2px;
- transition: .2s ease;
- }
- &:before {
- left: 50%;
- }
- &:after {
- right: 50%;
- }
- }
- }
- /* Button */
- .button-container {
- margin: 0 60px;
- text-align: center;
- button {
- outline: 0;
- cursor: pointer;
- position: relative;
- display: inline-block;
- background: 0;
- width: 240px;
- border: 2px solid #e3e3e3;
- padding: 20px 0;
- font-size: 24px;
- font-weight: 600;
- line-height: 1;
- text-transform: uppercase;
- overflow: hidden;
- transition: .3s ease;
- span {
- position: relative;
- z-index: 1;
- color: #ddd;
- transition: .3s ease;
- }
- &:before {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- display: block;
- background: $accent;
- width: 30px;
- height: 30px;
- border-radius: 100%;
- margin: -15px 0 0 -15px;
- opacity: 0;
- transition: .3s ease;
- }
- &:hover,
- &:active,
- &:focus {
- border-color: $accent;
- span {
- color: $accent;
- }
- }
- &:active,
- &:focus {
- span {
- color: $white;
- }
- &:before {
- opacity: 1;
- @include transform(scale(10));
- }
- }
- }
- }
- /* Footer */
- .footer {
- margin: 40px 0 0;
- color: #d3d3d3;
- font-size: 24px;
- font-weight: 300;
- text-align: center;
- a {
- color: inherit;
- text-decoration: none;
- transition: .3s ease;
- &:hover {
- color: darken(#d3d3d3, 10%);
- }
- }
- }
- /* Alt Card */
- &.alt {
- position: absolute;
- top: 40px;
- right: -70px;
- z-index: 10;
- width: 140px;
- height: 140px;
- background: none;
- border-radius: 100%;
- box-shadow: none;
- padding: 0;
- transition: .3s ease;
- /* Toggle */
- .toggle {
- position: relative;
- background: $accent;
- width: 140px;
- height: 140px;
- border-radius: 100%;
- @include materialShadow(1);
- color: $white;
- font-size: 58px;
- line-height: 140px;
- text-align: center;
- cursor: pointer;
- &:before {
- content: '\f040';
- display: inline-block;
- font: normal normal normal 14px/1 FontAwesome;
- font-size: inherit;
- text-rendering: auto;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- transform: translate(0, 0);
- }
- }
- .title,
- .input-container,
- .button-container {
- left: 100px;
- opacity: 0;
- visibility: hidden;
- }
- /* Title */
- .title {
- position: relative;
- border-color: $white;
- color: $white;
- .close {
- cursor: pointer;
- position: absolute;
- top: 0;
- right: 60px;
- display: inline;
- color: $white;
- font-size: 58px;
- font-weight: 400;
- &:before {
- content: '\00d7';
- }
- }
- }
- /* Input */
- .input-container {
- input {
- color: $white;
- &:focus {
- ~ label {
- color: $white;
- }
- ~ .bar {
- &:before,
- &:after {
- background: $white;
- }
- }
- }
- &:valid {
- ~ label {
- color: $white;
- }
- }
- }
- label {
- color: rgba($white, 0.8);
- }
- .bar {
- background: rgba($white, 0.8);
- }
- }
- /* Button */
- .button-container {
- button {
- width: 100%;
- background: $white;
- border-color: $white;
- span {
- color: $accent;
- }
- &:hover {
- background: rgba($white, 0.9);
- }
- &:active,
- &:focus {
- &:before {
- display: none;
- }
- }
- }
- }
- }
- }
- /* Keyframes */
- @include keyframes(buttonFadeInUp) {
- 0% {
- bottom: 30px;
- opacity: 0;
- }
- }
Add Comment
Please, Sign In to add comment