taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Simple login page styles refactor

stable
Xavier Julián 2014-09-23 17:18:46 +02:00
parent d950147659
commit 44fbdb51b3
4 changed files with 209 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app/images/logo-optimized.svg Normal file
View File

@ -0,0 +1,48 @@
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg4647" version="1.1" viewBox=".." preserveAspectRatio="xMidYMid meet">
<defs id="defs4649"/>
<metadata id="metadata4652"/>
<style>
.top {
transform-origin: 193px 164px;
-webkit-animation: rotate 4s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
-webkit-transform-origin: 50% 50%;
animation: rotate 6s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
}
.top rect {
fill-opacity: 1;
fill: #fff;
opacity: .6
}
@-webkit-keyframes rotate {
50% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
50% {
transform: rotate(360deg);
}
}
</style>
<g id="layer1" transform="translate(-307.87667,-465.22863)">
<g transform="matrix(0.135464,0,0,0.135464,307.268,457.53699)" id="layer1-1" display="inline">
<g transform="matrix(1.1783562,0,0,1.1783562,2450.4425,-1298.9778)" id="g6368" display="inline">
<g id="g6358" transform="translate(-905.09668,1190.7678)">
<g class="bottom">
<rect transform="matrix(-0.1406648,0.99005728,-0.99005728,0.14066481,0,0)" y="453.99191" x="19.390564" height="263.03665" width="263.03665" id="rect6306" style="fill-opacity:1;fill:#fff;opacity:0.7"/>
<rect transform="matrix(0.1406648,-0.99005728,0.99005728,-0.14066481,0,0)" y="-980.32068" x="-545.35144" height="263.03665" width="263.03665" id="rect6298" style="fill-opacity:1;fill:#fff;opacity:0.5"/>
<rect transform="matrix(0.99005728,0.1406648,0.14066481,0.99005728,0,0)" y="239.36371" x="-1091.8109" height="263.03665" width="263.03665" id="rect6290" style="fill-opacity:1;fill:#fff;opacity:0.7"/>
<rect transform="matrix(-0.99005728,-0.1406648,-0.14066481,-0.99005728,0,0)" y="-765.04388" x="565.75031" height="263.03665" width="263.03665" id="rect6302" style="fill-opacity:1;fill:#fff;opacity:0.5"/>
</g>
<g class="top">
<rect id="rect6300" width="263.03665" height="263.03665" x="123.24944" y="-1124.9786" transform="matrix(-0.60061118,-0.79954125,0.60061117,-0.79954125,0,0)" />
<rect id="rect6304" width="263.03665" height="263.03665" x="522.39832" y="-110.13736" transform="matrix(-0.79954125,0.60061118,-0.79954125,-0.60061117,0,0)" />
<rect id="rect6288" width="263.03665" height="263.03665" x="-649.58295" y="599.28192" transform="matrix(0.60061118,0.79954125,-0.60061118,0.79954125,0,0)" />
<rect id="rect6296" width="263.03665" height="263.03665" x="-1048.9221" y="-415.20911" transform="matrix(0.79954125,-0.60061118,0.79954125,0.60061117,0,0)" />
</g>
</g>
<rect id="rect6286" width="141.42136" height="141.42136" x="-130.17999" y="2210.6592" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" style="fill-opacity:1;fill:#fff"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

147
app/images/logo.svg Normal file
View File

@ -0,0 +1,147 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="134.24667"
height="134.26709"
id="svg4647"
version="1.1"
inkscape:version="0.48.5 r10040"
sodipodi:docname="New document 13">
<defs
id="defs4649" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="67.123334"
inkscape:cy="67.133542"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="501"
inkscape:window-height="456"
inkscape:window-x="1920"
inkscape:window-y="590"
inkscape:window-maximized="0" />
<metadata
id="metadata4652">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-307.87667,-465.22863)">
<g
style="display:inline"
transform="matrix(0.135464,0,0,0.135464,307.268,457.53699)"
id="layer1-1"
inkscape:label="Capa 1">
<g
transform="matrix(1.1783562,0,0,1.1783562,2450.4425,-1298.9778)"
id="g6368"
style="display:inline">
<g
id="g6358"
transform="translate(-905.09668,1190.7678)">
<rect
transform="matrix(-0.1406648,0.99005728,-0.99005728,0.14066481,0,0)"
y="453.99191"
x="19.390564"
height="263.03665"
width="263.03665"
id="rect6306"
style="opacity:0.7;fill:#ffffff;fill-opacity:1;stroke:none" />
<rect
transform="matrix(0.1406648,-0.99005728,0.99005728,-0.14066481,0,0)"
y="-980.32068"
x="-545.35144"
height="263.03665"
width="263.03665"
id="rect6298"
style="opacity:0.5;fill:#ffffff;fill-opacity:1;stroke:none" />
<rect
transform="matrix(0.99005728,0.1406648,0.14066481,0.99005728,0,0)"
y="239.36371"
x="-1091.8109"
height="263.03665"
width="263.03665"
id="rect6290"
style="opacity:0.7;fill:#ffffff;fill-opacity:1;stroke:none" />
<rect
transform="matrix(-0.99005728,-0.1406648,-0.14066481,-0.99005728,0,0)"
y="-765.04388"
x="565.75031"
height="263.03665"
width="263.03665"
id="rect6302"
style="opacity:0.5;fill:#ffffff;fill-opacity:1;stroke:none" />
<rect
style="opacity:0.4;fill:#ffffff;fill-opacity:1;stroke:none"
id="rect6300"
width="263.03665"
height="263.03665"
x="123.24944"
y="-1124.9786"
transform="matrix(-0.60061118,-0.79954125,0.60061117,-0.79954125,0,0)" />
<rect
style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:none"
id="rect6304"
width="263.03665"
height="263.03665"
x="522.39832"
y="-110.13736"
transform="matrix(-0.79954125,0.60061118,-0.79954125,-0.60061117,0,0)" />
<rect
style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none"
id="rect6288"
width="263.03665"
height="263.03665"
x="-649.58295"
y="599.28192"
transform="matrix(0.60061118,0.79954125,-0.60061118,0.79954125,0,0)" />
<rect
style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:none"
id="rect6296"
width="263.03665"
height="263.03665"
x="-1048.9221"
y="-415.20911"
transform="matrix(0.79954125,-0.60061118,0.79954125,0.60061117,0,0)" />
</g>
<rect
style="fill:#ffffff;fill-opacity:1;stroke:none"
id="rect6286"
width="141.42136"
height="141.42136"
x="-130.17999"
y="2210.6592"
transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" />
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

5
app/partials/login.jade
View File

@ -7,8 +7,9 @@ block content
div.wrapper div.wrapper
div.login-main div.login-main
div.login-container div.login-container
h1.logo object.logo-svg(type="image/svg+xml", data="/images/logo-optimized.svg")
img(src="/images/logo.png", alt="TAIGA") img(src="/images/logo.png", alt="TAIGA")
p.tagline Your agile, free, and open source project management tool h1.logo Taiga
h2.tagline ENJOY YOUR PROJECT,FINALLY
include views/modules/login-form include views/modules/login-form

16
app/styles/layout/login.scss
View File

@ -14,17 +14,23 @@
top: 0; top: 0;
z-index: 999; z-index: 999;
fieldset { fieldset {
margin-bottom: 1rem; margin-bottom: .5rem;
} }
.login-container { .login-container {
@include flex-basis(400px); @include flex-basis(400px);
} }
.logo-svg {
padding: 0 30%;
text-align: center;
width: 100%;
}
.logo { .logo {
@extend %xxlarge;
@extend %title;
color: $white;
margin-bottom: 1rem; margin-bottom: 1rem;
text-align: center; text-align: center;
img {
padding: 0 30%;
}
} }
.tagline { .tagline {
@extend %xlarge; @extend %xlarge;
@ -36,7 +42,7 @@
text-transform: uppercase; text-transform: uppercase;
} }
form { form {
margin-bottom: 2rem; margin-bottom: 1rem;
} }
input { input {
background: $white; background: $white;