|
/// Hey, listen up before you dig into the code! This widget (or whatever you want to call it), is based on Bootstrap 3+. This means that most of the bootstrap mixins listed below, are already included in the "less" files that come along when downloading Bootstrap(source). However, the custom mixins are new and are required for this widget to work. |
|
|
|
// HELPFUL MIXINS |
|
// Bootstrap mixins: |
|
|
|
.translate(@x; @y) { |
|
-webkit-transform: translate(@x, @y); |
|
-moz-transform: translate(@x, @y); |
|
-ms-transform: translate(@x, @y); |
|
transform: translate(@x, @y); |
|
} |
|
|
|
.animation(@animation) { |
|
-webkit-animation: @animation; |
|
-moz-animation: @animation; |
|
-ms-animation: @animation; |
|
animation: @animation; |
|
} |
|
|
|
.animation-delay(@delay) { |
|
-webkit-animation-delay: @delay; |
|
-moz-animation-delay: @delay; |
|
-ms-animation-delay: @delay; |
|
animation-delay: @delay; |
|
} |
|
|
|
.backface-visibility(@visibility){ |
|
-webkit-backface-visibility: @visibility; |
|
-moz-backface-visibility: @visibility; |
|
-ms-backface-visibility: @visibility; |
|
backface-visibility: @visibility; |
|
|
|
} |
|
|
|
.transition(@transition) { |
|
-webkit-transition: @transition; |
|
-moz-transition: @transition; |
|
-ms-transition: @transition; |
|
transition: @transition; |
|
} |
|
|
|
.box-shadow(@shadow) { |
|
-webkit-box-shadow: @shadow; |
|
-moz-box-shadow: @shadow; |
|
-ms-box-shadow: @shadow; |
|
box-shadow: @shadow; |
|
} |
|
|
|
|
|
// Custom mixins |
|
.effect(@name; @arguments){ |
|
@-webkit-keyframes @name { @arguments();} |
|
@-moz-keyframes @name { @arguments();} |
|
@keyframes @name { @arguments();} |
|
} |
|
|
|
.generate-paddings(5); |
|
.generate-paddings(@n, @i: 1) when (@i =< @n) { |
|
@x : (@i*20); |
|
.pad-top-@{x} { |
|
padding-top: (@i * 20px); |
|
} |
|
.pad-btm-@{x} { |
|
padding-bottom: (@i * 20px); |
|
} |
|
.pad-sep-@{x} { |
|
padding-top: (@i * 20px); |
|
padding-bottom: (@i * 20px); |
|
} |
|
.generate-paddings(@n, (@i + 1)); |
|
} |
|
|
|
.perspective(@perspective){ |
|
-webkit-perspective: @perspective; |
|
-moz-perspective: @perspective; |
|
-ms-perspective: @perspective; |
|
-o-perspective: @perspective; |
|
perspective: @perspective; |
|
} |
|
|
|
.transform(@string){ |
|
-webkit-transform: @string; |
|
-moz-transform: @string; |
|
-ms-transform: @string; |
|
-o-transform: @string; |
|
} |
|
|
|
// Helpful variables |
|
|
|
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100); |
|
|
|
// Bootstrap standard variables: |
|
@body-bg: #222; |
|
@text-color: #fff; |
|
@font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif; |
|
@font-size-base: 14px; |
|
@headings-font-weight: 300; |
|
|
|
@brand-primary: #22A7F0; |
|
@brand-success: #00B16A; |
|
@brand-warning: #F39C12; |
|
@brand-danger: #E74C3C; |
|
|
|
// Custom variables: |
|
@dialog-bg: #fff; |
|
@dialog-color: #222; |
|
@dialog-width: 300px; |
|
@dialog-padding: 20px 25px; |
|
@dialog-input-border: 2px solid #222; |
|
@dialog-input-bg: transparent; |
|
@dialog-checkbox: 20px; |
|
|
|
// Custom variables that modify the way "btn-default" looks and feels. |
|
@dialog-btn-primary-bg: #446CB3; //darken(@dialog-bg,10%); |
|
@dialog-btn-primary-color: #fff; //@dialog-color; |
|
|
|
@dialog-btn-primary-bg-hover: @dialog-color; |
|
@dialog-btn-primary-color-hover: @dialog-bg; |
|
|
|
// Basic styling |
|
html,body { |
|
height:100%; |
|
} |
|
|
|
body { |
|
margin: 0; |
|
padding:0; |
|
color:@text-color; |
|
overflow:hidden; |
|
background-color:@body-bg; |
|
font-size: @font-size-base; |
|
position:relative; |
|
font-family: @font-family-sans-serif; |
|
} |
|
|
|
h1,.h1,h2,.h2,h3,.h3 { |
|
font-weight:@headings-font-weight; |
|
color:@brand-primary; |
|
} |
|
|
|
.fix-middle { |
|
position: absolute; |
|
padding:10px; |
|
top:50%; |
|
left:50%; |
|
.translate(-50%; -50%); |
|
z-index:3; |
|
} |
|
|
|
// LOGIN/REGISTER WIDGET STYLING STARTS HERE: |
|
|
|
.dialog{ |
|
color:@dialog-color; |
|
.perspective(1200px); |
|
z-index:1000; |
|
opacity:1; |
|
visibility: visible; |
|
-webkit-transition: opacity .2s cubic-bezier(.25,.5,.5,.9),visibility .2s cubic-bezier(.25,.5,.5,.9); |
|
-moz-transition: opacity .2s cubic-bezier(.25,.5,.5,.9),visibility .2s cubic-bezier(.25,.5,.5,.9); |
|
-ms-transition: opacity .2s cubic-bezier(.25,.5,.5,.9),visibility .2s cubic-bezier(.25,.5,.5,.9); |
|
transition: opacity .2s cubic-bezier(.25,.5,.5,.9),visibility .2s cubic-bezier(.25,.5,.5,.9); |
|
&, & .dialog-front, & .dialog-back { |
|
width:auto; |
|
position:absolute; |
|
top:50%; |
|
left:50%; |
|
padding:0; |
|
margin:0; |
|
.translate(-50%;-50%); |
|
} |
|
&.dialog-effect-in{ |
|
.animation(showDialog 1000ms linear both); |
|
} |
|
&.shakeit { |
|
.animation(shakeDialog 300ms linear both); |
|
} |
|
.dialog-content { |
|
width:@dialog-width; |
|
background: @dialog-bg; /* Old browsers */ |
|
background: -moz-radial-gradient(center, ellipse cover, #ffffff 59%, #e5e5e5 100%); /* FF3.6+ */ |
|
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(59%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ |
|
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 59%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */ |
|
background: -o-radial-gradient(center, ellipse cover, #ffffff 59%,#e5e5e5 100%); /* Opera 12+ */ |
|
background: -ms-radial-gradient(center, ellipse cover, #ffffff 59%,#e5e5e5 100%); /* IE10+ */ |
|
background: radial-gradient(ellipse at center, #ffffff 59%,#e5e5e5 100%); /* W3C */ |
|
border-radius:6px; |
|
.box-shadow(0 2px 12px -3px rgba(0,0,0,.6)); |
|
padding:@dialog-padding; |
|
} |
|
|
|
.dialog-front,.dialog-back{ |
|
-webkit-transform-style: preserve-3d; |
|
-moz-transform-style: preserve-3d; |
|
.backface-visibility(hidden); |
|
.transition(all .4s cubic-bezier(.25,.5,.5,.9)); |
|
} |
|
.dialog-front{ |
|
.transform(translate(-50%,-50%) rotateX(0deg) rotateY(0deg)); |
|
z-index: 900; |
|
|
|
} |
|
.dialog-back { |
|
.transform(translate(-50%,-50%) rotateY(-180deg)); |
|
z-index: 800; |
|
} |
|
&.flip { |
|
.dialog-front{ |
|
z-index: 800; |
|
visibility:hidden; |
|
.transform(translate(-50%,-50%) rotateY(180deg)); |
|
} |
|
.dialog-back { |
|
z-index: 900; |
|
visibility:visible; |
|
.transform(translate(-50%,-50%) rotateX(0deg) rotateY(0deg)); |
|
} |
|
} |
|
&.dialog-effect-out { |
|
z-index:1; |
|
opacity:0; |
|
visibility: hidden; |
|
.dialog-front{ |
|
.transform(translate(-50%,-20%) rotateX(-30deg)); |
|
} |
|
.dialog-back { |
|
.transform(translate(-50%,-20%) rotateX(-30deg) rotateY(-180deg)); |
|
} |
|
&.flip { |
|
.dialog-front{ |
|
.transform(translate(-50%,-20%) rotateX(-30deg) rotateY(180deg)); |
|
} |
|
.dialog-back { |
|
.transform(translate(-50%,-20%) rotateX(-30deg) rotateY(0deg)); |
|
} |
|
} |
|
.dialog-content { |
|
background:@brand-success; |
|
.dialog-form { |
|
visibility:hidden; |
|
} |
|
} |
|
} |
|
.dialog-form { |
|
.animation(swooshUp30 300ms linear both); |
|
.animation-delay(300ms); |
|
legend { |
|
margin-bottom: 40px; |
|
font-size: 26px; |
|
font-weight:@headings-font-weight; |
|
color: @dialog-color; |
|
border-bottom: none; |
|
} |
|
.form-group { |
|
margin-bottom: 20px; |
|
position:relative; |
|
.form-control { |
|
color: @dialog-color; |
|
background-color: @dialog-input-bg; |
|
border: none; |
|
border-bottom:@dialog-input-border; |
|
border-radius:0; |
|
.box-shadow(none); |
|
} |
|
label { |
|
display: inline-block; |
|
max-width: 100%; |
|
margin-bottom: 5px; |
|
font-weight: 700; |
|
} |
|
&.has-error { |
|
.error-msg { |
|
display:block; |
|
} |
|
label { |
|
color: @brand-danger; |
|
} |
|
.form-control { |
|
border-color: @brand-danger; |
|
} |
|
} |
|
.checkbox { |
|
label { |
|
padding-left:40px; |
|
} |
|
input[type="checkbox"] { |
|
width: @dialog-checkbox; |
|
height: @dialog-checkbox; |
|
background:none; |
|
border:@dialog-input-border; |
|
margin-left:(-20px + @dialog-checkbox*-1); |
|
-webkit-appearance:none; |
|
appearance:none; |
|
&:hover { |
|
background-color:darken(@dialog-bg,10%); |
|
} |
|
&:checked { |
|
background-color:@dialog-color; |
|
} |
|
&:disabled { |
|
background-color:lighten(@dialog-color,30%); |
|
border-color:lighten(@dialog-color,20%); |
|
} |
|
} |
|
} |
|
} |
|
.error-msg { |
|
position: absolute; |
|
top: 50%; |
|
left: 0; |
|
right: auto; |
|
background-color: @brand-danger; |
|
color:@dialog-bg; |
|
padding: 10px; |
|
z-index: 3; |
|
max-width: (@dialog-width/2); |
|
border-radius:3px; |
|
.translate(-110%; -50%); |
|
.animation(swooshleft 200ms ease-in-out both); |
|
display:none; |
|
&:after { |
|
position:absolute; |
|
content:''; |
|
top:50%; |
|
right:0; |
|
.translate(97%; -50%); |
|
width: 0; |
|
height: 0; |
|
border-style: solid; |
|
border-width: 10px 0 10px 10px; |
|
border-color: transparent transparent transparent @brand-danger; |
|
} |
|
} |
|
.btn { |
|
font-weight:700; |
|
border-width:0; |
|
border-radius:0; |
|
text-transform:uppercase; |
|
.transition(all .2s cubic-bezier(.25,.5,.5,.9)); |
|
&.btn-default { |
|
color:@dialog-btn-primary-color; |
|
background-color: @dialog-btn-primary-bg; |
|
margin: 0 -10%; |
|
width: 120%; |
|
outline:none; |
|
&:hover{ |
|
background-color: @dialog-btn-primary-bg-hover; |
|
color:@dialog-btn-primary-color-hover; |
|
} |
|
&:active,&:focus { |
|
background-color: @dialog-btn-primary-bg-hover; |
|
color:@dialog-btn-primary-color-hover; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.effect(swooshUp30; { |
|
0% { |
|
opacity: 0; |
|
} |
|
100% { |
|
opacity: 1; |
|
} |
|
}); |
|
|
|
.effect(swooshleft; { |
|
0% { |
|
.translate(-90%; -50%); |
|
} |
|
100% { |
|
.translate(-110%; -50%); |
|
} |
|
}); |
|
|
|
.effect(shakeDialog; { |
|
0% { |
|
left:51%; |
|
} |
|
25% { |
|
left:49%; |
|
} |
|
50% { |
|
left:51%; |
|
} |
|
100% { |
|
left:50%; |
|
} |
|
}); |
|
|
|
/* Generated with Bounce.js. Edit at https://goo.gl/KtDT8H */ |
|
|
|
@-webkit-keyframes showDialog { |
|
0% { -webkit-transform: matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
7.61% { -webkit-transform: matrix3d(0.907, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.907, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
11.41% { -webkit-transform: matrix3d(0.948, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.948, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
15.12% { -webkit-transform: matrix3d(0.976, 0, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.976, 0, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
18.92% { -webkit-transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
22.72% { -webkit-transform: matrix3d(1.008, 0, 0, 0, 0, 1.008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.008, 0, 0, 0, 0, 1.008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
30.23% { -webkit-transform: matrix3d(1.014, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.014, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
50.25% { -webkit-transform: matrix3d(1.003, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.003, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
70.27% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
} |
|
|
|
@keyframes showDialog { |
|
0% { -webkit-transform: matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
7.61% { -webkit-transform: matrix3d(0.907, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.907, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
11.41% { -webkit-transform: matrix3d(0.948, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.948, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
15.12% { -webkit-transform: matrix3d(0.976, 0, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.976, 0, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
18.92% { -webkit-transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
22.72% { -webkit-transform: matrix3d(1.008, 0, 0, 0, 0, 1.008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.008, 0, 0, 0, 0, 1.008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
30.23% { -webkit-transform: matrix3d(1.014, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.014, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
50.25% { -webkit-transform: matrix3d(1.003, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.003, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
70.27% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } |
|
} |
|
|
|
// This stiling is not a part of the widget. |
|
|
|
#successful_login, #successful_registration{ |
|
opacity:0; |
|
visibility:hidden; |
|
-webkit-transition: opacity .4s cubic-bezier(.25,.5,.5,.9),visibility .6s cubic-bezier(.25,.5,.5,.9); |
|
-moz-transition: opacity .4s cubic-bezier(.25,.5,.5,.9),visibility .6s cubic-bezier(.25,.5,.5,.9); |
|
-ms-transition: opacity .4s cubic-bezier(.25,.5,.5,.9),visibility .6s cubic-bezier(.25,.5,.5,.9); |
|
transition: opacity .4s cubic-bezier(.25,.5,.5,.9),visibility .6s cubic-bezier(.25,.5,.5,.9); |
|
&.active { |
|
opacity:1; |
|
visibility:visible; |
|
} |
|
} |