mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-02 08:32:41 +00:00
Workign on the homebrew
This commit is contained in:
Scott Tolksdorf
421
shared/naturalCrit/styles/animations.less
Normal file
421
shared/naturalCrit/styles/animations.less
Normal file
@@ -0,0 +1,421 @@
|
||||
//Defaults
|
||||
@defaultDuration : 0.25s;
|
||||
@defaultEasing : ease;
|
||||
|
||||
//Animates all properties on an element
|
||||
.animateAll(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transition: all @duration @easing;
|
||||
-moz-transition: all @duration @easing;
|
||||
-o-transition: all @duration @easing;
|
||||
transition: all @duration @easing;
|
||||
}
|
||||
//Animates Specific property
|
||||
.animate(@prop, @duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transition: @prop @duration @easing;
|
||||
-moz-transition: @prop @duration @easing;
|
||||
-o-transition: @prop @duration @easing;
|
||||
transition: @prop @duration @easing;
|
||||
}
|
||||
|
||||
.animateMany(...){
|
||||
@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
|
||||
-webkit-transition-property: @value;
|
||||
-moz-transition-property: @value;
|
||||
-o-transition-property: @value;
|
||||
transition-property: @value;
|
||||
|
||||
.animateDuration();
|
||||
.animateEasing();
|
||||
}
|
||||
|
||||
.animateDuration(@duration : @defaultDuration){
|
||||
-webkit-transition-duration: @duration;
|
||||
-moz-transition-duration: @duration;
|
||||
-o-transition-duration: @duration;
|
||||
transition-duration: @duration;
|
||||
}
|
||||
|
||||
.animateEasing(@easing : @defaultEasing){
|
||||
-webkit-transition-timing-function: @easing;
|
||||
-moz-transition-timing-function: @easing;
|
||||
-o-transition-timing-function: @easing;
|
||||
transition-timing-function: @easing;
|
||||
}
|
||||
|
||||
|
||||
.transition (@prop, @duration: @defaultDuration) {
|
||||
-webkit-transition: @prop @duration, -webkit-transform @duration;
|
||||
-moz-transition: @prop @duration, -moz-transform @duration;
|
||||
-o-transition: @prop @duration, -o-transform @duration;
|
||||
-ms-transition: @prop @duration, -ms-transform @duration;
|
||||
transition: @prop @duration, transform @duration;
|
||||
}
|
||||
.transform (@transform) {
|
||||
-webkit-transform: @transform;
|
||||
-moz-transform: @transform;
|
||||
-o-transform: @transform;
|
||||
-ms-transform: @transform;
|
||||
transform: @transform;
|
||||
}
|
||||
|
||||
|
||||
.delay(@delay){
|
||||
animation-delay:@delay;
|
||||
-webkit-animation-delay:@delay;
|
||||
transition-delay:@delay;
|
||||
-webkit-transition-delay:@delay;
|
||||
}
|
||||
.keep(){
|
||||
-webkit-animation-fill-mode:forwards;
|
||||
-moz-animation-fill-mode:forwards;
|
||||
-ms-animation-fill-mode:forwards;
|
||||
-o-animation-fill-mode:forwards;
|
||||
animation-fill-mode:forwards;
|
||||
}
|
||||
|
||||
|
||||
.sequentialDelay(@delayInc : 0.2s, @initialDelay : 0s){
|
||||
&:nth-child(1){.delay(0*@delayInc + @initialDelay)}
|
||||
&:nth-child(2){.delay(1*@delayInc + @initialDelay)}
|
||||
&:nth-child(3){.delay(2*@delayInc + @initialDelay)}
|
||||
&:nth-child(4){.delay(3*@delayInc + @initialDelay)}
|
||||
&:nth-child(5){.delay(4*@delayInc + @initialDelay)}
|
||||
&:nth-child(6){.delay(5*@delayInc + @initialDelay)}
|
||||
&:nth-child(7){.delay(6*@delayInc + @initialDelay)}
|
||||
&:nth-child(8){.delay(7*@delayInc + @initialDelay)}
|
||||
&:nth-child(9){.delay(8*@delayInc + @initialDelay)}
|
||||
&:nth-child(10){.delay(9*@delayInc + @initialDelay)}
|
||||
&:nth-child(11){.delay(10*@delayInc + @initialDelay)}
|
||||
&:nth-child(12){.delay(11*@delayInc + @initialDelay)}
|
||||
&:nth-child(13){.delay(12*@delayInc + @initialDelay)}
|
||||
&:nth-child(14){.delay(13*@delayInc + @initialDelay)}
|
||||
&:nth-child(15){.delay(14*@delayInc + @initialDelay)}
|
||||
&:nth-child(16){.delay(15*@delayInc + @initialDelay)}
|
||||
&:nth-child(17){.delay(16*@delayInc + @initialDelay)}
|
||||
&:nth-child(18){.delay(17*@delayInc + @initialDelay)}
|
||||
&:nth-child(19){.delay(18*@delayInc + @initialDelay)}
|
||||
&:nth-child(20){.delay(19*@delayInc + @initialDelay)}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.createFrames(@name, @from, @to){
|
||||
@frames: {
|
||||
from { @from(); }
|
||||
to { @to(); }
|
||||
};
|
||||
@-webkit-keyframes @name {@frames();}
|
||||
@-moz-keyframes @name {@frames();}
|
||||
@-ms-keyframes @name {@frames();}
|
||||
@-o-keyframes @name {@frames();}
|
||||
@keyframes @name {@frames();}
|
||||
}
|
||||
|
||||
.createAnimation(@name, @duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-animation-name: @name;
|
||||
-moz-animation-name: @name;
|
||||
-ms-animation-name: @name;
|
||||
animation-name: @name;
|
||||
-webkit-animation-duration: @duration;
|
||||
-moz-animation-duration: @duration;
|
||||
-ms-animation-duration: @duration;
|
||||
animation-duration: @duration;
|
||||
-webkit-animation-timing-function: @easing;
|
||||
-moz-animation-timing-function: @easing;
|
||||
-ms-animation-timing-function: @easing;
|
||||
animation-timing-function: @easing;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/***************************
|
||||
Standard Animations
|
||||
****************************/
|
||||
|
||||
.fadeIn(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeIn; @duration; @easing);
|
||||
.createFrames(fadeIn,
|
||||
{ opacity : 0; },
|
||||
{ opacity : 1; }
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInDown(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeInDown; @duration; @easing);
|
||||
.createFrames(fadeInDown,
|
||||
{ opacity : 0; .transform(translateY(20px));},
|
||||
{ opacity : 1; .transform(translateY(0px));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInTop(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeInTop; @duration; @easing);
|
||||
.createFrames(fadeInTop,
|
||||
{ opacity : 0; .transform(translateY(-20px)); },
|
||||
{ opacity : 1; .transform(translateY(0px));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInLeft(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeInLeft; @duration; @easing);
|
||||
.createFrames(fadeInLeft,
|
||||
{ opacity: 0; .transform(translateX(-20px));},
|
||||
{ opacity: 1; .transform(translateX(0));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeInRight(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeInRight; @duration; @easing);
|
||||
.createFrames(fadeInRight,
|
||||
{ opacity: 0; .transform(translateX(20px));},
|
||||
{ opacity: 1; .transform(translateX(0));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOut(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeOut; @duration; @easing);
|
||||
.createFrames(fadeOut,
|
||||
{ opacity : 1; },
|
||||
{ opacity : 0; }
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutDown(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeOutDown; @duration; @easing);
|
||||
.createFrames(fadeOutDown,
|
||||
{ opacity : 1; .transform(translateY(0)); visibility: visible;},
|
||||
{ opacity : 0; .transform(translateY(20px)); visibility: hidden;}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutTop(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeOutTop; @duration; @easing);
|
||||
.createFrames(fadeOutTop,
|
||||
{ opacity : 1; .transform(translateY(0)); },
|
||||
{ opacity : 0; .transform(translateY(-20px)); }
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutLeft(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeOutLeft; @duration; @easing);
|
||||
.createFrames(fadeOutLeft,
|
||||
{ opacity : 1; .transform(translateX(0));},
|
||||
{ opacity : 0; .transform(translateX(-20px));}
|
||||
);
|
||||
}
|
||||
|
||||
.fadeOutRight(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(fadeOutRight; @duration; @easing);
|
||||
.createFrames(fadeOutRight,
|
||||
{ opacity : 1; .transform(translateX(0));},
|
||||
{ opacity : 0; .transform(translateX(20px));}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/***************************
|
||||
Fun Animations
|
||||
****************************/
|
||||
|
||||
.spin(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(spin, @duration, @easing);
|
||||
.spinKeyFrames(){
|
||||
from { .transform(rotate(0deg)); }
|
||||
to { .transform(rotate(360deg)); }
|
||||
}
|
||||
@-webkit-keyframes spin {.spinKeyFrames();}
|
||||
@-moz-keyframes spin {.spinKeyFrames();}
|
||||
@-ms-keyframes spin {.spinKeyFrames();}
|
||||
@-o-keyframes spin {.spinKeyFrames();}
|
||||
@keyframes spin {.spinKeyFrames();}
|
||||
}
|
||||
|
||||
.bounce(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(bounce, @duration, @easing);
|
||||
.bounceKeyFrames(){
|
||||
0%, 20%, 50%, 80%, 100% { .transform(translateY(0));}
|
||||
40% { .transform(translateY(-30px));}
|
||||
60% { .transform(translateY(-15px));}
|
||||
}
|
||||
@-webkit-keyframes bounce {.bounceKeyFrames();}
|
||||
@-moz-keyframes bounce {.bounceKeyFrames();}
|
||||
@-ms-keyframes bounce {.bounceKeyFrames();}
|
||||
@-o-keyframes bounce {.bounceKeyFrames();}
|
||||
@keyframes bounce {.bounceKeyFrames();}
|
||||
}
|
||||
|
||||
.pulse(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(pulse, @duration, @easing);
|
||||
.pulseKeyFrames(){
|
||||
0% { .transform(scale(1));}
|
||||
50% { .transform(scale(1.4));}
|
||||
100% { .transform(scale(1));}
|
||||
}
|
||||
@-webkit-keyframes pulse {.pulseKeyFrames();}
|
||||
@-moz-keyframes pulse {.pulseKeyFrames();}
|
||||
@-ms-keyframes pulse {.pulseKeyFrames();}
|
||||
@-o-keyframes pulse {.pulseKeyFrames();}
|
||||
@keyframes pulse {.pulseKeyFrames();}
|
||||
}
|
||||
|
||||
.rubberBand(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(rubberBand, @duration, @easing);
|
||||
.rubberBandKeyFrames(){
|
||||
0% {.transform(scale(1));}
|
||||
30% {.transform(scaleX(1.25) scaleY(0.75));}
|
||||
40% {.transform(scaleX(0.75) scaleY(1.25));}
|
||||
60% {.transform(scaleX(1.15) scaleY(0.85));}
|
||||
100% {.transform(scale(1));}
|
||||
}
|
||||
@-webkit-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-moz-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-ms-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@-o-keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
@keyframes rubberBand {.rubberBandKeyFrames();}
|
||||
}
|
||||
|
||||
.shake(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(shake, @duration, @easing);
|
||||
.shakeKeyFrames(){
|
||||
0%, 100% {.transform( translateX(0));}
|
||||
10%, 30%, 50%, 70%, 90% {.transform( translateX(-10px));}
|
||||
20%, 40%, 60%, 80% {.transform( translateX(10px));}
|
||||
}
|
||||
@-webkit-keyframes shake {.shakeKeyFrames();}
|
||||
@-moz-keyframes shake {.shakeKeyFrames();}
|
||||
@-ms-keyframes shake {.shakeKeyFrames();}
|
||||
@-o-keyframes shake {.shakeKeyFrames();}
|
||||
@keyframes shake {.shakeKeyFrames();}
|
||||
}
|
||||
|
||||
.swing(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transform-origin: top center;
|
||||
-ms-transform-origin: top center;
|
||||
transform-origin: top center;
|
||||
.createAnimation(swing, @duration, @easing);
|
||||
.swingKeyFrames(){
|
||||
20% {.transform(rotate(15deg));}
|
||||
40% {.transform(rotate(-10deg));}
|
||||
60% {.transform(rotate(5deg));}
|
||||
80% {.transform(rotate(-5deg));}
|
||||
100% {.transform(rotate(0deg));}
|
||||
}
|
||||
@-webkit-keyframes swing {.swingKeyFrames();}
|
||||
@-moz-keyframes swing {.swingKeyFrames();}
|
||||
@-ms-keyframes swing {.swingKeyFrames();}
|
||||
@-o-keyframes swing {.swingKeyFrames();}
|
||||
@keyframes swing {.swingKeyFrames();}
|
||||
}
|
||||
|
||||
.twist(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
-webkit-transform-origin: center center;
|
||||
-ms-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
.createAnimation(swing, @duration, @easing);
|
||||
.swingKeyFrames(){
|
||||
20% {.transform(rotate(15deg));}
|
||||
40% {.transform(rotate(-10deg));}
|
||||
60% {.transform(rotate(5deg));}
|
||||
80% {.transform(rotate(-5deg));}
|
||||
100% {.transform(rotate(0deg));}
|
||||
}
|
||||
@-webkit-keyframes swing {.swingKeyFrames();}
|
||||
@-moz-keyframes swing {.swingKeyFrames();}
|
||||
@-ms-keyframes swing {.swingKeyFrames();}
|
||||
@-o-keyframes swing {.swingKeyFrames();}
|
||||
@keyframes swing {.swingKeyFrames();}
|
||||
}
|
||||
|
||||
.wobble(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(wobble, @duration, @easing);
|
||||
.wobbleKeyFrames(){
|
||||
0% {.transform(translateX(0%));}
|
||||
15% {.transform(translateX(-25%) rotate(-5deg));}
|
||||
30% {.transform(translateX(20%) rotate(3deg));}
|
||||
45% {.transform(translateX(-15%) rotate(-3deg));}
|
||||
60% {.transform(translateX(10%) rotate(2deg));}
|
||||
75% {.transform(translateX(-5%) rotate(-1deg));}
|
||||
100% {.transform(translateX(0%));}
|
||||
}
|
||||
@-webkit-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-moz-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-ms-keyframes wobble {.wobbleKeyFrames();}
|
||||
@-o-keyframes wobble {.wobbleKeyFrames();}
|
||||
@keyframes wobble {.wobbleKeyFrames();}
|
||||
}
|
||||
|
||||
.popIn(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(popIn, @duration, @easing);
|
||||
.popInKeyFrames(){
|
||||
0% { .transform(scale(0));}
|
||||
70% { .transform(scale(1.4));}
|
||||
100% { .transform(scale(1));}
|
||||
}
|
||||
@-webkit-keyframes popIn {.popInKeyFrames();}
|
||||
@-moz-keyframes popIn {.popInKeyFrames();}
|
||||
@-ms-keyframes popIn {.popInKeyFrames();}
|
||||
@-o-keyframes popIn {.popInKeyFrames();}
|
||||
@keyframes popIn {.popInKeyFrames();}
|
||||
}
|
||||
|
||||
.rumble(@duration : @defaultDuration, @easing : @defaultEasing){
|
||||
.createAnimation(rumble, @duration, @easing);
|
||||
.rumbleKeyFrames(){
|
||||
2% { .transform(translate(-0.5px, 1.5px) rotate(0.5deg)); }
|
||||
4% { .transform(translate(-0.5px, 1.5px) rotate(-0.5deg)); }
|
||||
6% { .transform(translate(-2.5px, -1.5px) rotate(0.5deg)); }
|
||||
8% { .transform(translate(-2.5px, -2.5px) rotate(-1.5deg)); }
|
||||
10% { .transform(translate(1.5px, 1.5px) rotate(-1.5deg)); }
|
||||
12% { .transform(translate(-2.5px, -0.5px) rotate(-0.5deg)); }
|
||||
14% { .transform(translate(1.5px, -2.5px) rotate(-0.5deg)); }
|
||||
16% { .transform(translate(0.5px, 1.5px) rotate(0.5deg)); }
|
||||
18% { .transform(translate(-2.5px, -0.5px) rotate(0.5deg)); }
|
||||
20% { .transform(translate(-0.5px, -0.5px) rotate(-1.5deg)); }
|
||||
22% { .transform(translate(-2.5px, -1.5px) rotate(-1.5deg)); }
|
||||
24% { .transform(translate(-1.5px, -2.5px) rotate(-1.5deg)); }
|
||||
26% { .transform(translate(0.5px, -0.5px) rotate(-1.5deg)); }
|
||||
28% { .transform(translate(-0.5px, -1.5px) rotate(-0.5deg)); }
|
||||
30% { .transform(translate(-2.5px, 1.5px) rotate(0.5deg)); }
|
||||
32% { .transform(translate(-2.5px, -2.5px) rotate(-0.5deg)); }
|
||||
34% { .transform(translate(-1.5px, 0.5px) rotate(-1.5deg)); }
|
||||
36% { .transform(translate(1.5px, -1.5px) rotate(-1.5deg)); }
|
||||
38% { .transform(translate(0.5px, -0.5px) rotate(-0.5deg)); }
|
||||
40% { .transform(translate(-0.5px, 0.5px) rotate(0.5deg)); }
|
||||
42% { .transform(translate(0.5px, -2.5px) rotate(-0.5deg)); }
|
||||
44% { .transform(translate(0.5px, -2.5px) rotate(-0.5deg)); }
|
||||
46% { .transform(translate(-1.5px, 1.5px) rotate(-1.5deg)); }
|
||||
48% { .transform(translate(0.5px, -2.5px) rotate(-0.5deg)); }
|
||||
50% { .transform(translate(-1.5px, -0.5px) rotate(-1.5deg)); }
|
||||
52% { .transform(translate(-2.5px, -0.5px) rotate(-1.5deg)); }
|
||||
54% { .transform(translate(1.5px, 0.5px) rotate(-1.5deg)); }
|
||||
56% { .transform(translate(0.5px, 0.5px) rotate(-1.5deg)); }
|
||||
58% { .transform(translate(0.5px, 1.5px) rotate(-0.5deg)); }
|
||||
60% { .transform(translate(-0.5px, -2.5px) rotate(-0.5deg)); }
|
||||
62% { .transform(translate(-2.5px, -1.5px) rotate(-0.5deg)); }
|
||||
64% { .transform(translate(-1.5px, 0.5px) rotate(0.5deg)); }
|
||||
66% { .transform(translate(0.5px, -0.5px) rotate(-1.5deg)); }
|
||||
68% { .transform(translate(-1.5px, -0.5px) rotate(-1.5deg)); }
|
||||
70% { .transform(translate(-0.5px, -2.5px) rotate(-1.5deg)); }
|
||||
72% { .transform(translate(-2.5px, -0.5px) rotate(-1.5deg)); }
|
||||
74% { .transform(translate(-2.5px, 0.5px) rotate(0.5deg)); }
|
||||
76% { .transform(translate(1.5px, -1.5px) rotate(-1.5deg)); }
|
||||
78% { .transform(translate(1.5px, -2.5px) rotate(0.5deg)); }
|
||||
80% { .transform(translate(-2.5px, -2.5px) rotate(-0.5deg)); }
|
||||
82% { .transform(translate(-2.5px, -1.5px) rotate(0.5deg)); }
|
||||
84% { .transform(translate(0.5px, -2.5px) rotate(-0.5deg)); }
|
||||
86% { .transform(translate(-2.5px, 0.5px) rotate(-0.5deg)); }
|
||||
88% { .transform(translate(-2.5px, -0.5px) rotate(-0.5deg)); }
|
||||
90% { .transform(translate(-1.5px, -1.5px) rotate(-1.5deg)); }
|
||||
92% { .transform(translate(-0.5px, -1.5px) rotate(-0.5deg)); }
|
||||
94% { .transform(translate(0.5px, -0.5px) rotate(-0.5deg)); }
|
||||
96% { .transform(translate(-2.5px, -2.5px) rotate(0.5deg)); }
|
||||
98% { .transform(translate(-0.5px, 1.5px) rotate(-0.5deg)); }
|
||||
}
|
||||
@-webkit-keyframes rumble {.rumbleKeyFrames();}
|
||||
@-moz-keyframes rumble {.rumbleKeyFrames();}
|
||||
@-ms-keyframes rumble {.rumbleKeyFrames();}
|
||||
@-o-keyframes rumble {.rumbleKeyFrames();}
|
||||
@keyframes rumble {.rumbleKeyFrames();}
|
||||
}
|
||||
23
shared/naturalCrit/styles/colors.less
Normal file
23
shared/naturalCrit/styles/colors.less
Normal file
@@ -0,0 +1,23 @@
|
||||
|
||||
@copyGrey : #333333;
|
||||
|
||||
@tealLight : #1ABC9C;
|
||||
@teal : #16A085;
|
||||
@greenLight : #2ECC71;
|
||||
@green : #27AE60;
|
||||
@blueLight : #3498DB;
|
||||
@blue : #2980B9;
|
||||
@purpleLight : #9B59B6;
|
||||
@purple : #8E44AD;
|
||||
@steelLight : #34495E;
|
||||
@steel : #2C3E50;
|
||||
@yellowLight : #F1C40F;
|
||||
@yellow : #F39C12;
|
||||
@orangeLight : #E67E22;
|
||||
@orange : #D35400;
|
||||
@redLight : #E74C3C;
|
||||
@red : #C0392B;
|
||||
@silverLight : #ECF0F1;
|
||||
@silver : #BDC3C7;
|
||||
@greyLight : #95A5A6;
|
||||
@grey : #7F8C8D;
|
||||
86
shared/naturalCrit/styles/elements.less
Normal file
86
shared/naturalCrit/styles/elements.less
Normal file
@@ -0,0 +1,86 @@
|
||||
|
||||
@containerWidth : 1000px;
|
||||
|
||||
html, body{
|
||||
position : relative;
|
||||
height : 100%;
|
||||
min-height : 100%;
|
||||
background-color : #eee;
|
||||
font-family : 'Lato', sans-serif;
|
||||
color : @copyGrey;
|
||||
}
|
||||
.container{
|
||||
position : relative;
|
||||
max-width : @containerWidth;
|
||||
margin : 0 auto;
|
||||
padding-right : 20px;
|
||||
padding-left : 20px;
|
||||
}
|
||||
h1{
|
||||
margin-top : 10px;
|
||||
margin-bottom : 15px;
|
||||
font-size : 2em;
|
||||
}
|
||||
h2{
|
||||
margin-top : 10px;
|
||||
margin-bottom : 15px;
|
||||
font-size : 1.5em;
|
||||
font-weight : 900;
|
||||
}
|
||||
h3{
|
||||
margin-top : 5px;
|
||||
margin-bottom : 7px;
|
||||
font-size : 1em;
|
||||
font-weight : 900;
|
||||
}
|
||||
p{
|
||||
margin-bottom : 1em;
|
||||
font-size : 16px;
|
||||
color : @copyGrey;
|
||||
line-height : 1.5em;
|
||||
}
|
||||
code{
|
||||
background-color : #F8F8F8;
|
||||
font-family : 'Courier', mono;
|
||||
color : black;
|
||||
white-space : pre;
|
||||
}
|
||||
a{
|
||||
color : inherit;
|
||||
}
|
||||
strong{
|
||||
font-weight : bold;
|
||||
}
|
||||
button{
|
||||
.button();
|
||||
}
|
||||
.button(@backgroundColor : @green){
|
||||
.animate(background-color);
|
||||
display : inline-block;
|
||||
padding : 0.6em 1.2em;
|
||||
cursor : pointer;
|
||||
background-color : @backgroundColor;
|
||||
font-family : "Lato", Helvetica, Arial, sans-serif;
|
||||
font-size : 15px;
|
||||
color : white;
|
||||
text-decoration : none;
|
||||
border : none;
|
||||
outline : none;
|
||||
&:hover{
|
||||
background-color : darken(@backgroundColor, 5%);
|
||||
}
|
||||
&:active{
|
||||
background-color : darken(@backgroundColor, 10%);
|
||||
}
|
||||
&:disabled{
|
||||
background-color : @silver !important;
|
||||
}
|
||||
}
|
||||
.iconButton(@backgroundColor : @green){
|
||||
padding : 0.6em;
|
||||
cursor : pointer;
|
||||
background-color : @backgroundColor;
|
||||
font-size : 14px;
|
||||
color : white;
|
||||
text-align : center;
|
||||
}
|
||||
2
shared/naturalCrit/styles/reset.less
Normal file
2
shared/naturalCrit/styles/reset.less
Normal file
@@ -0,0 +1,2 @@
|
||||
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
|
||||
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
|
||||
Reference in New Issue
Block a user