summaryrefslogtreecommitdiff
path: root/web-ui
diff options
context:
space:
mode:
authorGabriel Albo <gabriel@albo.com.br>2016-03-01 15:17:54 -0300
committerGabriel Albo <gabriel@albo.com.br>2016-03-01 15:17:54 -0300
commita8de59132163718fcb1fba47b5e396dcac7355b6 (patch)
tree10dd83024c44bee8527c33f29916fb5d511d45c0 /web-ui
parent5261ed0307c5032004f2b9d3926ca19832ed28bf (diff)
Adding new svg and dummy animation
Issue #238
Diffstat (limited to 'web-ui')
-rw-r--r--web-ui/app/index.html48
-rw-r--r--web-ui/app/scss/_alerts.scss2
-rw-r--r--web-ui/app/scss/_mixins.scss31
3 files changed, 60 insertions, 21 deletions
diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index 2d35662c..d297b28c 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -19,27 +19,33 @@
<section id="left-pane" class="left-off-canvas-menu">
<a class="left-off-canvas-logo side-nav-toggle" href="#">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- viewBox="30.4 316.8 555.2 155.2" enable-background="new 30.4 316.8 555.2 155.2" xml:space="preserve">
- <g>
- <path fill="#3E3B38" d="M30.4,355.5v77.8L98.9,472l68.5-38.7v-77.8l-68.5-38.7L30.4,355.5z M96,443.9l-39.9-22v-47.7L96,396.9
- V443.9z M141.2,421.8l-39.4,22v-47l39.4-23C141.2,373.8,141.2,421.8,141.2,421.8z M141.2,367.5l-42.4,25.2l-42.8-25.2l42.8-23
- L141.2,367.5z"/>
- <path fill="#3E3B38" d="M214.9,363.1h-21.8v64.6h14.7v-24h7.1c12.7,0,22-7.3,22-20.8C237,369.7,227.4,363.1,214.9,363.1z M212,392
- h-4.2v-17.1h4.2c5.9,0,11.3,2,11.3,8.6S217.9,392,212,392z"/>
- <rect x="241.9" y="363.1" fill="#3E3B38" width="14.7" height="64.6"/>
- <polygon fill="#3E3B38" points="320.7,363.1 302.3,363.1 290.3,380.7 278.3,363.1 261,363.1 281.3,392.9 259.2,427.7 277.6,427.7
- 290.3,405.7 303.1,427.7 322.2,427.7 299.4,392.9 "/>
- <polygon fill="#3E3B38" points="324.6,427.7 361.6,427.7 361.6,414.7 339.3,414.7 339.3,401.8 360.6,401.8 360.6,388.8
- 339.3,388.8 339.3,376 361.6,376 361.6,363.1 324.6,363.1 "/>
- <path fill="#3E3B38" d="M416.6,363.1l-20.8,51.7h-14.4v-51.7h-14.7v64.6h24h13h2.9l4.9-13H436l4.9,13h15.9l-26.2-64.6H416.6z
- M416.2,401.8l7.1-18.8h0.2l7.1,18.8H416.2z"/>
- <polygon fill="#3E3B38" points="444.1,376 459.5,376 459.5,427.7 474.2,427.7 474.2,376 489.6,376 489.6,363.1 444.1,363.1 "/>
- <polygon fill="#3E3B38" points="494.5,427.7 531.5,427.7 531.5,414.7 509.4,414.7 509.4,401.8 530.7,401.8 530.7,388.8
- 509.4,388.8 509.4,376 531.5,376 531.5,363.1 494.5,363.1 "/>
- <path fill="#3E3b38" d="M553,363.1h-16.2v64.6H553c17.9,0,32.6-13.5,32.6-32.3C585.6,376.5,570.6,363.1,553,363.1z M553.5,414.5
- h-2.2v-38.2h2.2c11,0,18.4,8.3,18.4,19.1C571.9,406.2,564.5,414.5,553.5,414.5z"/>
- </g>
- </svg>
+ viewBox="30.4 627.3 612 171.1" enable-background="new 30.4 627.3 612 171.1" xml:space="preserve">
+<g>
+ <path fill="#3E3B38" d="M30.4,669.9v85.8l75.5,42.7l75.5-42.7v-85.8l-75.5-42.7L30.4,669.9z M102.7,767.4l-44-24.3v-52.6l44,25
+ V767.4z M152.5,743l-43.4,24.3v-51.8l43.4-25.4V743z M152.5,683.1l-46.7,27.8l-47.2-27.8l47.2-25.4L152.5,683.1z"/>
+ <path fill="#3E3B38" d="M233.8,678.3h-24v71.2h16.2v-26.5h7.8c14,0,24.3-8,24.3-22.9C258.1,685.6,247.6,678.3,233.8,678.3z
+ M230.6,710.2h-4.6v-18.8h4.6c6.5,0,12.5,2.2,12.5,9.5C243,708.1,237.1,710.2,230.6,710.2z"/>
+ <rect x="263.5" y="678.3" fill="#3E3B38" width="16.2" height="71.2"/>
+ <polygon fill="#3E3B38" points="350.4,678.3 330.1,678.3 316.9,697.7 303.7,678.3 284.6,678.3 307,711.1 282.6,749.5 302.9,749.5
+ 316.9,725.3 331,749.5 352.1,749.5 326.9,711.1 "/>
+ <polygon fill="#3E3B38" points="354.7,749.5 395.5,749.5 395.5,735.2 370.9,735.2 370.9,721 394.4,721 394.4,706.6 370.9,706.6
+ 370.9,692.5 395.5,692.5 395.5,678.3 354.7,678.3 "/>
+ <path fill="#3E3B38" d="M456.1,678.3l-22.9,57h-15.9v-57h-16.2v71.2h26.5h14.3h3.2l5.4-14.3h27l5.4,14.3h17.5l-28.9-71.2H456.1z
+ M455.7,721l7.8-20.7h0.2l7.8,20.7H455.7z"/>
+ <polygon fill="#3E3B38" points="486.4,692.5 503.4,692.5 503.4,749.5 519.6,749.5 519.6,692.5 536.6,692.5 536.6,678.3
+ 486.4,678.3 "/>
+ <polygon fill="#3E3B38" points="542,749.5 582.8,749.5 582.8,735.2 558.4,735.2 558.4,721 581.9,721 581.9,706.6 558.4,706.6
+ 558.4,692.5 582.8,692.5 582.8,678.3 542,678.3 "/>
+ <path fill="#3E3B38" d="M606.5,678.3h-17.9v71.2h17.9c19.7,0,35.9-14.9,35.9-35.6C642.4,693.1,625.9,678.3,606.5,678.3z M607,735
+ h-2.4v-42.1h2.4c12.1,0,20.3,9.1,20.3,21.1C627.3,725.8,619.1,735,607,735z"/>
+ </g>
+ <polygon id="clock1" class="logo-part" fill="#3E3B38" points="105.8,657.8 105.8,628 105.8,627.3 181.4,669.9 152.5,683.1 "/>
+ <polygon id="clock2" class="logo-part" fill="#3E3B38" points="152.5,683.1 181.4,669.9 181.4,755.7 152.5,743 "/>
+ <polygon id="clock3" class="logo-part" fill="#3E3B38" points="105.9,798.3 105.9,769 152.5,743 181.4,755.7 "/>
+ <polygon id="clock4" class="logo-part" fill="#3E3B38" points="58.7,743.1 105.9,769 105.9,798.3 30.4,755.7 "/>
+ <polygon id="clock5" class="logo-part" fill="#3E3B38" points="30.4,669.9 58.6,683.1 58.7,743.1 30.4,755.7 "/>
+ <polygon id="clock6" class="logo-part" fill="#3E3B38" points="105.8,628 105.8,657.8 58.6,683.1 30.4,669.9 105.8,627.3 "/>
+ </svg>
</a>
<a class="side-nav-toggle side-nav-toggle-icon" href="#">
<i class="toggle fa fa-navicon"></i>
diff --git a/web-ui/app/scss/_alerts.scss b/web-ui/app/scss/_alerts.scss
index cfb31cbe..8d7396fc 100644
--- a/web-ui/app/scss/_alerts.scss
+++ b/web-ui/app/scss/_alerts.scss
@@ -21,3 +21,5 @@
}
}
}
+
+@include logo;
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index a623366d..c4cc234b 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -308,4 +308,35 @@
}
}
+@mixin logo {
+ @keyframes hideshow {
+ 0% { fill: #2ba6cb; }
+ 25% { opacity: 1; }
+ 100% { opacity: 0; }
+}
+
+.logo-part {
+ animation: hideshow 0.6s ease infinite;
+ opacity: 1;
+
+ &:nth-child(2) {
+ opacity: 0;
+ animation-delay: 0.1s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: 0.2s;
+ }
+ &:nth-child(4) {
+ animation-delay: 0.3s;
+ }
+ &:nth-child(5) {
+ animation-delay: 0.4s;
+ }
+ &:nth-child(6) {
+ animation-delay: 0.5s;
+ }
+}
+}
+
@include tt-hint;