Pavel Popeskul / savelovsky

Go to a project
Toggle navigation Toggle navigation pinning
Pavel Popeskul
1c876fd4 1 parent b79d0285

mobile last

Inline Side-by-side
Showing 24 changed files with 2024 additions and 144 deletions
......@@ -20,5 +20,8 @@
"bootstrap": "^3.3.6",
"jquery": "^2.2.1",
"bootstrap-select": "1.12.2"
},
"devDependencies": {
"sidr": "^2.2.1"
}
}
......
......@@ -9,15 +9,21 @@
<div class="header__nav ">
<div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
<div class="header__nav__wrapper">
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
</div>
</div>
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<div class="header__do">
<button type="button" class="btn btn-default btn__attention">Поддержать</button>
</div>
......
......@@ -23,15 +23,21 @@
<div class="header__nav ">
<div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
<div class="header__nav__wrapper">
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
</div>
</div>
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<div class="header__do">
<button type="button" class="btn btn-default btn__attention">Поддержать</button>
</div>
......
......@@ -23,15 +23,21 @@
<div class="header__nav ">
<div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
<div class="header__nav__wrapper">
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
</div>
</div>
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<div class="header__do">
<button type="button" class="btn btn-default btn__attention">Поддержать</button>
</div>
......
......@@ -1570,15 +1570,15 @@ pre code {
}
@media (min-width: 550px) {
.container {
width: 970px;
width: 100%;
}
}
@media (min-width: 797px) {
.container {
width: 970px;
width: 100%;
}
}
@media (min-width: 970px) {
@media (min-width: 990px) {
.container {
width: 970px;
}
......@@ -2503,7 +2503,7 @@ pre code {
margin-left: 0%;
}
}
@media (min-width: 970px) {
@media (min-width: 990px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-13, .col-lg-14, .col-lg-15, .col-lg-16, .col-lg-17, .col-lg-18, .col-lg-19, .col-lg-20, .col-lg-21, .col-lg-22, .col-lg-23, .col-lg-24 {
float: left;
}
......@@ -7106,7 +7106,7 @@ button.close {
display: inline-block !important;
}
}
@media (min-width: 797px) and (max-width: 969px) {
@media (min-width: 797px) and (max-width: 989px) {
.visible-md {
display: block !important;
}
......@@ -7121,22 +7121,22 @@ button.close {
display: table-cell !important;
}
}
@media (min-width: 797px) and (max-width: 969px) {
@media (min-width: 797px) and (max-width: 989px) {
.visible-md-block {
display: block !important;
}
}
@media (min-width: 797px) and (max-width: 969px) {
@media (min-width: 797px) and (max-width: 989px) {
.visible-md-inline {
display: inline !important;
}
}
@media (min-width: 797px) and (max-width: 969px) {
@media (min-width: 797px) and (max-width: 989px) {
.visible-md-inline-block {
display: inline-block !important;
}
}
@media (min-width: 970px) {
@media (min-width: 990px) {
.visible-lg {
display: block !important;
}
......@@ -7151,17 +7151,17 @@ button.close {
display: table-cell !important;
}
}
@media (min-width: 970px) {
@media (min-width: 990px) {
.visible-lg-block {
display: block !important;
}
}
@media (min-width: 970px) {
@media (min-width: 990px) {
.visible-lg-inline {
display: inline !important;
}
}
@media (min-width: 970px) {
@media (min-width: 990px) {
.visible-lg-inline-block {
display: inline-block !important;
}
......@@ -7176,12 +7176,12 @@ button.close {
display: none !important;
}
}
@media (min-width: 797px) and (max-width: 969px) {
@media (min-width: 797px) and (max-width: 989px) {
.hidden-md {
display: none !important;
}
}
@media (min-width: 970px) {
@media (min-width: 990px) {
.hidden-lg {
display: none !important;
}
......@@ -7515,6 +7515,166 @@ select.selectpicker {
width: 100%;
float: none;
}
.sidr {
display: block;
position: fixed;
top: 0;
height: 100%;
z-index: 999999;
width: 260px;
overflow-x: hidden;
overflow-y: auto;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 15px;
background: #333;
color: #fff;
box-shadow: 0 0 5px 5px #222 inset;
}
.sidr .sidr-inner {
padding: 0 0 15px;
}
.sidr .sidr-inner > p {
margin-left: 15px;
margin-right: 15px;
}
.sidr.right {
left: auto;
right: -260px;
}
.sidr.left {
left: -260px;
right: auto;
}
.sidr h1,
.sidr h2,
.sidr h3,
.sidr h4,
.sidr h5,
.sidr h6 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFhMWExYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: linear-gradient(#4d4d4d, #1a1a1a);
font-size: 11px;
font-weight: normal;
padding: 0 15px;
margin: 0 0 5px;
color: #fff;
line-height: 24px;
box-shadow: 0 5px 5px 3px rgba(0, 0, 0, 0.2);
}
.sidr p {
font-size: 13px;
margin: 0 0 12px;
}
.sidr p a {
color: rgba(255, 255, 255, 0.9);
}
.sidr > p {
margin-left: 15px;
margin-right: 15px;
}
.sidr ul {
display: block;
margin: 0 0 15px;
padding: 0;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #4d4d4d;
}
.sidr ul li {
display: block;
margin: 0;
line-height: 48px;
border-top: 1px solid #4d4d4d;
border-bottom: 1px solid #1a1a1a;
}
.sidr ul li:hover, .sidr ul li.active, .sidr ul li.sidr-class-active {
border-top: 0;
line-height: 49px;
}
.sidr ul li:hover > a,
.sidr ul li:hover > span, .sidr ul li.active > a,
.sidr ul li.active > span, .sidr ul li.sidr-class-active > a,
.sidr ul li.sidr-class-active > span {
box-shadow: 0 0 15px 3px #222 inset;
}
.sidr ul li a,
.sidr ul li span {
padding: 0 15px;
display: block;
text-decoration: none;
color: #fff;
}
.sidr ul li ul {
border-bottom: 0;
margin: 0;
}
.sidr ul li ul li {
line-height: 40px;
font-size: 13px;
}
.sidr ul li ul li:last-child {
border-bottom: 0;
}
.sidr ul li ul li:hover, .sidr ul li ul li.active, .sidr ul li ul li.sidr-class-active {
border-top: 0;
line-height: 41px;
}
.sidr ul li ul li:hover > a,
.sidr ul li ul li:hover > span, .sidr ul li ul li.active > a,
.sidr ul li ul li.active > span, .sidr ul li ul li.sidr-class-active > a,
.sidr ul li ul li.sidr-class-active > span {
box-shadow: 0 0 15px 3px #222 inset;
}
.sidr ul li ul li a,
.sidr ul li ul li span {
color: rgba(255, 255, 255, 0.8);
padding-left: 30px;
}
.sidr form {
margin: 0 15px;
}
.sidr label {
font-size: 13px;
}
.sidr input[type="text"],
.sidr input[type="password"],
.sidr input[type="date"],
.sidr input[type="datetime"],
.sidr input[type="email"],
.sidr input[type="number"],
.sidr input[type="search"],
.sidr input[type="tel"],
.sidr input[type="time"],
.sidr input[type="url"],
.sidr textarea,
.sidr select {
width: 100%;
font-size: 13px;
padding: 5px;
box-sizing: border-box;
margin: 0 0 10px;
border-radius: 2px;
border: 0;
background: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.6);
display: block;
clear: both;
}
.sidr input[type=checkbox] {
width: auto;
display: inline;
clear: none;
}
.sidr input[type=button],
.sidr input[type=submit] {
color: #333;
background: #fff;
}
.sidr input[type=button]:hover,
.sidr input[type=submit]:hover {
background: rgba(255, 255, 255, 0.9);
}
/*
LESS variables are information about icon's compiled state, stored under its original file name
......@@ -7571,9 +7731,11 @@ This must be run when you have at least 2 sprites.
height: 68px;
background-size: cover;
}
body,
html {
min-width: 970px;
@media (max-width: 989px) {
.icon__logo {
width: 45px;
height: 50px;
}
}
.head-h1 {
font-size: 28px;
......@@ -7588,6 +7750,7 @@ label {
}
.btn {
outline: none;
white-space: normal;
}
.btn:active,
.btn:focus {
......@@ -7602,14 +7765,15 @@ label {
color: white;
}
.btn__attention:hover,
.btn__attention:focus {
.btn__attention:focus,
.btn__attention:active {
background-color: #fb1e42;
border: 1px solid #fb1e42;
color: white;
}
.btn__attention:hover:active,
.btn__attention:focus:active {
.btn__attention:hover:active {
background-color: #fb1e42;
border: 1px solid #fb1e42;
color: white;
}
.btn__attention--blue {
......@@ -7617,14 +7781,15 @@ label {
border: 1px solid #125f8e;
}
.btn__attention--blue:hover,
.btn__attention--blue:focus {
.btn__attention--blue:focus,
.btn__attention--blue:active {
background-color: #125f8e;
border: 1px solid #125f8e;
color: white;
}
.btn__attention--blue:hover:active,
.btn__attention--blue:focus:active {
.btn__attention--blue:hover:active {
background-color: #125f8e;
border: 1px solid #125f8e;
color: white;
}
.btn__big {
......@@ -7639,21 +7804,23 @@ label {
transition: all 0.2s ease;
text-transform: uppercase;
}
.btn__big:hover {
background-color: rgba(18, 95, 142, 0.8);
color: white;
}
.btn__big:focus {
text-decoration: none;
background-color: #125f8e;
color: white;
@media (max-width: 549px) {
.btn__big {
width: 100%;
font-size: 12px;
padding: 10px 0px;
}
}
.btn__big:hover,
.btn__big:focus,
.btn__big:active {
background-color: rgba(18, 95, 142, 0.8);
border: 1px solid rgba(18, 95, 142, 0.8);
color: white;
}
.btn__big:active:focus {
.btn__big:hover:active {
background-color: rgba(18, 95, 142, 0.8);
border: 1px solid rgba(18, 95, 142, 0.8);
color: white;
}
.btn__thin {
......@@ -7669,7 +7836,15 @@ label {
color: white;
}
.btn__thin:hover,
.btn__thin:focus {
.btn__thin:focus,
.btn__thin:active {
background-color: #fb1e42;
border: 1px solid #fb1e42;
color: white;
}
.btn__thin:hover:active {
background-color: #fb1e42;
border: 1px solid #fb1e42;
color: white;
}
.header {
......@@ -7685,15 +7860,15 @@ label {
}
@media (min-width: 550px) {
.header__container {
width: 970px;
width: 100%;
}
}
@media (min-width: 797px) {
.header__container {
width: 970px;
width: 100%;
}
}
@media (min-width: 970px) {
@media (min-width: 990px) {
.header__container {
width: 970px;
}
......@@ -7721,12 +7896,19 @@ label {
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
width: initial;
}
.header__title {
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}
@media (max-width: 989px) {
.header__title {
font-size: 14px;
margin-top: 0;
}
}
.header__nav {
position: relative;
float: left;
......@@ -7735,19 +7917,99 @@ label {
padding-left: 10px;
padding-right: 10px;
}
@media (max-width: 989px) {
.header__nav {
float: none;
width: 100%;
padding: 0px 60px 0px 67px;
}
}
@media (max-width: 989px) {
.header__nav__wrapper {
display: none;
}
}
.header__do {
position: relative;
float: left;
width: 14.58333333%;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
margin-top: 15px;
text-align: right;
}
@media (min-width: 797px) {
.header__do {
float: left;
width: 100%;
}
}
@media (min-width: 990px) {
.header__do {
float: left;
width: 14.58333333%;
}
}
.header__do .btn {
width: 100%;
}
.mobile-menu {
position: absolute;
top: 20px;
right: 10px;
width: 43px;
height: 40px;
color: #345;
border: 2px solid white;
background: #125f8e;
z-index: 2;
cursor: pointer;
font-size: 20px;
display: none;
}
@media (max-width: 989px) {
.mobile-menu {
display: block;
}
}
.mobile-menu span {
position: relative;
background-color: white;
height: 2px;
display: block;
width: 22px;
margin: 17px auto 0;
}
.mobile-menu span:before,
.mobile-menu span:after {
content: '';
position: absolute;
display: block;
width: 20px;
height: 0;
left: 1px;
top: 50%;
margin-top: -7px;
}
.mobile-menu span:before {
box-shadow: 0 14px 0 1px white;
}
.mobile-menu span:after {
box-shadow: 0 0 0 1px white;
}
.mobile-menu.active span {
background-color: transparent;
}
.mobile-menu.active span:before {
transform: rotate(-45deg);
}
.mobile-menu.active span:after {
transform: rotate(45deg);
}
.mobile-menu.active span:before,
.mobile-menu.active span:after {
margin-top: 0;
box-shadow: 0 0 0 1px white;
}
.nav--promo {
width: 100%;
text-align: center;
......@@ -7796,6 +8058,11 @@ label {
background: #125f8e;
color: white;
}
@media (max-width: 989px) {
.footer {
padding: 20px 0px;
}
}
.footer__container {
margin-right: auto;
margin-left: auto;
......@@ -7804,15 +8071,15 @@ label {
}
@media (min-width: 550px) {
.footer__container {
width: 970px;
width: 100%;
}
}
@media (min-width: 797px) {
.footer__container {
width: 970px;
width: 100%;
}
}
@media (min-width: 970px) {
@media (min-width: 990px) {
.footer__container {
width: 970px;
}
......@@ -7832,9 +8099,22 @@ label {
.footer__left {
float: left;
}
@media (max-width: 989px) {
.footer__left {
width: 100%;
text-align: center;
margin-bottom: 20px;
}
}
.footer__right {
float: right;
}
@media (max-width: 989px) {
.footer__right {
width: 100%;
text-align: center;
}
}
.social {
padding: 0;
list-style: none;
......@@ -7854,6 +8134,12 @@ label {
min-height: 500px;
padding: 30px 0px;
}
@media (max-width: 989px) {
.content {
padding: 20px 0px;
min-height: inherit;
}
}
.content__container {
margin-right: auto;
margin-left: auto;
......@@ -7862,15 +8148,15 @@ label {
}
@media (min-width: 550px) {
.content__container {
width: 970px;
width: 100%;
}
}
@media (min-width: 797px) {
.content__container {
width: 970px;
width: 100%;
}
}
@media (min-width: 970px) {
@media (min-width: 990px) {
.content__container {
width: 970px;
}
......@@ -7894,12 +8180,26 @@ label {
position: relative;
overflow: hidden;
}
@media (max-width: 796px) {
.thumbnail--custom {
height: inherit;
width: 100%;
}
}
.thumbnail--custom img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: 796px) {
.thumbnail--custom img {
position: relative;
left: inherit;
top: initial;
transform: none;
}
}
.recipient__row {
margin-left: -10px;
margin-right: -10px;
......@@ -8069,6 +8369,11 @@ label {
padding: 30px 0px;
color: #125f8e;
}
@media (max-width: 989px) {
.promo {
padding: 0;
}
}
.promo__row {
margin-left: -10px;
margin-right: -10px;
......@@ -8077,16 +8382,43 @@ label {
margin-bottom: 30px;
display: inline-block;
}
@media (max-width: 989px) {
.promo__logo {
margin-bottom: 10px;
}
}
.promo__title {
font-size: 28px;
}
@media (max-width: 989px) {
.promo__title {
font-size: 20px;
}
}
@media (max-width: 549px) {
.promo__title {
font-size: 18px;
}
}
.promo__nav {
margin-top: 30px;
}
@media (max-width: 989px) {
.promo__nav {
display: block;
}
}
.promo__nav li {
margin: 0px 10px;
margin: 0px 10px 10px 10px;
}
@media (max-width: 549px) {
.promo__nav li {
width: 100%;
margin: 0px 0px 10px 0px;
}
}
.promo__nav li a {
display: inline-block;
color: #125f8e;
font-size: 19px;
border-bottom: 1px rgba(18, 95, 142, 0.5) dashed;
......@@ -8106,26 +8438,54 @@ label {
padding: 20px 20px;
}
.vote__map {
position: relative;
float: left;
width: 41.66666667%;
width: 100%;
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
}
@media (min-width: 990px) {
.vote__map {
float: left;
width: 41.66666667%;
}
}
@media (max-width: 989px) {
.vote__map {
padding: 0;
}
}
.vote__map__iframe {
width: 100%;
height: 200px;
}
@media (max-width: 989px) {
.vote__map__iframe {
height: 300px;
}
}
.vote__description {
position: relative;
float: left;
width: 50%;
width: 100%;
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
margin-top: 80px;
}
@media (min-width: 990px) {
.vote__description {
float: left;
width: 50%;
}
}
@media (max-width: 989px) {
.vote__description {
margin-top: 20px;
padding: 0;
}
}
.vote__label {
display: inline-block;
margin-bottom: 20px;
......@@ -8156,8 +8516,7 @@ label {
margin-bottom: 0;
}
.district__block {
float: left;
margin: 0px -20px;
margin: 0px -10px;
margin-bottom: 20px;
}
.district__block:last-child {
......@@ -8170,31 +8529,64 @@ label {
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
padding: 0;
margin-bottom: 20px;
}
@media (max-width: 796px) {
.district__profile {
padding: 0;
}
}
.district__profile__wrapper {
position: relative;
float: left;
width: 62.5%;
width: 100%;
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
}
@media (min-width: 797px) {
.district__profile__wrapper {
float: left;
width: 62.5%;
}
}
.district__profile__img {
position: relative;
float: left;
width: 37.5%;
width: 100%;
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
padding: 0;
}
@media (min-width: 797px) {
.district__profile__img {
float: left;
width: 37.5%;
}
}
@media (max-width: 796px) {
.district__profile__img {
text-align: center;
}
}
.district__profile__description {
position: relative;
float: left;
width: 62.5%;
width: 100%;
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
padding: 0;
}
@media (min-width: 797px) {
.district__profile__description {
float: left;
width: 62.5%;
}
}
@media (max-width: 796px) {
}
.district__profile__description__wrapper {
position: relative;
......@@ -8204,15 +8596,48 @@ label {
padding-left: 10px;
padding-right: 10px;
}
@media (max-width: 796px) {
.district__profile__description p {
font-size: 18px;
}
}
.district__description {
position: relative;
float: left;
width: 33.33333333%;
width: 100%;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: right !important;
}
@media (max-width: 796px) {
.district__description {
padding: 0;
}
}
@media (max-width: 796px) {
.district__description p {
font-size: 18px;
}
}
.district__description__wrapper {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
}
@media (min-width: 550px) {
.district__description__wrapper {
float: left;
width: 100%;
}
}
@media (min-width: 797px) {
.district__description__wrapper {
float: left;
width: 37.5%;
}
}
.passport__top {
margin-top: 80px;
}
......
......@@ -23,15 +23,21 @@
<div class="header__nav ">
<div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
<div class="header__nav__wrapper">
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
</div>
</div>
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<div class="header__do">
<button type="button" class="btn btn-default btn__attention">Поддержать</button>
</div>
......
......@@ -21,6 +21,10 @@
<a href="/" class="icon icon__logo"></a>
</div>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<div class="promo__title">Выборы в Совет <br> депутатов Савёловского района</div>
<br>
......@@ -31,7 +35,7 @@
<button type="button" class="btn btn-default btn__big">Познакомится с кандидатами</button>
<div class="promo__nav">
<div class="promo__nav header__nav__wrapper">
<ul class="nav nav--promo">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="#">Кандидаты</a></li>
......
......@@ -14087,3 +14087,605 @@ if (typeof jQuery === 'undefined') {
}(jQuery);
/*! sidr - v2.2.1 - 2016-02-17
* http://www.berriart.com/sidr/
* Copyright (c) 2013-2016 Alberto Varela; Licensed MIT */
(function () {
'use strict';
var babelHelpers = {};
babelHelpers.classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
babelHelpers.createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
babelHelpers;
var sidrStatus = {
moving: false,
opened: false
};
var helper = {
// Check for valids urls
// From : http://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-an-url
isUrl: function isUrl(str) {
var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
'(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
if (pattern.test(str)) {
return true;
} else {
return false;
}
},
// Add sidr prefixes
addPrefixes: function addPrefixes($element) {
this.addPrefix($element, 'id');
this.addPrefix($element, 'class');
$element.removeAttr('style');
},
addPrefix: function addPrefix($element, attribute) {
var toReplace = $element.attr(attribute);
if (typeof toReplace === 'string' && toReplace !== '' && toReplace !== 'sidr-inner') {
$element.attr(attribute, toReplace.replace(/([A-Za-z0-9_.\-]+)/g, 'sidr-' + attribute + '-$1'));
}
},
// Check if transitions is supported
transitions: function () {
var body = document.body || document.documentElement,
style = body.style,
supported = false,
property = 'transition';
if (property in style) {
supported = true;
} else {
(function () {
var prefixes = ['moz', 'webkit', 'o', 'ms'],
prefix = undefined,
i = undefined;
property = property.charAt(0).toUpperCase() + property.substr(1);
supported = function () {
for (i = 0; i < prefixes.length; i++) {
prefix = prefixes[i];
if (prefix + property in style) {
return true;
}
}
return false;
}();
property = supported ? '-' + prefix.toLowerCase() + '-' + property.toLowerCase() : null;
})();
}
return {
supported: supported,
property: property
};
}()
};
var $$2 = jQuery;
var bodyAnimationClass = 'sidr-animating';
var openAction = 'open';
var closeAction = 'close';
var transitionEndEvent = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';
var Menu = function () {
function Menu(name) {
babelHelpers.classCallCheck(this, Menu);
this.name = name;
this.item = $$2('#' + name);
this.openClass = name === 'sidr' ? 'sidr-open' : 'sidr-open ' + name + '-open';
this.menuWidth = this.item.outerWidth(true);
this.speed = this.item.data('speed');
this.side = this.item.data('side');
this.displace = this.item.data('displace');
this.timing = this.item.data('timing');
this.method = this.item.data('method');
this.onOpenCallback = this.item.data('onOpen');
this.onCloseCallback = this.item.data('onClose');
this.onOpenEndCallback = this.item.data('onOpenEnd');
this.onCloseEndCallback = this.item.data('onCloseEnd');
this.body = $$2(this.item.data('body'));
}
babelHelpers.createClass(Menu, [{
key: 'getAnimation',
value: function getAnimation(action, element) {
var animation = {},
prop = this.side;
if (action === 'open' && element === 'body') {
animation[prop] = this.menuWidth + 'px';
} else if (action === 'close' && element === 'menu') {
animation[prop] = '-' + this.menuWidth + 'px';
} else {
animation[prop] = 0;
}
return animation;
}
}, {
key: 'prepareBody',
value: function prepareBody(action) {
var prop = action === 'open' ? 'hidden' : '';
// Prepare page if container is body
if (this.body.is('body')) {
var $html = $$2('html'),
scrollTop = $html.scrollTop();
$html.css('overflow-x', prop).scrollTop(scrollTop);
}
}
}, {
key: 'openBody',
value: function openBody() {
if (this.displace) {
var transitions = helper.transitions,
$body = this.body;
if (transitions.supported) {
$body.css(transitions.property, this.side + ' ' + this.speed / 1000 + 's ' + this.timing).css(this.side, 0).css({
width: $body.width(),
position: 'absolute'
});
$body.css(this.side, this.menuWidth + 'px');
} else {
var bodyAnimation = this.getAnimation(openAction, 'body');
$body.css({
width: $body.width(),
position: 'absolute'
}).animate(bodyAnimation, {
queue: false,
duration: this.speed
});
}
}
}
}, {
key: 'onCloseBody',
value: function onCloseBody() {
var transitions = helper.transitions,
resetStyles = {
width: '',
position: '',
right: '',
left: ''
};
if (transitions.supported) {
resetStyles[transitions.property] = '';
}
this.body.css(resetStyles).unbind(transitionEndEvent);
}
}, {
key: 'closeBody',
value: function closeBody() {
var _this = this;
if (this.displace) {
if (helper.transitions.supported) {
this.body.css(this.side, 0).one(transitionEndEvent, function () {
_this.onCloseBody();
});
} else {
var bodyAnimation = this.getAnimation(closeAction, 'body');
this.body.animate(bodyAnimation, {
queue: false,
duration: this.speed,
complete: function complete() {
_this.onCloseBody();
}
});
}
}
}
}, {
key: 'moveBody',
value: function moveBody(action) {
if (action === openAction) {
this.openBody();
} else {
this.closeBody();
}
}
}, {
key: 'onOpenMenu',
value: function onOpenMenu(callback) {
var name = this.name;
sidrStatus.moving = false;
sidrStatus.opened = name;
this.item.unbind(transitionEndEvent);
this.body.removeClass(bodyAnimationClass).addClass(this.openClass);
this.onOpenEndCallback();
if (typeof callback === 'function') {
callback(name);
}
}
}, {
key: 'openMenu',
value: function openMenu(callback) {
var _this2 = this;
var $item = this.item;
if (helper.transitions.supported) {
$item.css(this.side, 0).one(transitionEndEvent, function () {
_this2.onOpenMenu(callback);
});
} else {
var menuAnimation = this.getAnimation(openAction, 'menu');
$item.css('display', 'block').animate(menuAnimation, {
queue: false,
duration: this.speed,
complete: function complete() {
_this2.onOpenMenu(callback);
}
});
}
}
}, {
key: 'onCloseMenu',
value: function onCloseMenu(callback) {
this.item.css({
left: '',
right: ''
}).unbind(transitionEndEvent);
$$2('html').css('overflow-x', '');
sidrStatus.moving = false;
sidrStatus.opened = false;
this.body.removeClass(bodyAnimationClass).removeClass(this.openClass);
this.onCloseEndCallback();
// Callback
if (typeof callback === 'function') {
callback(name);
}
}
}, {
key: 'closeMenu',
value: function closeMenu(callback) {
var _this3 = this;
var item = this.item;
if (helper.transitions.supported) {
item.css(this.side, '').one(transitionEndEvent, function () {
_this3.onCloseMenu(callback);
});
} else {
var menuAnimation = this.getAnimation(closeAction, 'menu');
item.animate(menuAnimation, {
queue: false,
duration: this.speed,
complete: function complete() {
_this3.onCloseMenu();
}
});
}
}
}, {
key: 'moveMenu',
value: function moveMenu(action, callback) {
this.body.addClass(bodyAnimationClass);
if (action === openAction) {
this.openMenu(callback);
} else {
this.closeMenu(callback);
}
}
}, {
key: 'move',
value: function move(action, callback) {
// Lock sidr
sidrStatus.moving = true;
this.prepareBody(action);
this.moveBody(action);
this.moveMenu(action, callback);
}
}, {
key: 'open',
value: function open(callback) {
var _this4 = this;
// Check if is already opened or moving
if (sidrStatus.opened === this.name || sidrStatus.moving) {
return;
}
// If another menu opened close first
if (sidrStatus.opened !== false) {
var alreadyOpenedMenu = new Menu(sidrStatus.opened);
alreadyOpenedMenu.close(function () {
_this4.open(callback);
});
return;
}
this.move('open', callback);
// onOpen callback
this.onOpenCallback();
}
}, {
key: 'close',
value: function close(callback) {
// Check if is already closed or moving
if (sidrStatus.opened !== this.name || sidrStatus.moving) {
return;
}
this.move('close', callback);
// onClose callback
this.onCloseCallback();
}
}, {
key: 'toggle',
value: function toggle(callback) {
if (sidrStatus.opened === this.name) {
this.close(callback);
} else {
this.open(callback);
}
}
}]);
return Menu;
}();
var $$1 = jQuery;
function execute(action, name, callback) {
var sidr = new Menu(name);
switch (action) {
case 'open':
sidr.open(callback);
break;
case 'close':
sidr.close(callback);
break;
case 'toggle':
sidr.toggle(callback);
break;
default:
$$1.error('Method ' + action + ' does not exist on jQuery.sidr');
break;
}
}
var i;
var $ = jQuery;
var publicMethods = ['open', 'close', 'toggle'];
var methodName;
var methods = {};
var getMethod = function getMethod(methodName) {
return function (name, callback) {
// Check arguments
if (typeof name === 'function') {
callback = name;
name = 'sidr';
} else if (!name) {
name = 'sidr';
}
execute(methodName, name, callback);
};
};
for (i = 0; i < publicMethods.length; i++) {
methodName = publicMethods[i];
methods[methodName] = getMethod(methodName);
}
function sidr(method) {
if (method === 'status') {
return sidrStatus;
} else if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'function' || typeof method === 'string' || !method) {
return methods.toggle.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.sidr');
}
}
var $$3 = jQuery;
function fillContent($sideMenu, settings) {
// The menu content
if (typeof settings.source === 'function') {
var newContent = settings.source(name);
$sideMenu.html(newContent);
} else if (typeof settings.source === 'string' && helper.isUrl(settings.source)) {
$$3.get(settings.source, function (data) {
$sideMenu.html(data);
});
} else if (typeof settings.source === 'string') {
var htmlContent = '',
selectors = settings.source.split(',');
$$3.each(selectors, function (index, element) {
htmlContent += '<div class="sidr-inner">' + $$3(element).html() + '</div>';
});
// Renaming ids and classes
if (settings.renaming) {
var $htmlContent = $$3('<div />').html(htmlContent);
$htmlContent.find('*').each(function (index, element) {
var $element = $$3(element);
helper.addPrefixes($element);
});
htmlContent = $htmlContent.html();
}
$sideMenu.html(htmlContent);
} else if (settings.source !== null) {
$$3.error('Invalid Sidr Source');
}
return $sideMenu;
}
function fnSidr(options) {
var transitions = helper.transitions,
settings = $$3.extend({
name: 'sidr', // Name for the 'sidr'
speed: 200, // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds)
side: 'left', // Accepts 'left' or 'right'
source: null, // Override the source of the content.
renaming: true, // The ids and classes will be prepended with a prefix when loading existent content
body: 'body', // Page container selector,
displace: true, // Displace the body content or not
timing: 'ease', // Timing function for CSS transitions
method: 'toggle', // The method to call when element is clicked
bind: 'touchstart click', // The event(s) to trigger the menu
onOpen: function onOpen() {},
// Callback when sidr start opening
onClose: function onClose() {},
// Callback when sidr start closing
onOpenEnd: function onOpenEnd() {},
// Callback when sidr end opening
onCloseEnd: function onCloseEnd() {} // Callback when sidr end closing
}, options),
name = settings.name,
$sideMenu = $$3('#' + name);
// If the side menu do not exist create it
if ($sideMenu.length === 0) {
$sideMenu = $$3('<div />').attr('id', name).appendTo($$3('body'));
}
// Add transition to menu if are supported
if (transitions.supported) {
$sideMenu.css(transitions.property, settings.side + ' ' + settings.speed / 1000 + 's ' + settings.timing);
}
// Adding styles and options
$sideMenu.addClass('sidr').addClass(settings.side).data({
speed: settings.speed,
side: settings.side,
body: settings.body,
displace: settings.displace,
timing: settings.timing,
method: settings.method,
onOpen: settings.onOpen,
onClose: settings.onClose,
onOpenEnd: settings.onOpenEnd,
onCloseEnd: settings.onCloseEnd
});
$sideMenu = fillContent($sideMenu, settings);
return this.each(function () {
var $this = $$3(this),
data = $this.data('sidr'),
flag = false;
// If the plugin hasn't been initialized yet
if (!data) {
sidrStatus.moving = false;
sidrStatus.opened = false;
$this.data('sidr', name);
$this.bind(settings.bind, function (event) {
event.preventDefault();
if (!flag) {
flag = true;
sidr(settings.method, name);
setTimeout(function () {
flag = false;
}, 100);
}
});
}
});
}
jQuery.sidr = sidr;
jQuery.fn.sidr = fnSidr;
}());
$(document).ready(function() {
$('#right-menu').sidr({
name: 'sidr-right',
side: 'right',
source: '.header__nav__wrapper',
onOpen: function() {
$('.mobile-menu').addClass('active');
},
onClose: function() {
$('.mobile-menu').removeClass('active');
}
});
});
$(document).mouseup(function (e){
var container = $("#sidr-right");
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
$.sidr('close', 'sidr-right');
}
});
\ No newline at end of file
......
......@@ -23,15 +23,21 @@
<div class="header__nav ">
<div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
<div class="header__nav__wrapper">
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
</div>
</div>
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<div class="header__do">
<button type="button" class="btn btn-default btn__attention">Поддержать</button>
</div>
......
......@@ -23,15 +23,21 @@
<div class="header__nav ">
<div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
<div class="header__nav__wrapper">
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
</div>
</div>
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<div class="header__do">
<button type="button" class="btn btn-default btn__attention">Поддержать</button>
</div>
......
......@@ -9,15 +9,21 @@
<div class="header__nav ">
<div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
<div class="header__nav__wrapper">
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
</div>
</div>
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<div class="header__do">
<button type="button" class="btn btn-default btn__attention">Поддержать</button>
</div>
......
......@@ -9,6 +9,10 @@
<a href="/" class="icon icon__logo"></a>
</div>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<div class="promo__title">Выборы в Совет <br> депутатов Савёловского района</div>
<br>
......@@ -19,7 +23,7 @@
<button type="button" class="btn btn-default btn__big">Познакомится с кандидатами</button>
<div class="promo__nav">
<div class="promo__nav header__nav__wrapper">
<ul class="nav nav--promo">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="#">Кандидаты</a></li>
......
/*! sidr - v2.2.1 - 2016-02-17
* http://www.berriart.com/sidr/
* Copyright (c) 2013-2016 Alberto Varela; Licensed MIT */
(function () {
'use strict';
var babelHelpers = {};
babelHelpers.classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
babelHelpers.createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
babelHelpers;
var sidrStatus = {
moving: false,
opened: false
};
var helper = {
// Check for valids urls
// From : http://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-an-url
isUrl: function isUrl(str) {
var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
'(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
if (pattern.test(str)) {
return true;
} else {
return false;
}
},
// Add sidr prefixes
addPrefixes: function addPrefixes($element) {
this.addPrefix($element, 'id');
this.addPrefix($element, 'class');
$element.removeAttr('style');
},
addPrefix: function addPrefix($element, attribute) {
var toReplace = $element.attr(attribute);
if (typeof toReplace === 'string' && toReplace !== '' && toReplace !== 'sidr-inner') {
$element.attr(attribute, toReplace.replace(/([A-Za-z0-9_.\-]+)/g, 'sidr-' + attribute + '-$1'));
}
},
// Check if transitions is supported
transitions: function () {
var body = document.body || document.documentElement,
style = body.style,
supported = false,
property = 'transition';
if (property in style) {
supported = true;
} else {
(function () {
var prefixes = ['moz', 'webkit', 'o', 'ms'],
prefix = undefined,
i = undefined;
property = property.charAt(0).toUpperCase() + property.substr(1);
supported = function () {
for (i = 0; i < prefixes.length; i++) {
prefix = prefixes[i];
if (prefix + property in style) {
return true;
}
}
return false;
}();
property = supported ? '-' + prefix.toLowerCase() + '-' + property.toLowerCase() : null;
})();
}
return {
supported: supported,
property: property
};
}()
};
var $$2 = jQuery;
var bodyAnimationClass = 'sidr-animating';
var openAction = 'open';
var closeAction = 'close';
var transitionEndEvent = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';
var Menu = function () {
function Menu(name) {
babelHelpers.classCallCheck(this, Menu);
this.name = name;
this.item = $$2('#' + name);
this.openClass = name === 'sidr' ? 'sidr-open' : 'sidr-open ' + name + '-open';
this.menuWidth = this.item.outerWidth(true);
this.speed = this.item.data('speed');
this.side = this.item.data('side');
this.displace = this.item.data('displace');
this.timing = this.item.data('timing');
this.method = this.item.data('method');
this.onOpenCallback = this.item.data('onOpen');
this.onCloseCallback = this.item.data('onClose');
this.onOpenEndCallback = this.item.data('onOpenEnd');
this.onCloseEndCallback = this.item.data('onCloseEnd');
this.body = $$2(this.item.data('body'));
}
babelHelpers.createClass(Menu, [{
key: 'getAnimation',
value: function getAnimation(action, element) {
var animation = {},
prop = this.side;
if (action === 'open' && element === 'body') {
animation[prop] = this.menuWidth + 'px';
} else if (action === 'close' && element === 'menu') {
animation[prop] = '-' + this.menuWidth + 'px';
} else {
animation[prop] = 0;
}
return animation;
}
}, {
key: 'prepareBody',
value: function prepareBody(action) {
var prop = action === 'open' ? 'hidden' : '';
// Prepare page if container is body
if (this.body.is('body')) {
var $html = $$2('html'),
scrollTop = $html.scrollTop();
$html.css('overflow-x', prop).scrollTop(scrollTop);
}
}
}, {
key: 'openBody',
value: function openBody() {
if (this.displace) {
var transitions = helper.transitions,
$body = this.body;
if (transitions.supported) {
$body.css(transitions.property, this.side + ' ' + this.speed / 1000 + 's ' + this.timing).css(this.side, 0).css({
width: $body.width(),
position: 'absolute'
});
$body.css(this.side, this.menuWidth + 'px');
} else {
var bodyAnimation = this.getAnimation(openAction, 'body');
$body.css({
width: $body.width(),
position: 'absolute'
}).animate(bodyAnimation, {
queue: false,
duration: this.speed
});
}
}
}
}, {
key: 'onCloseBody',
value: function onCloseBody() {
var transitions = helper.transitions,
resetStyles = {
width: '',
position: '',
right: '',
left: ''
};
if (transitions.supported) {
resetStyles[transitions.property] = '';
}
this.body.css(resetStyles).unbind(transitionEndEvent);
}
}, {
key: 'closeBody',
value: function closeBody() {
var _this = this;
if (this.displace) {
if (helper.transitions.supported) {
this.body.css(this.side, 0).one(transitionEndEvent, function () {
_this.onCloseBody();
});
} else {
var bodyAnimation = this.getAnimation(closeAction, 'body');
this.body.animate(bodyAnimation, {
queue: false,
duration: this.speed,
complete: function complete() {
_this.onCloseBody();
}
});
}
}
}
}, {
key: 'moveBody',
value: function moveBody(action) {
if (action === openAction) {
this.openBody();
} else {
this.closeBody();
}
}
}, {
key: 'onOpenMenu',
value: function onOpenMenu(callback) {
var name = this.name;
sidrStatus.moving = false;
sidrStatus.opened = name;
this.item.unbind(transitionEndEvent);
this.body.removeClass(bodyAnimationClass).addClass(this.openClass);
this.onOpenEndCallback();
if (typeof callback === 'function') {
callback(name);
}
}
}, {
key: 'openMenu',
value: function openMenu(callback) {
var _this2 = this;
var $item = this.item;
if (helper.transitions.supported) {
$item.css(this.side, 0).one(transitionEndEvent, function () {
_this2.onOpenMenu(callback);
});
} else {
var menuAnimation = this.getAnimation(openAction, 'menu');
$item.css('display', 'block').animate(menuAnimation, {
queue: false,
duration: this.speed,
complete: function complete() {
_this2.onOpenMenu(callback);
}
});
}
}
}, {
key: 'onCloseMenu',
value: function onCloseMenu(callback) {
this.item.css({
left: '',
right: ''
}).unbind(transitionEndEvent);
$$2('html').css('overflow-x', '');
sidrStatus.moving = false;
sidrStatus.opened = false;
this.body.removeClass(bodyAnimationClass).removeClass(this.openClass);
this.onCloseEndCallback();
// Callback
if (typeof callback === 'function') {
callback(name);
}
}
}, {
key: 'closeMenu',
value: function closeMenu(callback) {
var _this3 = this;
var item = this.item;
if (helper.transitions.supported) {
item.css(this.side, '').one(transitionEndEvent, function () {
_this3.onCloseMenu(callback);
});
} else {
var menuAnimation = this.getAnimation(closeAction, 'menu');
item.animate(menuAnimation, {
queue: false,
duration: this.speed,
complete: function complete() {
_this3.onCloseMenu();
}
});
}
}
}, {
key: 'moveMenu',
value: function moveMenu(action, callback) {
this.body.addClass(bodyAnimationClass);
if (action === openAction) {
this.openMenu(callback);
} else {
this.closeMenu(callback);
}
}
}, {
key: 'move',
value: function move(action, callback) {
// Lock sidr
sidrStatus.moving = true;
this.prepareBody(action);
this.moveBody(action);
this.moveMenu(action, callback);
}
}, {
key: 'open',
value: function open(callback) {
var _this4 = this;
// Check if is already opened or moving
if (sidrStatus.opened === this.name || sidrStatus.moving) {
return;
}
// If another menu opened close first
if (sidrStatus.opened !== false) {
var alreadyOpenedMenu = new Menu(sidrStatus.opened);
alreadyOpenedMenu.close(function () {
_this4.open(callback);
});
return;
}
this.move('open', callback);
// onOpen callback
this.onOpenCallback();
}
}, {
key: 'close',
value: function close(callback) {
// Check if is already closed or moving
if (sidrStatus.opened !== this.name || sidrStatus.moving) {
return;
}
this.move('close', callback);
// onClose callback
this.onCloseCallback();
}
}, {
key: 'toggle',
value: function toggle(callback) {
if (sidrStatus.opened === this.name) {
this.close(callback);
} else {
this.open(callback);
}
}
}]);
return Menu;
}();
var $$1 = jQuery;
function execute(action, name, callback) {
var sidr = new Menu(name);
switch (action) {
case 'open':
sidr.open(callback);
break;
case 'close':
sidr.close(callback);
break;
case 'toggle':
sidr.toggle(callback);
break;
default:
$$1.error('Method ' + action + ' does not exist on jQuery.sidr');
break;
}
}
var i;
var $ = jQuery;
var publicMethods = ['open', 'close', 'toggle'];
var methodName;
var methods = {};
var getMethod = function getMethod(methodName) {
return function (name, callback) {
// Check arguments
if (typeof name === 'function') {
callback = name;
name = 'sidr';
} else if (!name) {
name = 'sidr';
}
execute(methodName, name, callback);
};
};
for (i = 0; i < publicMethods.length; i++) {
methodName = publicMethods[i];
methods[methodName] = getMethod(methodName);
}
function sidr(method) {
if (method === 'status') {
return sidrStatus;
} else if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'function' || typeof method === 'string' || !method) {
return methods.toggle.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.sidr');
}
}
var $$3 = jQuery;
function fillContent($sideMenu, settings) {
// The menu content
if (typeof settings.source === 'function') {
var newContent = settings.source(name);
$sideMenu.html(newContent);
} else if (typeof settings.source === 'string' && helper.isUrl(settings.source)) {
$$3.get(settings.source, function (data) {
$sideMenu.html(data);
});
} else if (typeof settings.source === 'string') {
var htmlContent = '',
selectors = settings.source.split(',');
$$3.each(selectors, function (index, element) {
htmlContent += '<div class="sidr-inner">' + $$3(element).html() + '</div>';
});
// Renaming ids and classes
if (settings.renaming) {
var $htmlContent = $$3('<div />').html(htmlContent);
$htmlContent.find('*').each(function (index, element) {
var $element = $$3(element);
helper.addPrefixes($element);
});
htmlContent = $htmlContent.html();
}
$sideMenu.html(htmlContent);
} else if (settings.source !== null) {
$$3.error('Invalid Sidr Source');
}
return $sideMenu;
}
function fnSidr(options) {
var transitions = helper.transitions,
settings = $$3.extend({
name: 'sidr', // Name for the 'sidr'
speed: 200, // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds)
side: 'left', // Accepts 'left' or 'right'
source: null, // Override the source of the content.
renaming: true, // The ids and classes will be prepended with a prefix when loading existent content
body: 'body', // Page container selector,
displace: true, // Displace the body content or not
timing: 'ease', // Timing function for CSS transitions
method: 'toggle', // The method to call when element is clicked
bind: 'touchstart click', // The event(s) to trigger the menu
onOpen: function onOpen() {},
// Callback when sidr start opening
onClose: function onClose() {},
// Callback when sidr start closing
onOpenEnd: function onOpenEnd() {},
// Callback when sidr end opening
onCloseEnd: function onCloseEnd() {} // Callback when sidr end closing
}, options),
name = settings.name,
$sideMenu = $$3('#' + name);
// If the side menu do not exist create it
if ($sideMenu.length === 0) {
$sideMenu = $$3('<div />').attr('id', name).appendTo($$3('body'));
}
// Add transition to menu if are supported
if (transitions.supported) {
$sideMenu.css(transitions.property, settings.side + ' ' + settings.speed / 1000 + 's ' + settings.timing);
}
// Adding styles and options
$sideMenu.addClass('sidr').addClass(settings.side).data({
speed: settings.speed,
side: settings.side,
body: settings.body,
displace: settings.displace,
timing: settings.timing,
method: settings.method,
onOpen: settings.onOpen,
onClose: settings.onClose,
onOpenEnd: settings.onOpenEnd,
onCloseEnd: settings.onCloseEnd
});
$sideMenu = fillContent($sideMenu, settings);
return this.each(function () {
var $this = $$3(this),
data = $this.data('sidr'),
flag = false;
// If the plugin hasn't been initialized yet
if (!data) {
sidrStatus.moving = false;
sidrStatus.opened = false;
$this.data('sidr', name);
$this.bind(settings.bind, function (event) {
event.preventDefault();
if (!flag) {
flag = true;
sidr(settings.method, name);
setTimeout(function () {
flag = false;
}, 100);
}
});
}
});
}
jQuery.sidr = sidr;
jQuery.fn.sidr = fnSidr;
}());
\ No newline at end of file
$(document).ready(function() {
$('#right-menu').sidr({
name: 'sidr-right',
side: 'right',
source: '.header__nav__wrapper',
onOpen: function() {
$('.mobile-menu').addClass('active');
},
onClose: function() {
$('.mobile-menu').removeClass('active');
}
});
});
$(document).mouseup(function (e){
var container = $("#sidr-right");
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
$.sidr('close', 'sidr-right');
}
});
\ No newline at end of file
......
.btn {
outline: none;
white-space: normal;
&:active, &:focus {
outline: none;
......@@ -17,13 +18,16 @@
border: 1px solid #fb1e42;
color: white;
&:hover, &:focus {
&:hover, &:focus, &:active {
background-color: #fb1e42;
border: 1px solid #fb1e42;
color: white;
}
&:hover {
&:active {
background-color: #fb1e42;
border: 1px solid #fb1e42;
color: white;
}
}
......@@ -32,13 +36,16 @@
background-color: #125f8e;
border: 1px solid #125f8e;
&:hover, &:focus {
&:hover, &:focus, &:active {
background-color: #125f8e;
border: 1px solid #125f8e;
color: white;
}
&:hover {
&:active {
background-color: #125f8e;
border: 1px solid #125f8e;
color: white;
}
}
......@@ -56,24 +63,22 @@
letter-spacing: 0.09em;
transition: all 0.2s ease;
text-transform: uppercase;
&:hover {
background-color: rgba(18, 95, 142, 0.8);
color: white;
}
&:focus {
text-decoration: none;
background-color: #125f8e;
color: white;
@media(@xs){
width: 100%;
font-size: 12px;
padding: 10px 0px;
}
&:active {
&:hover, &:focus, &:active {
background-color: rgba(18, 95, 142, 0.8);
border: 1px solid rgba(18, 95, 142, 0.8);
color: white;
}
&:focus {
&:hover {
&:active {
background-color: rgba(18, 95, 142, 0.8);
border: 1px solid rgba(18, 95, 142, 0.8);
color: white;
}
}
......@@ -91,8 +96,18 @@
background: #fb1e42;
color: white;
&:hover, &:focus {
&:hover, &:focus, &:active {
background-color: #fb1e42;
border: 1px solid #fb1e42;
color: white;
}
&:hover {
&:active {
background-color: #fb1e42;
border: 1px solid #fb1e42;
color: white;
}
}
}
}
\ No newline at end of file
......
......@@ -2,6 +2,10 @@
.content {
min-height: 500px;
padding: 30px 0px;
@media(@md){
padding: 20px 0px;
min-height: inherit;
}
&__container {
.container();
......@@ -15,12 +19,22 @@
height: 150px;
position: relative;
overflow: hidden;
@media(@sm){
height: inherit;
width: 100%;
}
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
@media(@sm){
position: relative;
left: inherit;
top: initial;
transform: none;
}
}
}
}
......@@ -186,7 +200,6 @@
}
}
.progress {
position: relative;
......
body, html{
min-width: 970px;
//min-width: 970px;
}
.head-h1 {
......
......@@ -8,6 +8,9 @@
//background-color: #D7D7D7;
background: #125f8e;
color: white;
@media(@md){
padding: 20px 0px;
}
&__container {
.container();
......@@ -15,14 +18,19 @@
&__left {
float: left;
@media(@md){
width: 100%;
text-align: center;
margin-bottom: 20px;
}
}
&__right {
float: right;
}
p {
//color: ;
@media(@md){
width: 100%;
text-align: center;
}
}
}
......
......@@ -14,20 +14,37 @@
&__logo {
.make-xs-column(2);
width: initial;
}
&__title {
font-size: 18px;
font-weight: bold;
margin-top: 10px;
@media(@md){
font-size: 14px;
margin-top: 0;
}
}
&__nav {
.make-xs-column(18.5);
@media(@md){
float: none;
width: 100%;
padding: 0px 60px 0px 67px;
}
&__wrapper {
@media(@md){
display: none;
}
}
}
&__do {
.make-xs-column(3.5);
.make-md-column(24);
.make-lg-column(3.5);
margin-top: 15px;
text-align: right;
......@@ -37,6 +54,76 @@
}
}
.mobile-menu {
position: absolute;
top: 20px;
right: 10px;
width: 43px;
height: 40px;
color: #345;
border: 2px solid white;
background: #125f8e;
z-index: 2;
cursor: pointer;
font-size: 20px;
display: none;
@media(@md){
display: block;
}
span {
position: relative;
background-color: white;
height: 2px;
display: block;
width: 22px;
margin: 17px auto 0;
//transition: all 0.4s;
//transition-delay: 0.3s;
&:before,
&:after {
content: '';
position: absolute;
display: block;
width: 20px;
height: 0;
left: 1px;
top: 50%;
margin-top: -7px;
//transition: all 0.3s 0.3s;
}
&:before {
box-shadow: 0 14px 0 1px white;
}
&:after {
box-shadow: 0 0 0 1px white;
}
}
&.active {
span {
background-color: transparent;
&:before {
transform: rotate(-45deg);
}
&:after {
transform: rotate(45deg);
}
&:before,
&:after {
margin-top: 0;
box-shadow: 0 0 0 1px white;
}
}
}
}
.nav {
&--promo {
......@@ -88,4 +175,6 @@
}
}
}
}
\ No newline at end of file
}
......
......@@ -6,5 +6,10 @@
width: 60px;
height: 68px;
background-size: cover;
@media(@md){
width: 45px;
height: 50px;
}
}
}
\ No newline at end of file
......
@import "../../bower_components/bootstrap/less/bootstrap";
@import "../../bower_components/bootstrap-select/less/bootstrap-select";
@import (inline)"../../bower_components/sidr/dist/stylesheets/jquery.sidr.dark.css";
@import "fonts";
@import "variables";
......
......@@ -3,6 +3,9 @@
text-align: center;
padding: 30px 0px;
color: #125f8e;
@media(@md){
padding: 0;
}
&__row {
.row;
......@@ -11,19 +14,36 @@
&__logo {
margin-bottom: 30px;
display: inline-block;
@media(@md){
margin-bottom: 10px;
}
}
&__title {
.head-h1;
@media(@md){
font-size: 20px;
}
@media(@xs){
font-size: 18px;
}
}
&__nav {
margin-top: 30px;
@media(@md){
display: block;
}
li {
margin: 0px 10px;
margin: 0px 10px 10px 10px;
@media(@xs){
width: 100%;
margin: 0px 0px 10px 0px;
}
a {
display: inline-block;
color: #125f8e;
font-size: 19px;
border-bottom: 1px rgba(18, 95, 142, 0.5) dashed;
......
......@@ -27,7 +27,7 @@
// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 970px;
@screen-lg: 990px;
@screen-lg-min: @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min;
......@@ -58,12 +58,12 @@
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
@container-tablet: (950px + @grid-gutter-width);
@container-tablet: (100%);
//** For `@screen-sm-min` and up.
@container-sm: @container-tablet;
// Medium screen / desktop
@container-desktop: (950px + @grid-gutter-width);
@container-desktop: (100%);
//** For `@screen-md-min` and up.
@container-md: @container-desktop;
......
......@@ -6,17 +6,29 @@
padding: 20px 20px;
&__map {
.make-xs-column(10);
.make-xs-column(24);
.make-lg-column(10);
@media(@md){
padding: 0;
}
&__iframe {
width: 100%;
height: 200px;
@media(@md){
height: 300px;
}
}
}
&__description {
.make-xs-column(12);
.make-xs-column(24);
.make-lg-column(12);
margin-top: 80px;
@media(@md){
margin-top: 20px;
padding: 0;
}
}
&__label {
......@@ -57,8 +69,7 @@
}
&__block {
float: left;
margin: 0px -20px;
margin: 0px -10px;
margin-bottom: 20px;
&:last-child {
......@@ -68,28 +79,64 @@
&__profile {
.make-xs-column(24);
padding: 0;
margin-bottom: 20px;
@media(@sm){
padding: 0;
}
&__wrapper {
.make-xs-column(15);
.make-xs-column(24);
.make-md-column(15);
}
&__img {
.make-xs-column(9);
.make-xs-column(24);
.make-md-column(9);
padding: 0;
@media(@sm){
text-align: center;
//padding: 0;
}
}
&__description {
.make-xs-column(15);
.make-xs-column(24);
.make-md-column(15);
padding: 0;
@media(@sm){
//padding: 0;
}
&__wrapper {
.make-xs-column(15);
}
p {
@media(@sm){
font-size: 18px;
}
}
}
}
&__description {
.make-xs-column(8);
.make-xs-column(24);
.pull-right;
@media(@sm){
padding: 0;
}
p {
@media(@sm){
font-size: 18px;
}
}
&__wrapper {
.make-sm-column(24);
.make-md-column(9);
}
}
}
......