Stub new design
|
@ -0,0 +1 @@
|
|||
node_modules
|
After Width: | Height: | Size: 369 B |
After Width: | Height: | Size: 669 B |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 4.0 KiB |
After Width: | Height: | Size: 5.2 KiB |
After Width: | Height: | Size: 5.0 KiB |
After Width: | Height: | Size: 96 B |
After Width: | Height: | Size: 120 B |
After Width: | Height: | Size: 987 B |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 2.0 KiB |
|
@ -0,0 +1,570 @@
|
|||
/*
|
||||
* Swipe 2.0
|
||||
*
|
||||
* Brad Birdsall
|
||||
* Copyright 2013, MIT License
|
||||
*
|
||||
*/
|
||||
|
||||
function Swipe(container, options) {
|
||||
|
||||
"use strict";
|
||||
|
||||
// utilities
|
||||
var noop = function() {}; // simple no operation function
|
||||
var offloadFn = function(fn) { setTimeout(fn || noop, 0) }; // offload a functions execution
|
||||
|
||||
// check browser capabilities
|
||||
var browser = {
|
||||
addEventListener: !!window.addEventListener,
|
||||
touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
|
||||
transitions: (function(temp) {
|
||||
var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition'];
|
||||
for ( var i in props ) if (temp.style[ props[i] ] !== undefined) return true;
|
||||
return false;
|
||||
})(document.createElement('swipe'))
|
||||
};
|
||||
|
||||
// quit if no root element
|
||||
if (!container) return;
|
||||
var element = container.children[0];
|
||||
var slides, slidePos, width, length;
|
||||
options = options || {};
|
||||
var index = parseInt(options.startSlide, 10) || 0;
|
||||
var speed = options.speed || 300;
|
||||
options.continuous = options.continuous !== undefined ? options.continuous : true;
|
||||
|
||||
function setup() {
|
||||
|
||||
// cache slides
|
||||
slides = element.children;
|
||||
length = slides.length;
|
||||
|
||||
// set continuous to false if only one slide
|
||||
if (slides.length < 2) options.continuous = false;
|
||||
|
||||
//special case if two slides
|
||||
if (browser.transitions && options.continuous && slides.length < 3) {
|
||||
element.appendChild(slides[0].cloneNode(true));
|
||||
element.appendChild(element.children[1].cloneNode(true));
|
||||
slides = element.children;
|
||||
}
|
||||
|
||||
// create an array to store current positions of each slide
|
||||
slidePos = new Array(slides.length);
|
||||
|
||||
// determine width of each slide
|
||||
width = container.getBoundingClientRect().width || container.offsetWidth;
|
||||
|
||||
element.style.width = (slides.length * width) + 'px';
|
||||
|
||||
// stack elements
|
||||
var pos = slides.length;
|
||||
while(pos--) {
|
||||
|
||||
var slide = slides[pos];
|
||||
|
||||
slide.style.width = width + 'px';
|
||||
slide.setAttribute('data-index', pos);
|
||||
|
||||
if (browser.transitions) {
|
||||
slide.style.left = (pos * -width) + 'px';
|
||||
move(pos, index > pos ? -width : (index < pos ? width : 0), 0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// reposition elements before and after index
|
||||
if (options.continuous && browser.transitions) {
|
||||
move(circle(index-1), -width, 0);
|
||||
move(circle(index+1), width, 0);
|
||||
}
|
||||
|
||||
if (!browser.transitions) element.style.left = (index * -width) + 'px';
|
||||
|
||||
container.style.visibility = 'visible';
|
||||
|
||||
}
|
||||
|
||||
function prev() {
|
||||
|
||||
if (options.continuous) slide(index-1);
|
||||
else if (index) slide(index-1);
|
||||
|
||||
}
|
||||
|
||||
function next() {
|
||||
|
||||
if (options.continuous) slide(index+1);
|
||||
else if (index < slides.length - 1) slide(index+1);
|
||||
|
||||
}
|
||||
|
||||
function circle(index) {
|
||||
|
||||
// a simple positive modulo using slides.length
|
||||
return (slides.length + (index % slides.length)) % slides.length;
|
||||
|
||||
}
|
||||
|
||||
function slide(to, slideSpeed) {
|
||||
|
||||
// do nothing if already on requested slide
|
||||
if (index == to) return;
|
||||
|
||||
if (browser.transitions) {
|
||||
|
||||
var direction = Math.abs(index-to) / (index-to); // 1: backward, -1: forward
|
||||
|
||||
// get the actual position of the slide
|
||||
if (options.continuous) {
|
||||
var natural_direction = direction;
|
||||
direction = -slidePos[circle(to)] / width;
|
||||
|
||||
// if going forward but to < index, use to = slides.length + to
|
||||
// if going backward but to > index, use to = -slides.length + to
|
||||
if (direction !== natural_direction) to = -direction * slides.length + to;
|
||||
|
||||
}
|
||||
|
||||
var diff = Math.abs(index-to) - 1;
|
||||
|
||||
// move all the slides between index and to in the right direction
|
||||
while (diff--) move( circle((to > index ? to : index) - diff - 1), width * direction, 0);
|
||||
|
||||
to = circle(to);
|
||||
|
||||
move(index, width * direction, slideSpeed || speed);
|
||||
move(to, 0, slideSpeed || speed);
|
||||
|
||||
if (options.continuous) move(circle(to - direction), -(width * direction), 0); // we need to get the next in place
|
||||
|
||||
} else {
|
||||
|
||||
to = circle(to);
|
||||
animate(index * -width, to * -width, slideSpeed || speed);
|
||||
//no fallback for a circular continuous if the browser does not accept transitions
|
||||
}
|
||||
|
||||
index = to;
|
||||
offloadFn(options.callback && options.callback(index, slides[index]));
|
||||
}
|
||||
|
||||
function move(index, dist, speed) {
|
||||
|
||||
translate(index, dist, speed);
|
||||
slidePos[index] = dist;
|
||||
|
||||
}
|
||||
|
||||
function translate(index, dist, speed) {
|
||||
|
||||
var slide = slides[index];
|
||||
var style = slide && slide.style;
|
||||
|
||||
if (!style) return;
|
||||
|
||||
style.webkitTransitionDuration =
|
||||
style.MozTransitionDuration =
|
||||
style.msTransitionDuration =
|
||||
style.OTransitionDuration =
|
||||
style.transitionDuration = speed + 'ms';
|
||||
|
||||
style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';
|
||||
style.msTransform =
|
||||
style.MozTransform =
|
||||
style.OTransform = 'translateX(' + dist + 'px)';
|
||||
|
||||
}
|
||||
|
||||
function animate(from, to, speed) {
|
||||
|
||||
// if not an animation, just reposition
|
||||
if (!speed) {
|
||||
|
||||
element.style.left = to + 'px';
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
var start = +new Date;
|
||||
|
||||
var timer = setInterval(function() {
|
||||
|
||||
var timeElap = +new Date - start;
|
||||
|
||||
if (timeElap > speed) {
|
||||
|
||||
element.style.left = to + 'px';
|
||||
|
||||
if (delay) begin();
|
||||
|
||||
options.transitionEnd && options.transitionEnd.call(event, index, slides[index]);
|
||||
|
||||
clearInterval(timer);
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
element.style.left = (( (to - from) * (Math.floor((timeElap / speed) * 100) / 100) ) + from) + 'px';
|
||||
|
||||
}, 4);
|
||||
|
||||
}
|
||||
|
||||
// setup auto slideshow
|
||||
var delay = options.auto || 0;
|
||||
var interval;
|
||||
|
||||
function begin() {
|
||||
|
||||
interval = setTimeout(next, delay);
|
||||
|
||||
}
|
||||
|
||||
function stop() {
|
||||
|
||||
delay = 0;
|
||||
clearTimeout(interval);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// setup initial vars
|
||||
var start = {};
|
||||
var delta = {};
|
||||
var isScrolling;
|
||||
|
||||
// setup event capturing
|
||||
var events = {
|
||||
|
||||
handleEvent: function(event) {
|
||||
|
||||
switch (event.type) {
|
||||
case 'touchstart': this.start(event); break;
|
||||
case 'touchmove': this.move(event); break;
|
||||
case 'touchend': offloadFn(this.end(event)); break;
|
||||
case 'webkitTransitionEnd':
|
||||
case 'msTransitionEnd':
|
||||
case 'oTransitionEnd':
|
||||
case 'otransitionend':
|
||||
case 'transitionend': offloadFn(this.transitionEnd(event)); break;
|
||||
case 'resize': offloadFn(setup); break;
|
||||
}
|
||||
|
||||
if (options.stopPropagation) event.stopPropagation();
|
||||
|
||||
},
|
||||
start: function(event) {
|
||||
|
||||
var touches = event.touches[0];
|
||||
|
||||
// measure start values
|
||||
start = {
|
||||
|
||||
// get initial touch coords
|
||||
x: touches.pageX,
|
||||
y: touches.pageY,
|
||||
|
||||
// store time to determine touch duration
|
||||
time: +new Date
|
||||
|
||||
};
|
||||
|
||||
// used for testing first move event
|
||||
isScrolling = undefined;
|
||||
|
||||
// reset delta and end measurements
|
||||
delta = {};
|
||||
|
||||
// attach touchmove and touchend listeners
|
||||
element.addEventListener('touchmove', this, false);
|
||||
element.addEventListener('touchend', this, false);
|
||||
|
||||
},
|
||||
move: function(event) {
|
||||
|
||||
// ensure swiping with one touch and not pinching
|
||||
if ( event.touches.length > 1 || event.scale && event.scale !== 1) return
|
||||
|
||||
if (options.disableScroll) event.preventDefault();
|
||||
|
||||
var touches = event.touches[0];
|
||||
|
||||
// measure change in x and y
|
||||
delta = {
|
||||
x: touches.pageX - start.x,
|
||||
y: touches.pageY - start.y
|
||||
}
|
||||
|
||||
// determine if scrolling test has run - one time test
|
||||
if ( typeof isScrolling == 'undefined') {
|
||||
isScrolling = !!( isScrolling || Math.abs(delta.x) < Math.abs(delta.y) );
|
||||
}
|
||||
|
||||
// if user is not trying to scroll vertically
|
||||
if (!isScrolling) {
|
||||
|
||||
// prevent native scrolling
|
||||
event.preventDefault();
|
||||
|
||||
// stop slideshow
|
||||
stop();
|
||||
|
||||
// increase resistance if first or last slide
|
||||
if (options.continuous) { // we don't add resistance at the end
|
||||
|
||||
translate(circle(index-1), delta.x + slidePos[circle(index-1)], 0);
|
||||
translate(index, delta.x + slidePos[index], 0);
|
||||
translate(circle(index+1), delta.x + slidePos[circle(index+1)], 0);
|
||||
|
||||
} else {
|
||||
|
||||
delta.x =
|
||||
delta.x /
|
||||
( (!index && delta.x > 0 // if first slide and sliding left
|
||||
|| index == slides.length - 1 // or if last slide and sliding right
|
||||
&& delta.x < 0 // and if sliding at all
|
||||
) ?
|
||||
( Math.abs(delta.x) / width + 1 ) // determine resistance level
|
||||
: 1 ); // no resistance if false
|
||||
|
||||
// translate 1:1
|
||||
translate(index-1, delta.x + slidePos[index-1], 0);
|
||||
translate(index, delta.x + slidePos[index], 0);
|
||||
translate(index+1, delta.x + slidePos[index+1], 0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
end: function(event) {
|
||||
|
||||
// measure duration
|
||||
var duration = +new Date - start.time;
|
||||
|
||||
// determine if slide attempt triggers next/prev slide
|
||||
var isValidSlide =
|
||||
Number(duration) < 250 // if slide duration is less than 250ms
|
||||
&& Math.abs(delta.x) > 20 // and if slide amt is greater than 20px
|
||||
|| Math.abs(delta.x) > width/2; // or if slide amt is greater than half the width
|
||||
|
||||
// determine if slide attempt is past start and end
|
||||
var isPastBounds =
|
||||
!index && delta.x > 0 // if first slide and slide amt is greater than 0
|
||||
|| index == slides.length - 1 && delta.x < 0; // or if last slide and slide amt is less than 0
|
||||
|
||||
if (options.continuous) isPastBounds = false;
|
||||
|
||||
// determine direction of swipe (true:right, false:left)
|
||||
var direction = delta.x < 0;
|
||||
|
||||
// if not scrolling vertically
|
||||
if (!isScrolling) {
|
||||
|
||||
if (isValidSlide && !isPastBounds) {
|
||||
|
||||
if (direction) {
|
||||
|
||||
if (options.continuous) { // we need to get the next in this direction in place
|
||||
|
||||
move(circle(index-1), -width, 0);
|
||||
move(circle(index+2), width, 0);
|
||||
|
||||
} else {
|
||||
move(index-1, -width, 0);
|
||||
}
|
||||
|
||||
move(index, slidePos[index]-width, speed);
|
||||
move(circle(index+1), slidePos[circle(index+1)]-width, speed);
|
||||
index = circle(index+1);
|
||||
|
||||
} else {
|
||||
if (options.continuous) { // we need to get the next in this direction in place
|
||||
|
||||
move(circle(index+1), width, 0);
|
||||
move(circle(index-2), -width, 0);
|
||||
|
||||
} else {
|
||||
move(index+1, width, 0);
|
||||
}
|
||||
|
||||
move(index, slidePos[index]+width, speed);
|
||||
move(circle(index-1), slidePos[circle(index-1)]+width, speed);
|
||||
index = circle(index-1);
|
||||
|
||||
}
|
||||
|
||||
options.callback && options.callback(index, slides[index]);
|
||||
|
||||
} else {
|
||||
|
||||
if (options.continuous) {
|
||||
|
||||
move(circle(index-1), -width, speed);
|
||||
move(index, 0, speed);
|
||||
move(circle(index+1), width, speed);
|
||||
|
||||
} else {
|
||||
|
||||
move(index-1, -width, speed);
|
||||
move(index, 0, speed);
|
||||
move(index+1, width, speed);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// kill touchmove and touchend event listeners until touchstart called again
|
||||
element.removeEventListener('touchmove', events, false)
|
||||
element.removeEventListener('touchend', events, false)
|
||||
|
||||
},
|
||||
transitionEnd: function(event) {
|
||||
|
||||
if (parseInt(event.target.getAttribute('data-index'), 10) == index) {
|
||||
|
||||
if (delay) begin();
|
||||
|
||||
options.transitionEnd && options.transitionEnd.call(event, index, slides[index]);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// trigger setup
|
||||
setup();
|
||||
|
||||
// start auto slideshow if applicable
|
||||
if (delay) begin();
|
||||
|
||||
|
||||
// add event listeners
|
||||
if (browser.addEventListener) {
|
||||
|
||||
// set touchstart event on element
|
||||
if (browser.touch) element.addEventListener('touchstart', events, false);
|
||||
|
||||
if (browser.transitions) {
|
||||
element.addEventListener('webkitTransitionEnd', events, false);
|
||||
element.addEventListener('msTransitionEnd', events, false);
|
||||
element.addEventListener('oTransitionEnd', events, false);
|
||||
element.addEventListener('otransitionend', events, false);
|
||||
element.addEventListener('transitionend', events, false);
|
||||
}
|
||||
|
||||
// set resize event on window
|
||||
window.addEventListener('resize', events, false);
|
||||
|
||||
} else {
|
||||
|
||||
window.onresize = function () { setup() }; // to play nice with old IE
|
||||
|
||||
}
|
||||
|
||||
// expose the Swipe API
|
||||
return {
|
||||
setup: function() {
|
||||
|
||||
setup();
|
||||
|
||||
},
|
||||
slide: function(to, speed) {
|
||||
|
||||
// cancel slideshow
|
||||
stop();
|
||||
|
||||
slide(to, speed);
|
||||
|
||||
},
|
||||
prev: function() {
|
||||
|
||||
// cancel slideshow
|
||||
stop();
|
||||
|
||||
prev();
|
||||
|
||||
},
|
||||
next: function() {
|
||||
|
||||
// cancel slideshow
|
||||
stop();
|
||||
|
||||
next();
|
||||
|
||||
},
|
||||
stop: function() {
|
||||
|
||||
// cancel slideshow
|
||||
stop();
|
||||
|
||||
},
|
||||
getPos: function() {
|
||||
|
||||
// return current index position
|
||||
return index;
|
||||
|
||||
},
|
||||
getNumSlides: function() {
|
||||
|
||||
// return total number of slides
|
||||
return length;
|
||||
},
|
||||
kill: function() {
|
||||
|
||||
// cancel slideshow
|
||||
stop();
|
||||
|
||||
// reset element
|
||||
element.style.width = '';
|
||||
element.style.left = '';
|
||||
|
||||
// reset slides
|
||||
var pos = slides.length;
|
||||
while(pos--) {
|
||||
|
||||
var slide = slides[pos];
|
||||
slide.style.width = '';
|
||||
slide.style.left = '';
|
||||
|
||||
if (browser.transitions) translate(pos, 0, 0);
|
||||
|
||||
}
|
||||
|
||||
// removed event listeners
|
||||
if (browser.addEventListener) {
|
||||
|
||||
// remove current event listeners
|
||||
element.removeEventListener('touchstart', events, false);
|
||||
element.removeEventListener('webkitTransitionEnd', events, false);
|
||||
element.removeEventListener('msTransitionEnd', events, false);
|
||||
element.removeEventListener('oTransitionEnd', events, false);
|
||||
element.removeEventListener('otransitionend', events, false);
|
||||
element.removeEventListener('transitionend', events, false);
|
||||
window.removeEventListener('resize', events, false);
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
window.onresize = null;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
if ( window.jQuery || window.Zepto ) {
|
||||
(function($) {
|
||||
$.fn.Swipe = function(params) {
|
||||
return this.each(function() {
|
||||
$(this).data('Swipe', new Swipe($(this)[0], params));
|
||||
});
|
||||
}
|
||||
})( window.jQuery || window.Zepto )
|
||||
}
|
|
@ -0,0 +1 @@
|
|||
@import './application/**/*';
|
|
@ -0,0 +1,10 @@
|
|||
$container-width: 960px;
|
||||
$tablet-width: 768px;
|
||||
$mobile-width: 414px;
|
||||
$footer-height: 60px;
|
||||
|
||||
$desktop-indent: 30px;
|
||||
$tablet-indent: 20px;
|
||||
$mobile-indent: 15px;
|
||||
|
||||
$input-height: 40px;
|
|
@ -0,0 +1,10 @@
|
|||
@mixin image-2x($image, $width: 100%, $height: 100%) {
|
||||
@media (min--moz-device-pixel-ratio: 1.3),
|
||||
(-o-min-device-pixel-ratio: 2.6/2),
|
||||
(-webkit-min-device-pixel-ratio: 1.3),
|
||||
(min-device-pixel-ratio: 1.3),
|
||||
(min-resolution: 1.3dppx) {
|
||||
background-image: url($image);
|
||||
background-size: $width $height;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,66 @@
|
|||
%full-width {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
%logos {
|
||||
@include image-2x('../images/logos@2x.png', 149px, 59px);
|
||||
display: block;
|
||||
background-image: url(../images/logos.png);
|
||||
}
|
||||
|
||||
%white-block {
|
||||
transition: 0.3s box-shadow;
|
||||
margin-bottom: $desktop-indent;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 10px 0 fade-out(#326cb5, 0.92);
|
||||
padding: $desktop-indent;
|
||||
background-color: #fff;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-bottom: $tablet-indent;
|
||||
padding: $tablet-indent;
|
||||
}
|
||||
}
|
||||
|
||||
%form-el {
|
||||
transition: 0.3s background-color,
|
||||
0.3s border-color;
|
||||
width: 100%;
|
||||
height: $input-height;
|
||||
outline: none;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #e5eef9;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
%button {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
transition: 0.3s opacity;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
text-transform: uppercase;
|
||||
line-height: 36px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&_icon {
|
||||
padding: 0 15px 0 33px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left 15px center;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v14/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
color: #444;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
|
@ -0,0 +1,104 @@
|
|||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: $footer-height + 10px;
|
||||
background-color: #f4f9ff;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
padding-bottom: $footer-height + 30px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #08b3f2;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #444;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 10px 0 30px;
|
||||
border: 0;
|
||||
background-color: #e5eef9;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: $container-width;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media screen and (max-width: $container-width) {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 30px;
|
||||
color: #38454f;
|
||||
font-size: 30px;
|
||||
font-weight: normal;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
%_button {
|
||||
@extend %button;
|
||||
border-radius: 2px;
|
||||
padding: 0 13px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
|
@ -0,0 +1,121 @@
|
|||
.ballots {
|
||||
.title {
|
||||
margin-bottom: 50px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-bottom: $tablet-indent;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-bottom: $mobile-indent;
|
||||
}
|
||||
}
|
||||
|
||||
&-i {
|
||||
@extend %white-block;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 11px 11px 0 fade-out(#326cb5, 0.85);
|
||||
}
|
||||
|
||||
&-scale {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: $desktop-indent;
|
||||
border-top: 1px solid #e5eef9;
|
||||
padding: $desktop-indent 0;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: block;
|
||||
margin-top: $tablet-indent;
|
||||
padding: $tablet-indent 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-top: $mobile-indent;
|
||||
padding: $mobile-indent 0;
|
||||
}
|
||||
|
||||
&-column {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 48%;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
flex-direction: row-reverse;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--name {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&--created {
|
||||
padding-left: 20px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAw1BMVEWAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6M9jT1MAAAAQHRSTlMAAQIDBQYHDA0bHB8gISQmJyg+P0BGR0lKU1RZYmNrbHV2iYqLo6Spqqusra7Cw8TFysvM29zk5ufo6/Lz+Pn8DzgVHgAAATNJREFUeNplk+1agkAQhQfRykQTrJTEUjSCvtTQECPk/q+qPQ7LsnR+7DOzL898LiRlOP46zfN0vXQM0tXydkWlndeqs/620LTtK3Z7LBo6OpLd5fDzl6nVubSnIXv3zIY/8N4HVGrwBj8bwjaR77SgmhYn5DWF5eE7ZoribkZkoIeI78ZJMmYrQkcGjZD9mq+SokjY6qKqEfniDIiFYMR6FqZPn+J8+A9dYX5QKs5eBaFz3p4wUkLwizrkvB2UcoZXJUwYHiqIsDclnBzAvicyrFYQpBW0lK0oqVbkEHR1fzEEHl/YhCHG1yKaoYi5zubl4Mn8wsqe6uwRK4tNmHaG717VsiP4mV1uih9G4FrttuUG7GGGTLOioUwyRI51Ftv6o94rtNcfNbCz2uB32KycCv0BfU5XCrQEyKwAAAAASUVORK5CYII=);
|
||||
background-size: 14px 14px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
color: #8197a2;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&--see-all-proposal {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
&--time {
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&--to-close {
|
||||
color: #333;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&--vote {
|
||||
@extend %_button;
|
||||
|
||||
&_yes {
|
||||
margin-right: 15px;
|
||||
background-color: fade-out(#08b3f2, 0.9);
|
||||
}
|
||||
|
||||
&_no {
|
||||
margin-left: 15px;
|
||||
background-color: fade-out(#6d2eae, 0.9);
|
||||
color: #6d2eae;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,103 @@
|
|||
.ballots-about {
|
||||
font-size: 0;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
$this: &;
|
||||
|
||||
p {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
&-i {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:not(&_time) {
|
||||
padding-right: 10px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: table-row;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
&_name {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
&_proposal {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
&_mining-key {
|
||||
width: 30%;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&_time {
|
||||
width: 15%;
|
||||
text-align: right;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#{$this}-i--title {
|
||||
text-align: right;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--title {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -#{$desktop-indent * 2};
|
||||
opacity: 0.6;
|
||||
color: #38454f;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
position: relative;
|
||||
left: auto;
|
||||
right: auto;
|
||||
top: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-td {
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#{$this}-i:not(:last-child) & {
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
.ballots-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
padding-top: $tablet-indent;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
flex-direction: column-reverse;
|
||||
padding-top: $mobile-indent;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 18px;
|
||||
color: #8197a2;
|
||||
}
|
||||
|
||||
&-finalize {
|
||||
@extend %_button;
|
||||
margin-right: 20px;
|
||||
background-color: fade-out(#08b3f2, 0.9);
|
||||
white-space: nowrap;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-top: $mobile-indent;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,122 @@
|
|||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: 15px;
|
||||
color: #8197a2;
|
||||
font-size: 14px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
input {
|
||||
@extend %form-el;
|
||||
|
||||
&:focus {
|
||||
border-color: #08b3f2;
|
||||
}
|
||||
|
||||
&[type='radio'] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
@include image-2x('../images/select@2x.png', 8px, 4px);
|
||||
@extend %form-el;
|
||||
appearance: none;
|
||||
padding-right: 30px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 13px center;
|
||||
background-image: url(../images/select.png);
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %button;
|
||||
background-color: fade-out(#08b3f2, 0.9);
|
||||
color: #08b3f2;
|
||||
}
|
||||
|
||||
.radio {
|
||||
@extend %form-el;
|
||||
transition: 0.3s color,
|
||||
0.3s background-color,
|
||||
0.3s border-color;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
line-height: $input-height;
|
||||
|
||||
input[type='radio']:checked + & {
|
||||
border-color: #08b3f2;
|
||||
background-color: fade-out(#08b3f2, 0.9);
|
||||
color: #08b3f2;
|
||||
}
|
||||
|
||||
&_icon {
|
||||
padding-left: 37px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px 16px;
|
||||
background-position: left 11px center;
|
||||
}
|
||||
|
||||
&_add {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAFVBMVEUAsvUAsvUAsvUAsvUAsvUAsvUAsvVmJ/ytAAAABnRSTlMASUrk5udXTd49AAAAPElEQVR4Ae3RIQKAAAzDwG5k/f+TwYIoEsROx0V3BaUEGyW+bPBVUDighCPeglGPg6P3xW8D7FHS8/x3AhBhBV+OMM67AAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
&_remove {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAFVBMVEUAsvUAsvUAsvUAsvUAsvUAsvUAsvVmJ/ytAAAABnRSTlMASUrk5udXTd49AAAATklEQVR4Ae3SQQqAMAxE0Wmc5P5H1k2gfijFnaBvWf5mStSGa+Ihct14F6QosiZH6D24nzw4j7wLEvsb/qMugn77g28G9Czw6h5b5PoeT61VCXCp8qCYAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transition: 0.3s border-color;
|
||||
left: -40px;
|
||||
top: ($input-height - 24px) / 2;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e5eef9;
|
||||
|
||||
input[type='radio']:checked + & {
|
||||
border-color: #08b3f2;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
transition: 0.3s transform,
|
||||
0.3s opacity;
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
left: -34px;
|
||||
top: ($input-height - 12px) / 2;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #08b3f2;
|
||||
|
||||
input[type='radio']:checked + & {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-container {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-el {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-top: 15px;
|
||||
color: #8197a2;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
}
|
|
@ -0,0 +1,52 @@
|
|||
.footer {
|
||||
@extend %full-width;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: $footer-height;
|
||||
background-color: #6d2eae;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
height: auto;
|
||||
padding: 20px 10px 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
padding-top: $footer-height - 20;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo,
|
||||
.socials {
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
transform: translateY(0);
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo {
|
||||
@extend %logos;
|
||||
left: 0;
|
||||
width: 101px;
|
||||
height: 24px;
|
||||
background-position: 0 0
|
||||
}
|
||||
|
||||
&-rights {
|
||||
color: #fff;
|
||||
line-height: $footer-height;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,52 @@
|
|||
.header {
|
||||
margin-bottom: $desktop-indent;
|
||||
padding: 22px 0;
|
||||
background-color: #6d2eae;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-bottom: $tablet-indent;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-bottom: $mobile-indent;
|
||||
}
|
||||
|
||||
.container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-logo {
|
||||
@extend %logos;
|
||||
float: left;
|
||||
width: 149px;
|
||||
height: 35px;
|
||||
background-position: 0 -24px;
|
||||
}
|
||||
|
||||
&-settings,
|
||||
&-new-ballot {
|
||||
@extend %button;
|
||||
@extend %button_icon;
|
||||
float: right;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
background-size: 12px 12px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
padding: 0 20px;
|
||||
background-position: center center;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-settings {
|
||||
margin-right: 15px;
|
||||
background-color: #7d58bb;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAflBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+yfIzaAAAAKXRSTlMAAgQFBgwNDhAqKyxJSlJTVFVXZGVojo+Q19ja5Obn6+3u7/D19vf8/fmxL7QAAADLSURBVHgBfdHtVoJAGMTxUUwUZCtKRWzpxWj93/8Nti5LxDlbv68DzHkGTXbW7pRiwWpumcnDk5ctFe37y8MUPH58PsXne3D19oB32NYO+uGdxRvgrgRXB7wvFBjHjLtXVM8SV2tU3IKzyXNzvgWFRkeg3cjbtMAx3ktgYh+B38AyyBXcEZO/gk5Vl/rUS/VTfhrKT0CjUemA1qzXpgVcqf8PTEwS+xav6RHj7EWD15S/Ztf+a/ajLv2zomylKdAq05yFTilVF+8NvgGLASpP2eRPbAAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
&-new-ballot {
|
||||
background-color: #08b3f2;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAFVBMVEX///////////////////////////9nSIHRAAAABnRSTlMASUrk5udXTd49AAAAOUlEQVR42tXQsQEAIAgDQcAn+4+snRZxAK79KokrIcNBwgYdc0Migwxk8Qsd1TJWDf/KQWobqt+9G4coA99W7as5AAAAAElFTkSuQmCC);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,15 @@
|
|||
.info {
|
||||
@include image-2x('../images/info@2x.png', 32px, 32px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 44px;
|
||||
min-height: 32px;
|
||||
background-image: url(../images/info.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
color: #8197a2;
|
||||
|
||||
.ballots & {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,24 @@
|
|||
.new {
|
||||
&-form {
|
||||
@extend %white-block;
|
||||
overflow: hidden;
|
||||
|
||||
&-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-ballot {
|
||||
white-space: nowrap;
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
.settings {
|
||||
@extend %white-block;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
|
||||
&-title {
|
||||
margin-bottom: 20px;
|
||||
color: #38454f;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,76 @@
|
|||
.socials {
|
||||
font-size: 0;
|
||||
|
||||
.footer & {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&-i {
|
||||
transition: 0.3s background-color;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-color: fade-out(#fff, 0.8);
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: fade-out(#fff, 0.6);
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include image-2x('../images/socials@2x.png', 16px, 69px);
|
||||
transform: translate(-50%, -50%);
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
background-image: url(../images/socials.png);
|
||||
}
|
||||
|
||||
&_github {
|
||||
&:before {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&_oracles {
|
||||
&:before {
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
background-position: 0 -16px;
|
||||
}
|
||||
}
|
||||
|
||||
&_reddit {
|
||||
&:before {
|
||||
width: 15px;
|
||||
height: 13px;
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
}
|
||||
|
||||
&_telegram {
|
||||
&:before {
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
background-position: 0 -43px;
|
||||
}
|
||||
}
|
||||
|
||||
&_twitter {
|
||||
&:before {
|
||||
width: 15px;
|
||||
height: 12px;
|
||||
background-position: 0 -57px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,51 @@
|
|||
.vote-scale {
|
||||
clear: left;
|
||||
overflow: hidden;
|
||||
height: 6px;
|
||||
margin-top: 30px;
|
||||
border-radius: 3px;
|
||||
background-color: fade-out(#e5eef9, 0.5);
|
||||
|
||||
&--fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
|
||||
&_yes {
|
||||
background-color: #08b3f2;
|
||||
}
|
||||
|
||||
&_no {
|
||||
background-color: #6d2eae;
|
||||
}
|
||||
}
|
||||
|
||||
&--container {
|
||||
width: 100%;
|
||||
max-width: 343px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
float: right;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&--value {
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&--votes,
|
||||
&--percentage {
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&--votes {
|
||||
margin-left: 10px;
|
||||
color: #8197a2;
|
||||
}
|
||||
|
||||
&--percentage {
|
||||
color: #08b3f2;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,39 @@
|
|||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
const sass = require('gulp-sass');
|
||||
const sassGlob = require('gulp-sass-glob');
|
||||
const autoprefixer = require('gulp-autoprefixer');
|
||||
const uglifycss = require('gulp-uglifycss');
|
||||
const include = require('gulp-include');
|
||||
const addsrc = require('gulp-add-src');
|
||||
const order = require('gulp-order');
|
||||
const concat = require('gulp-concat');
|
||||
const uglify = require('gulp-uglify');
|
||||
|
||||
gulp.task('sass', function() {
|
||||
return gulp.src(['assets/stylesheets/*.scss'])
|
||||
.pipe(sassGlob())
|
||||
.pipe(sass().on('error', sass.logError))
|
||||
.pipe(autoprefixer())
|
||||
.pipe(uglifycss())
|
||||
.pipe(gulp.dest('assets/stylesheets/'));
|
||||
});
|
||||
|
||||
gulp.task('javascript', function() {
|
||||
return gulp.src('assets/javascripts/application/*.js')
|
||||
.pipe(addsrc('assets/javascripts/vendor/index.js'))
|
||||
.pipe(order([
|
||||
"assets/javascripts/vendor/index.js",
|
||||
"assets/javascripts/application/*.js"
|
||||
], {base: '.'}))
|
||||
.pipe(include())
|
||||
.pipe(concat('application.js'))
|
||||
// .pipe(uglify())
|
||||
.pipe(gulp.dest('assets/javascripts'));
|
||||
});
|
||||
|
||||
gulp.task('watch', function() {
|
||||
gulp.watch('assets/stylesheets/**/*.scss', ['sass']);
|
||||
gulp.watch('assets/javascripts/application/*.js', ['javascript']);
|
||||
});
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./assets/stylesheets/application.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<a href="#" class="header-logo"></a>
|
||||
<a href="#" class="header-new-ballot">New ballot</a>
|
||||
<a href="#" class="header-settings">Settings</a>
|
||||
</div>
|
||||
</header>
|
||||
<section class="container ballots">
|
||||
<h1 class="title">Ballots</h1>
|
||||
<div class="ballots-i">
|
||||
<div class="ballots-about">
|
||||
<div class="ballots-about-i ballots-about-i_name">
|
||||
<div class="ballots-about-td">
|
||||
<p class="ballots-about-i--title">Name</p>
|
||||
</div>
|
||||
<div class="ballots-about-td">
|
||||
<p class="ballots-i--name">Suleyman Duyar</p>
|
||||
<p class="ballots-i--created">31/10/2017 7:22 AM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ballots-about-i ballots-about-i_proposal">
|
||||
<div class="ballots-about-td">
|
||||
<p class="ballots-about-i--title">Proposal</p>
|
||||
</div>
|
||||
<div class="ballots-about-td">
|
||||
<p>Remove notary Shawn Grey, Vermont ID: 55512345 ...</p>
|
||||
<a href="#" class="ballots-i--see-all-proposal">See All</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ballots-about-i ballots-about-i_mining-key">
|
||||
<div class="ballots-about-td">
|
||||
<p class="ballots-about-i--title">Mining key</p>
|
||||
</div>
|
||||
<div class="ballots-about-td">
|
||||
<p>0xA1Cf735Ab55e9840Be820261D9b404959fcB5e41</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ballots-about-i ballots-about-i_time">
|
||||
<div class="ballots-about-td">
|
||||
<p class="ballots-about-i--title">Time</p>
|
||||
</div>
|
||||
<div class="ballots-about-td">
|
||||
<p class="ballots-i--time">17:49</p>
|
||||
<p class="ballots-i--to-close">To close</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ballots-i-scale">
|
||||
<div class="ballots-i-scale-column">
|
||||
<a href="#" class="ballots-i--vote ballots-i--vote_yes">Vote</a>
|
||||
<div class="vote-scale--container">
|
||||
<p class="vote-scale--value">Yes</p>
|
||||
<p class="vote-scale--votes">Votes: 40</p>
|
||||
<p class="vote-scale--percentage">40%</p>
|
||||
<div class="vote-scale">
|
||||
<div class="vote-scale--fill vote-scale--fill_yes" style="width: 50%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ballots-i-scale-column">
|
||||
<div class="vote-scale--container">
|
||||
<p class="vote-scale--value">No</p>
|
||||
<p class="vote-scale--votes">Votes: 10</p>
|
||||
<p class="vote-scale--percentage">20%</p>
|
||||
<div class="vote-scale">
|
||||
<div class="vote-scale--fill vote-scale--fill_no" style="width: 30%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="ballots-i--vote ballots-i--vote_no">Vote</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
Minimum 3 from 12 validators required to pass the proposal
|
||||
</div>
|
||||
<hr>
|
||||
<div class="ballots-footer">
|
||||
<a href="#" class="ballots-footer-finalize">Finalize ballot</a>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="footer-rights">2017 Oracles Network. All rights reserved.</p>
|
||||
<a href="#" class="footer-logo"></a>
|
||||
<div class="socials">
|
||||
<a href="#" class="socials-i socials-i_reddit"></a>
|
||||
<a href="#" class="socials-i socials-i_twitter"></a>
|
||||
<a href="#" class="socials-i socials-i_oracles"></a>
|
||||
<a href="#" class="socials-i socials-i_telegram"></a>
|
||||
<a href="#" class="socials-i socials-i_github"></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,191 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./assets/stylesheets/application.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<a href="#" class="header-logo"></a>
|
||||
<a href="#" class="header-new-ballot">New ballot</a>
|
||||
<a href="#" class="header-settings">Settings</a>
|
||||
</div>
|
||||
</header>
|
||||
<section class="container new">
|
||||
<h1 class="title">New Ballot</h1>
|
||||
<form action="" class="new-form">
|
||||
<div class="hidden">
|
||||
<div class="left">
|
||||
<div class="radio-container">
|
||||
<input type="radio" name="ballot-type" id="ballot-for-validators" checked>
|
||||
<label for="ballot-for-validators" class="radio">Ballot for validators</label>
|
||||
<p class="hint">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="radio-container">
|
||||
<input type="radio" name="ballot-type" id="ballot-for-consensus">
|
||||
<label for="ballot-for-consensus" class="radio">Ballot for consensus</label>
|
||||
<p class="hint">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="hidden">
|
||||
<div class="left">
|
||||
<div class="form-el">
|
||||
<label for="full-name">Full Name</label>
|
||||
<input type="text" id="full-name">
|
||||
<p class="hint">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="form-el">
|
||||
<label for="address">Address</label>
|
||||
<input type="text" id="address">
|
||||
<p class="hint">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left">
|
||||
<div class="form-el">
|
||||
<label for="state">State</label>
|
||||
<select id="state">
|
||||
<option value=""></option>
|
||||
<option value="">Alabama</option>
|
||||
<option value="">Florida</option>
|
||||
<option value="">New York</option>
|
||||
<option value="">Washington</option>
|
||||
</select>
|
||||
<p class="hint">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="form-el">
|
||||
<label for="zip-code">Zip Code</label>
|
||||
<input type="text" id="zip-code">
|
||||
<p class="hint">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left">
|
||||
<div class="form-el">
|
||||
<label for="license-id">License ID</label>
|
||||
<input type="text" id="license-id">
|
||||
<p class="hint">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="form-el">
|
||||
<label for="license-expiration">License Expiration</label>
|
||||
<input type="text" id="license-expiration">
|
||||
<p class="hint">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="hidden">
|
||||
<div class="left">
|
||||
<div class="radio-container">
|
||||
<input type="radio" name="key-control" id="add-key" checked>
|
||||
<label for="add-key" class="radio radio_icon radio_add">Add key</label>
|
||||
<p class="hint">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
</p>
|
||||
</div>
|
||||
<div class="radio-container">
|
||||
<input type="radio" name="key-control" id="remove-key">
|
||||
<label for="remove-key" class="radio radio_icon radio_remove">Remove key</label>
|
||||
<p class="hint">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="radio-container">
|
||||
<input type="radio" name="keys" id="mining-key" checked>
|
||||
<label for="mining-key" class="radio">Mining Key</label>
|
||||
<p class="hint">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
</p>
|
||||
</div>
|
||||
<div class="radio-container">
|
||||
<input type="radio" name="keys" id="payout-key">
|
||||
<label for="payout-key" class="radio">Payout Key</label>
|
||||
<p class="hint">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
</p>
|
||||
</div>
|
||||
<div class="radio-container">
|
||||
<input type="radio" name="keys" id="voting-key">
|
||||
<label for="voting-key" class="radio">Voting Key</label>
|
||||
<p class="hint">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden">
|
||||
<div class="left">
|
||||
<div class="form-el">
|
||||
<label for="memo">Memo</label>
|
||||
<input type="text" id="memo">
|
||||
<p class="hint">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="form-el">
|
||||
<label for="key">Key</label>
|
||||
<input type="text" id="key">
|
||||
<p class="hint">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="new-form-footer">
|
||||
<div class="info">
|
||||
Minimum 3 from 12 validators required to pass the proposal
|
||||
</div>
|
||||
<button type="button" class="add-ballot">Add ballot</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="footer-rights">2017 Oracles Network. All rights reserved.</p>
|
||||
<a href="#" class="footer-logo"></a>
|
||||
<div class="socials">
|
||||
<a href="#" class="socials-i socials-i_reddit"></a>
|
||||
<a href="#" class="socials-i socials-i_twitter"></a>
|
||||
<a href="#" class="socials-i socials-i_oracles"></a>
|
||||
<a href="#" class="socials-i socials-i_telegram"></a>
|
||||
<a href="#" class="socials-i socials-i_github"></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./assets/stylesheets/application.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<a href="#" class="header-logo"></a>
|
||||
<a href="#" class="header-new-ballot">New ballot</a>
|
||||
<a href="#" class="header-settings">Settings</a>
|
||||
</div>
|
||||
</header>
|
||||
<section class="container">
|
||||
<div class="settings">
|
||||
<p class="settings-title">Select Voting Key</p>
|
||||
<div class="form-el">
|
||||
<select id="state">
|
||||
<option value="" default>Al12s23d34d3d3dd3dq3234frvrt5</option>
|
||||
</select>
|
||||
<div class="hint">
|
||||
Please select your voting key from the list. You will be able to change it later in Settings menu.
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<button type="button">Continue</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="footer-rights">2017 Oracles Network. All rights reserved.</p>
|
||||
<a href="#" class="footer-logo"></a>
|
||||
<div class="socials">
|
||||
<a href="#" class="socials-i socials-i_reddit"></a>
|
||||
<a href="#" class="socials-i socials-i_twitter"></a>
|
||||
<a href="#" class="socials-i socials-i_oracles"></a>
|
||||
<a href="#" class="socials-i socials-i_telegram"></a>
|
||||
<a href="#" class="socials-i socials-i_github"></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|