Showing
24 changed files
with
1972 additions
and
92 deletions
| ... | @@ -9,6 +9,7 @@ | ... | @@ -9,6 +9,7 @@ |
| 9 | <div class="header__nav "> | 9 | <div class="header__nav "> |
| 10 | <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> | 10 | <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> |
| 11 | 11 | ||
| 12 | + <div class="header__nav__wrapper"> | ||
| 12 | <ul class="nav nav--header"> | 13 | <ul class="nav nav--header"> |
| 13 | <li><a href="about.html">О совете депутатов</a></li> | 14 | <li><a href="about.html">О совете депутатов</a></li> |
| 14 | <li><a href="candidates.html">Кандидаты</a></li> | 15 | <li><a href="candidates.html">Кандидаты</a></li> |
| ... | @@ -17,6 +18,11 @@ | ... | @@ -17,6 +18,11 @@ |
| 17 | <li><a href="vote.html">Как проголосовать</a></li> | 18 | <li><a href="vote.html">Как проголосовать</a></li> |
| 18 | </ul> | 19 | </ul> |
| 19 | </div> | 20 | </div> |
| 21 | + </div> | ||
| 22 | + | ||
| 23 | + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a> | ||
| 24 | + | ||
| 25 | + <!--<a id="right-menu" href="#right-menu">Right Menu</a>--> | ||
| 20 | 26 | ||
| 21 | <div class="header__do"> | 27 | <div class="header__do"> |
| 22 | <button type="button" class="btn btn-default btn__attention">Поддержать</button> | 28 | <button type="button" class="btn btn-default btn__attention">Поддержать</button> | ... | ... |
| ... | @@ -23,6 +23,7 @@ | ... | @@ -23,6 +23,7 @@ |
| 23 | <div class="header__nav "> | 23 | <div class="header__nav "> |
| 24 | <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> | 24 | <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> |
| 25 | 25 | ||
| 26 | + <div class="header__nav__wrapper"> | ||
| 26 | <ul class="nav nav--header"> | 27 | <ul class="nav nav--header"> |
| 27 | <li><a href="about.html">О совете депутатов</a></li> | 28 | <li><a href="about.html">О совете депутатов</a></li> |
| 28 | <li><a href="candidates.html">Кандидаты</a></li> | 29 | <li><a href="candidates.html">Кандидаты</a></li> |
| ... | @@ -31,6 +32,11 @@ | ... | @@ -31,6 +32,11 @@ |
| 31 | <li><a href="vote.html">Как проголосовать</a></li> | 32 | <li><a href="vote.html">Как проголосовать</a></li> |
| 32 | </ul> | 33 | </ul> |
| 33 | </div> | 34 | </div> |
| 35 | + </div> | ||
| 36 | + | ||
| 37 | + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a> | ||
| 38 | + | ||
| 39 | + <!--<a id="right-menu" href="#right-menu">Right Menu</a>--> | ||
| 34 | 40 | ||
| 35 | <div class="header__do"> | 41 | <div class="header__do"> |
| 36 | <button type="button" class="btn btn-default btn__attention">Поддержать</button> | 42 | <button type="button" class="btn btn-default btn__attention">Поддержать</button> | ... | ... |
| ... | @@ -23,6 +23,7 @@ | ... | @@ -23,6 +23,7 @@ |
| 23 | <div class="header__nav "> | 23 | <div class="header__nav "> |
| 24 | <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> | 24 | <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> |
| 25 | 25 | ||
| 26 | + <div class="header__nav__wrapper"> | ||
| 26 | <ul class="nav nav--header"> | 27 | <ul class="nav nav--header"> |
| 27 | <li><a href="about.html">О совете депутатов</a></li> | 28 | <li><a href="about.html">О совете депутатов</a></li> |
| 28 | <li><a href="candidates.html">Кандидаты</a></li> | 29 | <li><a href="candidates.html">Кандидаты</a></li> |
| ... | @@ -31,6 +32,11 @@ | ... | @@ -31,6 +32,11 @@ |
| 31 | <li><a href="vote.html">Как проголосовать</a></li> | 32 | <li><a href="vote.html">Как проголосовать</a></li> |
| 32 | </ul> | 33 | </ul> |
| 33 | </div> | 34 | </div> |
| 35 | + </div> | ||
| 36 | + | ||
| 37 | + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a> | ||
| 38 | + | ||
| 39 | + <!--<a id="right-menu" href="#right-menu">Right Menu</a>--> | ||
| 34 | 40 | ||
| 35 | <div class="header__do"> | 41 | <div class="header__do"> |
| 36 | <button type="button" class="btn btn-default btn__attention">Поддержать</button> | 42 | <button type="button" class="btn btn-default btn__attention">Поддержать</button> | ... | ... |
| ... | @@ -1570,15 +1570,15 @@ pre code { | ... | @@ -1570,15 +1570,15 @@ pre code { |
| 1570 | } | 1570 | } |
| 1571 | @media (min-width: 550px) { | 1571 | @media (min-width: 550px) { |
| 1572 | .container { | 1572 | .container { |
| 1573 | - width: 970px; | 1573 | + width: 100%; |
| 1574 | } | 1574 | } |
| 1575 | } | 1575 | } |
| 1576 | @media (min-width: 797px) { | 1576 | @media (min-width: 797px) { |
| 1577 | .container { | 1577 | .container { |
| 1578 | - width: 970px; | 1578 | + width: 100%; |
| 1579 | } | 1579 | } |
| 1580 | } | 1580 | } |
| 1581 | -@media (min-width: 970px) { | 1581 | +@media (min-width: 990px) { |
| 1582 | .container { | 1582 | .container { |
| 1583 | width: 970px; | 1583 | width: 970px; |
| 1584 | } | 1584 | } |
| ... | @@ -2503,7 +2503,7 @@ pre code { | ... | @@ -2503,7 +2503,7 @@ pre code { |
| 2503 | margin-left: 0%; | 2503 | margin-left: 0%; |
| 2504 | } | 2504 | } |
| 2505 | } | 2505 | } |
| 2506 | -@media (min-width: 970px) { | 2506 | +@media (min-width: 990px) { |
| 2507 | .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 { | 2507 | .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 { |
| 2508 | float: left; | 2508 | float: left; |
| 2509 | } | 2509 | } |
| ... | @@ -7106,7 +7106,7 @@ button.close { | ... | @@ -7106,7 +7106,7 @@ button.close { |
| 7106 | display: inline-block !important; | 7106 | display: inline-block !important; |
| 7107 | } | 7107 | } |
| 7108 | } | 7108 | } |
| 7109 | -@media (min-width: 797px) and (max-width: 969px) { | 7109 | +@media (min-width: 797px) and (max-width: 989px) { |
| 7110 | .visible-md { | 7110 | .visible-md { |
| 7111 | display: block !important; | 7111 | display: block !important; |
| 7112 | } | 7112 | } |
| ... | @@ -7121,22 +7121,22 @@ button.close { | ... | @@ -7121,22 +7121,22 @@ button.close { |
| 7121 | display: table-cell !important; | 7121 | display: table-cell !important; |
| 7122 | } | 7122 | } |
| 7123 | } | 7123 | } |
| 7124 | -@media (min-width: 797px) and (max-width: 969px) { | 7124 | +@media (min-width: 797px) and (max-width: 989px) { |
| 7125 | .visible-md-block { | 7125 | .visible-md-block { |
| 7126 | display: block !important; | 7126 | display: block !important; |
| 7127 | } | 7127 | } |
| 7128 | } | 7128 | } |
| 7129 | -@media (min-width: 797px) and (max-width: 969px) { | 7129 | +@media (min-width: 797px) and (max-width: 989px) { |
| 7130 | .visible-md-inline { | 7130 | .visible-md-inline { |
| 7131 | display: inline !important; | 7131 | display: inline !important; |
| 7132 | } | 7132 | } |
| 7133 | } | 7133 | } |
| 7134 | -@media (min-width: 797px) and (max-width: 969px) { | 7134 | +@media (min-width: 797px) and (max-width: 989px) { |
| 7135 | .visible-md-inline-block { | 7135 | .visible-md-inline-block { |
| 7136 | display: inline-block !important; | 7136 | display: inline-block !important; |
| 7137 | } | 7137 | } |
| 7138 | } | 7138 | } |
| 7139 | -@media (min-width: 970px) { | 7139 | +@media (min-width: 990px) { |
| 7140 | .visible-lg { | 7140 | .visible-lg { |
| 7141 | display: block !important; | 7141 | display: block !important; |
| 7142 | } | 7142 | } |
| ... | @@ -7151,17 +7151,17 @@ button.close { | ... | @@ -7151,17 +7151,17 @@ button.close { |
| 7151 | display: table-cell !important; | 7151 | display: table-cell !important; |
| 7152 | } | 7152 | } |
| 7153 | } | 7153 | } |
| 7154 | -@media (min-width: 970px) { | 7154 | +@media (min-width: 990px) { |
| 7155 | .visible-lg-block { | 7155 | .visible-lg-block { |
| 7156 | display: block !important; | 7156 | display: block !important; |
| 7157 | } | 7157 | } |
| 7158 | } | 7158 | } |
| 7159 | -@media (min-width: 970px) { | 7159 | +@media (min-width: 990px) { |
| 7160 | .visible-lg-inline { | 7160 | .visible-lg-inline { |
| 7161 | display: inline !important; | 7161 | display: inline !important; |
| 7162 | } | 7162 | } |
| 7163 | } | 7163 | } |
| 7164 | -@media (min-width: 970px) { | 7164 | +@media (min-width: 990px) { |
| 7165 | .visible-lg-inline-block { | 7165 | .visible-lg-inline-block { |
| 7166 | display: inline-block !important; | 7166 | display: inline-block !important; |
| 7167 | } | 7167 | } |
| ... | @@ -7176,12 +7176,12 @@ button.close { | ... | @@ -7176,12 +7176,12 @@ button.close { |
| 7176 | display: none !important; | 7176 | display: none !important; |
| 7177 | } | 7177 | } |
| 7178 | } | 7178 | } |
| 7179 | -@media (min-width: 797px) and (max-width: 969px) { | 7179 | +@media (min-width: 797px) and (max-width: 989px) { |
| 7180 | .hidden-md { | 7180 | .hidden-md { |
| 7181 | display: none !important; | 7181 | display: none !important; |
| 7182 | } | 7182 | } |
| 7183 | } | 7183 | } |
| 7184 | -@media (min-width: 970px) { | 7184 | +@media (min-width: 990px) { |
| 7185 | .hidden-lg { | 7185 | .hidden-lg { |
| 7186 | display: none !important; | 7186 | display: none !important; |
| 7187 | } | 7187 | } |
| ... | @@ -7515,6 +7515,166 @@ select.selectpicker { | ... | @@ -7515,6 +7515,166 @@ select.selectpicker { |
| 7515 | width: 100%; | 7515 | width: 100%; |
| 7516 | float: none; | 7516 | float: none; |
| 7517 | } | 7517 | } |
| 7518 | +.sidr { | ||
| 7519 | + display: block; | ||
| 7520 | + position: fixed; | ||
| 7521 | + top: 0; | ||
| 7522 | + height: 100%; | ||
| 7523 | + z-index: 999999; | ||
| 7524 | + width: 260px; | ||
| 7525 | + overflow-x: hidden; | ||
| 7526 | + overflow-y: auto; | ||
| 7527 | + font-family: "lucida grande", tahoma, verdana, arial, sans-serif; | ||
| 7528 | + font-size: 15px; | ||
| 7529 | + background: #333; | ||
| 7530 | + color: #fff; | ||
| 7531 | + box-shadow: 0 0 5px 5px #222 inset; | ||
| 7532 | +} | ||
| 7533 | +.sidr .sidr-inner { | ||
| 7534 | + padding: 0 0 15px; | ||
| 7535 | +} | ||
| 7536 | +.sidr .sidr-inner > p { | ||
| 7537 | + margin-left: 15px; | ||
| 7538 | + margin-right: 15px; | ||
| 7539 | +} | ||
| 7540 | +.sidr.right { | ||
| 7541 | + left: auto; | ||
| 7542 | + right: -260px; | ||
| 7543 | +} | ||
| 7544 | +.sidr.left { | ||
| 7545 | + left: -260px; | ||
| 7546 | + right: auto; | ||
| 7547 | +} | ||
| 7548 | +.sidr h1, | ||
| 7549 | +.sidr h2, | ||
| 7550 | +.sidr h3, | ||
| 7551 | +.sidr h4, | ||
| 7552 | +.sidr h5, | ||
| 7553 | +.sidr h6 { | ||
| 7554 | + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFhMWExYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); | ||
| 7555 | + background-size: 100%; | ||
| 7556 | + background-image: linear-gradient(#4d4d4d, #1a1a1a); | ||
| 7557 | + font-size: 11px; | ||
| 7558 | + font-weight: normal; | ||
| 7559 | + padding: 0 15px; | ||
| 7560 | + margin: 0 0 5px; | ||
| 7561 | + color: #fff; | ||
| 7562 | + line-height: 24px; | ||
| 7563 | + box-shadow: 0 5px 5px 3px rgba(0, 0, 0, 0.2); | ||
| 7564 | +} | ||
| 7565 | +.sidr p { | ||
| 7566 | + font-size: 13px; | ||
| 7567 | + margin: 0 0 12px; | ||
| 7568 | +} | ||
| 7569 | +.sidr p a { | ||
| 7570 | + color: rgba(255, 255, 255, 0.9); | ||
| 7571 | +} | ||
| 7572 | +.sidr > p { | ||
| 7573 | + margin-left: 15px; | ||
| 7574 | + margin-right: 15px; | ||
| 7575 | +} | ||
| 7576 | +.sidr ul { | ||
| 7577 | + display: block; | ||
| 7578 | + margin: 0 0 15px; | ||
| 7579 | + padding: 0; | ||
| 7580 | + border-top: 1px solid #1a1a1a; | ||
| 7581 | + border-bottom: 1px solid #4d4d4d; | ||
| 7582 | +} | ||
| 7583 | +.sidr ul li { | ||
| 7584 | + display: block; | ||
| 7585 | + margin: 0; | ||
| 7586 | + line-height: 48px; | ||
| 7587 | + border-top: 1px solid #4d4d4d; | ||
| 7588 | + border-bottom: 1px solid #1a1a1a; | ||
| 7589 | +} | ||
| 7590 | +.sidr ul li:hover, .sidr ul li.active, .sidr ul li.sidr-class-active { | ||
| 7591 | + border-top: 0; | ||
| 7592 | + line-height: 49px; | ||
| 7593 | +} | ||
| 7594 | +.sidr ul li:hover > a, | ||
| 7595 | +.sidr ul li:hover > span, .sidr ul li.active > a, | ||
| 7596 | +.sidr ul li.active > span, .sidr ul li.sidr-class-active > a, | ||
| 7597 | +.sidr ul li.sidr-class-active > span { | ||
| 7598 | + box-shadow: 0 0 15px 3px #222 inset; | ||
| 7599 | +} | ||
| 7600 | +.sidr ul li a, | ||
| 7601 | +.sidr ul li span { | ||
| 7602 | + padding: 0 15px; | ||
| 7603 | + display: block; | ||
| 7604 | + text-decoration: none; | ||
| 7605 | + color: #fff; | ||
| 7606 | +} | ||
| 7607 | +.sidr ul li ul { | ||
| 7608 | + border-bottom: 0; | ||
| 7609 | + margin: 0; | ||
| 7610 | +} | ||
| 7611 | +.sidr ul li ul li { | ||
| 7612 | + line-height: 40px; | ||
| 7613 | + font-size: 13px; | ||
| 7614 | +} | ||
| 7615 | +.sidr ul li ul li:last-child { | ||
| 7616 | + border-bottom: 0; | ||
| 7617 | +} | ||
| 7618 | +.sidr ul li ul li:hover, .sidr ul li ul li.active, .sidr ul li ul li.sidr-class-active { | ||
| 7619 | + border-top: 0; | ||
| 7620 | + line-height: 41px; | ||
| 7621 | +} | ||
| 7622 | +.sidr ul li ul li:hover > a, | ||
| 7623 | +.sidr ul li ul li:hover > span, .sidr ul li ul li.active > a, | ||
| 7624 | +.sidr ul li ul li.active > span, .sidr ul li ul li.sidr-class-active > a, | ||
| 7625 | +.sidr ul li ul li.sidr-class-active > span { | ||
| 7626 | + box-shadow: 0 0 15px 3px #222 inset; | ||
| 7627 | +} | ||
| 7628 | +.sidr ul li ul li a, | ||
| 7629 | +.sidr ul li ul li span { | ||
| 7630 | + color: rgba(255, 255, 255, 0.8); | ||
| 7631 | + padding-left: 30px; | ||
| 7632 | +} | ||
| 7633 | +.sidr form { | ||
| 7634 | + margin: 0 15px; | ||
| 7635 | +} | ||
| 7636 | +.sidr label { | ||
| 7637 | + font-size: 13px; | ||
| 7638 | +} | ||
| 7639 | +.sidr input[type="text"], | ||
| 7640 | +.sidr input[type="password"], | ||
| 7641 | +.sidr input[type="date"], | ||
| 7642 | +.sidr input[type="datetime"], | ||
| 7643 | +.sidr input[type="email"], | ||
| 7644 | +.sidr input[type="number"], | ||
| 7645 | +.sidr input[type="search"], | ||
| 7646 | +.sidr input[type="tel"], | ||
| 7647 | +.sidr input[type="time"], | ||
| 7648 | +.sidr input[type="url"], | ||
| 7649 | +.sidr textarea, | ||
| 7650 | +.sidr select { | ||
| 7651 | + width: 100%; | ||
| 7652 | + font-size: 13px; | ||
| 7653 | + padding: 5px; | ||
| 7654 | + box-sizing: border-box; | ||
| 7655 | + margin: 0 0 10px; | ||
| 7656 | + border-radius: 2px; | ||
| 7657 | + border: 0; | ||
| 7658 | + background: rgba(0, 0, 0, 0.1); | ||
| 7659 | + color: rgba(255, 255, 255, 0.6); | ||
| 7660 | + display: block; | ||
| 7661 | + clear: both; | ||
| 7662 | +} | ||
| 7663 | +.sidr input[type=checkbox] { | ||
| 7664 | + width: auto; | ||
| 7665 | + display: inline; | ||
| 7666 | + clear: none; | ||
| 7667 | +} | ||
| 7668 | +.sidr input[type=button], | ||
| 7669 | +.sidr input[type=submit] { | ||
| 7670 | + color: #333; | ||
| 7671 | + background: #fff; | ||
| 7672 | +} | ||
| 7673 | +.sidr input[type=button]:hover, | ||
| 7674 | +.sidr input[type=submit]:hover { | ||
| 7675 | + background: rgba(255, 255, 255, 0.9); | ||
| 7676 | +} | ||
| 7677 | + | ||
| 7518 | /* | 7678 | /* |
| 7519 | LESS variables are information about icon's compiled state, stored under its original file name | 7679 | LESS variables are information about icon's compiled state, stored under its original file name |
| 7520 | 7680 | ||
| ... | @@ -7571,9 +7731,11 @@ This must be run when you have at least 2 sprites. | ... | @@ -7571,9 +7731,11 @@ This must be run when you have at least 2 sprites. |
| 7571 | height: 68px; | 7731 | height: 68px; |
| 7572 | background-size: cover; | 7732 | background-size: cover; |
| 7573 | } | 7733 | } |
| 7574 | -body, | 7734 | +@media (max-width: 989px) { |
| 7575 | -html { | 7735 | + .icon__logo { |
| 7576 | - min-width: 970px; | 7736 | + width: 45px; |
| 7737 | + height: 50px; | ||
| 7738 | + } | ||
| 7577 | } | 7739 | } |
| 7578 | .head-h1 { | 7740 | .head-h1 { |
| 7579 | font-size: 28px; | 7741 | font-size: 28px; |
| ... | @@ -7588,6 +7750,7 @@ label { | ... | @@ -7588,6 +7750,7 @@ label { |
| 7588 | } | 7750 | } |
| 7589 | .btn { | 7751 | .btn { |
| 7590 | outline: none; | 7752 | outline: none; |
| 7753 | + white-space: normal; | ||
| 7591 | } | 7754 | } |
| 7592 | .btn:active, | 7755 | .btn:active, |
| 7593 | .btn:focus { | 7756 | .btn:focus { |
| ... | @@ -7602,14 +7765,15 @@ label { | ... | @@ -7602,14 +7765,15 @@ label { |
| 7602 | color: white; | 7765 | color: white; |
| 7603 | } | 7766 | } |
| 7604 | .btn__attention:hover, | 7767 | .btn__attention:hover, |
| 7605 | -.btn__attention:focus { | 7768 | +.btn__attention:focus, |
| 7769 | +.btn__attention:active { | ||
| 7606 | background-color: #fb1e42; | 7770 | background-color: #fb1e42; |
| 7607 | border: 1px solid #fb1e42; | 7771 | border: 1px solid #fb1e42; |
| 7608 | color: white; | 7772 | color: white; |
| 7609 | } | 7773 | } |
| 7610 | -.btn__attention:hover:active, | 7774 | +.btn__attention:hover:active { |
| 7611 | -.btn__attention:focus:active { | ||
| 7612 | background-color: #fb1e42; | 7775 | background-color: #fb1e42; |
| 7776 | + border: 1px solid #fb1e42; | ||
| 7613 | color: white; | 7777 | color: white; |
| 7614 | } | 7778 | } |
| 7615 | .btn__attention--blue { | 7779 | .btn__attention--blue { |
| ... | @@ -7617,14 +7781,15 @@ label { | ... | @@ -7617,14 +7781,15 @@ label { |
| 7617 | border: 1px solid #125f8e; | 7781 | border: 1px solid #125f8e; |
| 7618 | } | 7782 | } |
| 7619 | .btn__attention--blue:hover, | 7783 | .btn__attention--blue:hover, |
| 7620 | -.btn__attention--blue:focus { | 7784 | +.btn__attention--blue:focus, |
| 7785 | +.btn__attention--blue:active { | ||
| 7621 | background-color: #125f8e; | 7786 | background-color: #125f8e; |
| 7622 | border: 1px solid #125f8e; | 7787 | border: 1px solid #125f8e; |
| 7623 | color: white; | 7788 | color: white; |
| 7624 | } | 7789 | } |
| 7625 | -.btn__attention--blue:hover:active, | 7790 | +.btn__attention--blue:hover:active { |
| 7626 | -.btn__attention--blue:focus:active { | ||
| 7627 | background-color: #125f8e; | 7791 | background-color: #125f8e; |
| 7792 | + border: 1px solid #125f8e; | ||
| 7628 | color: white; | 7793 | color: white; |
| 7629 | } | 7794 | } |
| 7630 | .btn__big { | 7795 | .btn__big { |
| ... | @@ -7639,21 +7804,23 @@ label { | ... | @@ -7639,21 +7804,23 @@ label { |
| 7639 | transition: all 0.2s ease; | 7804 | transition: all 0.2s ease; |
| 7640 | text-transform: uppercase; | 7805 | text-transform: uppercase; |
| 7641 | } | 7806 | } |
| 7642 | -.btn__big:hover { | 7807 | +@media (max-width: 549px) { |
| 7643 | - background-color: rgba(18, 95, 142, 0.8); | 7808 | + .btn__big { |
| 7644 | - color: white; | 7809 | + width: 100%; |
| 7645 | -} | 7810 | + font-size: 12px; |
| 7646 | -.btn__big:focus { | 7811 | + padding: 10px 0px; |
| 7647 | - text-decoration: none; | 7812 | + } |
| 7648 | - background-color: #125f8e; | ||
| 7649 | - color: white; | ||
| 7650 | } | 7813 | } |
| 7814 | +.btn__big:hover, | ||
| 7815 | +.btn__big:focus, | ||
| 7651 | .btn__big:active { | 7816 | .btn__big:active { |
| 7652 | background-color: rgba(18, 95, 142, 0.8); | 7817 | background-color: rgba(18, 95, 142, 0.8); |
| 7818 | + border: 1px solid rgba(18, 95, 142, 0.8); | ||
| 7653 | color: white; | 7819 | color: white; |
| 7654 | } | 7820 | } |
| 7655 | -.btn__big:active:focus { | 7821 | +.btn__big:hover:active { |
| 7656 | background-color: rgba(18, 95, 142, 0.8); | 7822 | background-color: rgba(18, 95, 142, 0.8); |
| 7823 | + border: 1px solid rgba(18, 95, 142, 0.8); | ||
| 7657 | color: white; | 7824 | color: white; |
| 7658 | } | 7825 | } |
| 7659 | .btn__thin { | 7826 | .btn__thin { |
| ... | @@ -7669,7 +7836,15 @@ label { | ... | @@ -7669,7 +7836,15 @@ label { |
| 7669 | color: white; | 7836 | color: white; |
| 7670 | } | 7837 | } |
| 7671 | .btn__thin:hover, | 7838 | .btn__thin:hover, |
| 7672 | -.btn__thin:focus { | 7839 | +.btn__thin:focus, |
| 7840 | +.btn__thin:active { | ||
| 7841 | + background-color: #fb1e42; | ||
| 7842 | + border: 1px solid #fb1e42; | ||
| 7843 | + color: white; | ||
| 7844 | +} | ||
| 7845 | +.btn__thin:hover:active { | ||
| 7846 | + background-color: #fb1e42; | ||
| 7847 | + border: 1px solid #fb1e42; | ||
| 7673 | color: white; | 7848 | color: white; |
| 7674 | } | 7849 | } |
| 7675 | .header { | 7850 | .header { |
| ... | @@ -7685,15 +7860,15 @@ label { | ... | @@ -7685,15 +7860,15 @@ label { |
| 7685 | } | 7860 | } |
| 7686 | @media (min-width: 550px) { | 7861 | @media (min-width: 550px) { |
| 7687 | .header__container { | 7862 | .header__container { |
| 7688 | - width: 970px; | 7863 | + width: 100%; |
| 7689 | } | 7864 | } |
| 7690 | } | 7865 | } |
| 7691 | @media (min-width: 797px) { | 7866 | @media (min-width: 797px) { |
| 7692 | .header__container { | 7867 | .header__container { |
| 7693 | - width: 970px; | 7868 | + width: 100%; |
| 7694 | } | 7869 | } |
| 7695 | } | 7870 | } |
| 7696 | -@media (min-width: 970px) { | 7871 | +@media (min-width: 990px) { |
| 7697 | .header__container { | 7872 | .header__container { |
| 7698 | width: 970px; | 7873 | width: 970px; |
| 7699 | } | 7874 | } |
| ... | @@ -7721,12 +7896,19 @@ label { | ... | @@ -7721,12 +7896,19 @@ label { |
| 7721 | min-height: 1px; | 7896 | min-height: 1px; |
| 7722 | padding-left: 10px; | 7897 | padding-left: 10px; |
| 7723 | padding-right: 10px; | 7898 | padding-right: 10px; |
| 7899 | + width: initial; | ||
| 7724 | } | 7900 | } |
| 7725 | .header__title { | 7901 | .header__title { |
| 7726 | font-size: 18px; | 7902 | font-size: 18px; |
| 7727 | font-weight: bold; | 7903 | font-weight: bold; |
| 7728 | margin-top: 10px; | 7904 | margin-top: 10px; |
| 7729 | } | 7905 | } |
| 7906 | +@media (max-width: 989px) { | ||
| 7907 | + .header__title { | ||
| 7908 | + font-size: 14px; | ||
| 7909 | + margin-top: 0; | ||
| 7910 | + } | ||
| 7911 | +} | ||
| 7730 | .header__nav { | 7912 | .header__nav { |
| 7731 | position: relative; | 7913 | position: relative; |
| 7732 | float: left; | 7914 | float: left; |
| ... | @@ -7735,19 +7917,99 @@ label { | ... | @@ -7735,19 +7917,99 @@ label { |
| 7735 | padding-left: 10px; | 7917 | padding-left: 10px; |
| 7736 | padding-right: 10px; | 7918 | padding-right: 10px; |
| 7737 | } | 7919 | } |
| 7920 | +@media (max-width: 989px) { | ||
| 7921 | + .header__nav { | ||
| 7922 | + float: none; | ||
| 7923 | + width: 100%; | ||
| 7924 | + padding: 0px 60px 0px 67px; | ||
| 7925 | + } | ||
| 7926 | +} | ||
| 7927 | +@media (max-width: 989px) { | ||
| 7928 | + .header__nav__wrapper { | ||
| 7929 | + display: none; | ||
| 7930 | + } | ||
| 7931 | +} | ||
| 7738 | .header__do { | 7932 | .header__do { |
| 7739 | position: relative; | 7933 | position: relative; |
| 7740 | - float: left; | ||
| 7741 | - width: 14.58333333%; | ||
| 7742 | min-height: 1px; | 7934 | min-height: 1px; |
| 7743 | padding-left: 10px; | 7935 | padding-left: 10px; |
| 7744 | padding-right: 10px; | 7936 | padding-right: 10px; |
| 7745 | margin-top: 15px; | 7937 | margin-top: 15px; |
| 7746 | text-align: right; | 7938 | text-align: right; |
| 7747 | } | 7939 | } |
| 7940 | +@media (min-width: 797px) { | ||
| 7941 | + .header__do { | ||
| 7942 | + float: left; | ||
| 7943 | + width: 100%; | ||
| 7944 | + } | ||
| 7945 | +} | ||
| 7946 | +@media (min-width: 990px) { | ||
| 7947 | + .header__do { | ||
| 7948 | + float: left; | ||
| 7949 | + width: 14.58333333%; | ||
| 7950 | + } | ||
| 7951 | +} | ||
| 7748 | .header__do .btn { | 7952 | .header__do .btn { |
| 7749 | width: 100%; | 7953 | width: 100%; |
| 7750 | } | 7954 | } |
| 7955 | +.mobile-menu { | ||
| 7956 | + position: absolute; | ||
| 7957 | + top: 20px; | ||
| 7958 | + right: 10px; | ||
| 7959 | + width: 43px; | ||
| 7960 | + height: 40px; | ||
| 7961 | + color: #345; | ||
| 7962 | + border: 2px solid white; | ||
| 7963 | + background: #125f8e; | ||
| 7964 | + z-index: 2; | ||
| 7965 | + cursor: pointer; | ||
| 7966 | + font-size: 20px; | ||
| 7967 | + display: none; | ||
| 7968 | +} | ||
| 7969 | +@media (max-width: 989px) { | ||
| 7970 | + .mobile-menu { | ||
| 7971 | + display: block; | ||
| 7972 | + } | ||
| 7973 | +} | ||
| 7974 | +.mobile-menu span { | ||
| 7975 | + position: relative; | ||
| 7976 | + background-color: white; | ||
| 7977 | + height: 2px; | ||
| 7978 | + display: block; | ||
| 7979 | + width: 22px; | ||
| 7980 | + margin: 17px auto 0; | ||
| 7981 | +} | ||
| 7982 | +.mobile-menu span:before, | ||
| 7983 | +.mobile-menu span:after { | ||
| 7984 | + content: ''; | ||
| 7985 | + position: absolute; | ||
| 7986 | + display: block; | ||
| 7987 | + width: 20px; | ||
| 7988 | + height: 0; | ||
| 7989 | + left: 1px; | ||
| 7990 | + top: 50%; | ||
| 7991 | + margin-top: -7px; | ||
| 7992 | +} | ||
| 7993 | +.mobile-menu span:before { | ||
| 7994 | + box-shadow: 0 14px 0 1px white; | ||
| 7995 | +} | ||
| 7996 | +.mobile-menu span:after { | ||
| 7997 | + box-shadow: 0 0 0 1px white; | ||
| 7998 | +} | ||
| 7999 | +.mobile-menu.active span { | ||
| 8000 | + background-color: transparent; | ||
| 8001 | +} | ||
| 8002 | +.mobile-menu.active span:before { | ||
| 8003 | + transform: rotate(-45deg); | ||
| 8004 | +} | ||
| 8005 | +.mobile-menu.active span:after { | ||
| 8006 | + transform: rotate(45deg); | ||
| 8007 | +} | ||
| 8008 | +.mobile-menu.active span:before, | ||
| 8009 | +.mobile-menu.active span:after { | ||
| 8010 | + margin-top: 0; | ||
| 8011 | + box-shadow: 0 0 0 1px white; | ||
| 8012 | +} | ||
| 7751 | .nav--promo { | 8013 | .nav--promo { |
| 7752 | width: 100%; | 8014 | width: 100%; |
| 7753 | text-align: center; | 8015 | text-align: center; |
| ... | @@ -7796,6 +8058,11 @@ label { | ... | @@ -7796,6 +8058,11 @@ label { |
| 7796 | background: #125f8e; | 8058 | background: #125f8e; |
| 7797 | color: white; | 8059 | color: white; |
| 7798 | } | 8060 | } |
| 8061 | +@media (max-width: 989px) { | ||
| 8062 | + .footer { | ||
| 8063 | + padding: 20px 0px; | ||
| 8064 | + } | ||
| 8065 | +} | ||
| 7799 | .footer__container { | 8066 | .footer__container { |
| 7800 | margin-right: auto; | 8067 | margin-right: auto; |
| 7801 | margin-left: auto; | 8068 | margin-left: auto; |
| ... | @@ -7804,15 +8071,15 @@ label { | ... | @@ -7804,15 +8071,15 @@ label { |
| 7804 | } | 8071 | } |
| 7805 | @media (min-width: 550px) { | 8072 | @media (min-width: 550px) { |
| 7806 | .footer__container { | 8073 | .footer__container { |
| 7807 | - width: 970px; | 8074 | + width: 100%; |
| 7808 | } | 8075 | } |
| 7809 | } | 8076 | } |
| 7810 | @media (min-width: 797px) { | 8077 | @media (min-width: 797px) { |
| 7811 | .footer__container { | 8078 | .footer__container { |
| 7812 | - width: 970px; | 8079 | + width: 100%; |
| 7813 | } | 8080 | } |
| 7814 | } | 8081 | } |
| 7815 | -@media (min-width: 970px) { | 8082 | +@media (min-width: 990px) { |
| 7816 | .footer__container { | 8083 | .footer__container { |
| 7817 | width: 970px; | 8084 | width: 970px; |
| 7818 | } | 8085 | } |
| ... | @@ -7832,9 +8099,22 @@ label { | ... | @@ -7832,9 +8099,22 @@ label { |
| 7832 | .footer__left { | 8099 | .footer__left { |
| 7833 | float: left; | 8100 | float: left; |
| 7834 | } | 8101 | } |
| 8102 | +@media (max-width: 989px) { | ||
| 8103 | + .footer__left { | ||
| 8104 | + width: 100%; | ||
| 8105 | + text-align: center; | ||
| 8106 | + margin-bottom: 20px; | ||
| 8107 | + } | ||
| 8108 | +} | ||
| 7835 | .footer__right { | 8109 | .footer__right { |
| 7836 | float: right; | 8110 | float: right; |
| 7837 | } | 8111 | } |
| 8112 | +@media (max-width: 989px) { | ||
| 8113 | + .footer__right { | ||
| 8114 | + width: 100%; | ||
| 8115 | + text-align: center; | ||
| 8116 | + } | ||
| 8117 | +} | ||
| 7838 | .social { | 8118 | .social { |
| 7839 | padding: 0; | 8119 | padding: 0; |
| 7840 | list-style: none; | 8120 | list-style: none; |
| ... | @@ -7854,6 +8134,12 @@ label { | ... | @@ -7854,6 +8134,12 @@ label { |
| 7854 | min-height: 500px; | 8134 | min-height: 500px; |
| 7855 | padding: 30px 0px; | 8135 | padding: 30px 0px; |
| 7856 | } | 8136 | } |
| 8137 | +@media (max-width: 989px) { | ||
| 8138 | + .content { | ||
| 8139 | + padding: 20px 0px; | ||
| 8140 | + min-height: inherit; | ||
| 8141 | + } | ||
| 8142 | +} | ||
| 7857 | .content__container { | 8143 | .content__container { |
| 7858 | margin-right: auto; | 8144 | margin-right: auto; |
| 7859 | margin-left: auto; | 8145 | margin-left: auto; |
| ... | @@ -7862,15 +8148,15 @@ label { | ... | @@ -7862,15 +8148,15 @@ label { |
| 7862 | } | 8148 | } |
| 7863 | @media (min-width: 550px) { | 8149 | @media (min-width: 550px) { |
| 7864 | .content__container { | 8150 | .content__container { |
| 7865 | - width: 970px; | 8151 | + width: 100%; |
| 7866 | } | 8152 | } |
| 7867 | } | 8153 | } |
| 7868 | @media (min-width: 797px) { | 8154 | @media (min-width: 797px) { |
| 7869 | .content__container { | 8155 | .content__container { |
| 7870 | - width: 970px; | 8156 | + width: 100%; |
| 7871 | } | 8157 | } |
| 7872 | } | 8158 | } |
| 7873 | -@media (min-width: 970px) { | 8159 | +@media (min-width: 990px) { |
| 7874 | .content__container { | 8160 | .content__container { |
| 7875 | width: 970px; | 8161 | width: 970px; |
| 7876 | } | 8162 | } |
| ... | @@ -7894,12 +8180,26 @@ label { | ... | @@ -7894,12 +8180,26 @@ label { |
| 7894 | position: relative; | 8180 | position: relative; |
| 7895 | overflow: hidden; | 8181 | overflow: hidden; |
| 7896 | } | 8182 | } |
| 8183 | +@media (max-width: 796px) { | ||
| 8184 | + .thumbnail--custom { | ||
| 8185 | + height: inherit; | ||
| 8186 | + width: 100%; | ||
| 8187 | + } | ||
| 8188 | +} | ||
| 7897 | .thumbnail--custom img { | 8189 | .thumbnail--custom img { |
| 7898 | position: absolute; | 8190 | position: absolute; |
| 7899 | left: 50%; | 8191 | left: 50%; |
| 7900 | top: 50%; | 8192 | top: 50%; |
| 7901 | transform: translate(-50%, -50%); | 8193 | transform: translate(-50%, -50%); |
| 7902 | } | 8194 | } |
| 8195 | +@media (max-width: 796px) { | ||
| 8196 | + .thumbnail--custom img { | ||
| 8197 | + position: relative; | ||
| 8198 | + left: inherit; | ||
| 8199 | + top: initial; | ||
| 8200 | + transform: none; | ||
| 8201 | + } | ||
| 8202 | +} | ||
| 7903 | .recipient__row { | 8203 | .recipient__row { |
| 7904 | margin-left: -10px; | 8204 | margin-left: -10px; |
| 7905 | margin-right: -10px; | 8205 | margin-right: -10px; |
| ... | @@ -8069,6 +8369,11 @@ label { | ... | @@ -8069,6 +8369,11 @@ label { |
| 8069 | padding: 30px 0px; | 8369 | padding: 30px 0px; |
| 8070 | color: #125f8e; | 8370 | color: #125f8e; |
| 8071 | } | 8371 | } |
| 8372 | +@media (max-width: 989px) { | ||
| 8373 | + .promo { | ||
| 8374 | + padding: 0; | ||
| 8375 | + } | ||
| 8376 | +} | ||
| 8072 | .promo__row { | 8377 | .promo__row { |
| 8073 | margin-left: -10px; | 8378 | margin-left: -10px; |
| 8074 | margin-right: -10px; | 8379 | margin-right: -10px; |
| ... | @@ -8077,16 +8382,43 @@ label { | ... | @@ -8077,16 +8382,43 @@ label { |
| 8077 | margin-bottom: 30px; | 8382 | margin-bottom: 30px; |
| 8078 | display: inline-block; | 8383 | display: inline-block; |
| 8079 | } | 8384 | } |
| 8385 | +@media (max-width: 989px) { | ||
| 8386 | + .promo__logo { | ||
| 8387 | + margin-bottom: 10px; | ||
| 8388 | + } | ||
| 8389 | +} | ||
| 8080 | .promo__title { | 8390 | .promo__title { |
| 8081 | font-size: 28px; | 8391 | font-size: 28px; |
| 8082 | } | 8392 | } |
| 8393 | +@media (max-width: 989px) { | ||
| 8394 | + .promo__title { | ||
| 8395 | + font-size: 20px; | ||
| 8396 | + } | ||
| 8397 | +} | ||
| 8398 | +@media (max-width: 549px) { | ||
| 8399 | + .promo__title { | ||
| 8400 | + font-size: 18px; | ||
| 8401 | + } | ||
| 8402 | +} | ||
| 8083 | .promo__nav { | 8403 | .promo__nav { |
| 8084 | margin-top: 30px; | 8404 | margin-top: 30px; |
| 8085 | } | 8405 | } |
| 8406 | +@media (max-width: 989px) { | ||
| 8407 | + .promo__nav { | ||
| 8408 | + display: block; | ||
| 8409 | + } | ||
| 8410 | +} | ||
| 8086 | .promo__nav li { | 8411 | .promo__nav li { |
| 8087 | - margin: 0px 10px; | 8412 | + margin: 0px 10px 10px 10px; |
| 8413 | +} | ||
| 8414 | +@media (max-width: 549px) { | ||
| 8415 | + .promo__nav li { | ||
| 8416 | + width: 100%; | ||
| 8417 | + margin: 0px 0px 10px 0px; | ||
| 8418 | + } | ||
| 8088 | } | 8419 | } |
| 8089 | .promo__nav li a { | 8420 | .promo__nav li a { |
| 8421 | + display: inline-block; | ||
| 8090 | color: #125f8e; | 8422 | color: #125f8e; |
| 8091 | font-size: 19px; | 8423 | font-size: 19px; |
| 8092 | border-bottom: 1px rgba(18, 95, 142, 0.5) dashed; | 8424 | border-bottom: 1px rgba(18, 95, 142, 0.5) dashed; |
| ... | @@ -8106,26 +8438,54 @@ label { | ... | @@ -8106,26 +8438,54 @@ label { |
| 8106 | padding: 20px 20px; | 8438 | padding: 20px 20px; |
| 8107 | } | 8439 | } |
| 8108 | .vote__map { | 8440 | .vote__map { |
| 8109 | - position: relative; | ||
| 8110 | float: left; | 8441 | float: left; |
| 8111 | - width: 41.66666667%; | 8442 | + width: 100%; |
| 8443 | + position: relative; | ||
| 8112 | min-height: 1px; | 8444 | min-height: 1px; |
| 8113 | padding-left: 10px; | 8445 | padding-left: 10px; |
| 8114 | padding-right: 10px; | 8446 | padding-right: 10px; |
| 8115 | } | 8447 | } |
| 8448 | +@media (min-width: 990px) { | ||
| 8449 | + .vote__map { | ||
| 8450 | + float: left; | ||
| 8451 | + width: 41.66666667%; | ||
| 8452 | + } | ||
| 8453 | +} | ||
| 8454 | +@media (max-width: 989px) { | ||
| 8455 | + .vote__map { | ||
| 8456 | + padding: 0; | ||
| 8457 | + } | ||
| 8458 | +} | ||
| 8116 | .vote__map__iframe { | 8459 | .vote__map__iframe { |
| 8117 | width: 100%; | 8460 | width: 100%; |
| 8118 | height: 200px; | 8461 | height: 200px; |
| 8119 | } | 8462 | } |
| 8463 | +@media (max-width: 989px) { | ||
| 8464 | + .vote__map__iframe { | ||
| 8465 | + height: 300px; | ||
| 8466 | + } | ||
| 8467 | +} | ||
| 8120 | .vote__description { | 8468 | .vote__description { |
| 8121 | - position: relative; | ||
| 8122 | float: left; | 8469 | float: left; |
| 8123 | - width: 50%; | 8470 | + width: 100%; |
| 8471 | + position: relative; | ||
| 8124 | min-height: 1px; | 8472 | min-height: 1px; |
| 8125 | padding-left: 10px; | 8473 | padding-left: 10px; |
| 8126 | padding-right: 10px; | 8474 | padding-right: 10px; |
| 8127 | margin-top: 80px; | 8475 | margin-top: 80px; |
| 8128 | } | 8476 | } |
| 8477 | +@media (min-width: 990px) { | ||
| 8478 | + .vote__description { | ||
| 8479 | + float: left; | ||
| 8480 | + width: 50%; | ||
| 8481 | + } | ||
| 8482 | +} | ||
| 8483 | +@media (max-width: 989px) { | ||
| 8484 | + .vote__description { | ||
| 8485 | + margin-top: 20px; | ||
| 8486 | + padding: 0; | ||
| 8487 | + } | ||
| 8488 | +} | ||
| 8129 | .vote__label { | 8489 | .vote__label { |
| 8130 | display: inline-block; | 8490 | display: inline-block; |
| 8131 | margin-bottom: 20px; | 8491 | margin-bottom: 20px; |
| ... | @@ -8156,8 +8516,7 @@ label { | ... | @@ -8156,8 +8516,7 @@ label { |
| 8156 | margin-bottom: 0; | 8516 | margin-bottom: 0; |
| 8157 | } | 8517 | } |
| 8158 | .district__block { | 8518 | .district__block { |
| 8159 | - float: left; | 8519 | + margin: 0px -10px; |
| 8160 | - margin: 0px -20px; | ||
| 8161 | margin-bottom: 20px; | 8520 | margin-bottom: 20px; |
| 8162 | } | 8521 | } |
| 8163 | .district__block:last-child { | 8522 | .district__block:last-child { |
| ... | @@ -8170,31 +8529,64 @@ label { | ... | @@ -8170,31 +8529,64 @@ label { |
| 8170 | min-height: 1px; | 8529 | min-height: 1px; |
| 8171 | padding-left: 10px; | 8530 | padding-left: 10px; |
| 8172 | padding-right: 10px; | 8531 | padding-right: 10px; |
| 8532 | + padding: 0; | ||
| 8173 | margin-bottom: 20px; | 8533 | margin-bottom: 20px; |
| 8174 | } | 8534 | } |
| 8535 | +@media (max-width: 796px) { | ||
| 8536 | + .district__profile { | ||
| 8537 | + padding: 0; | ||
| 8538 | + } | ||
| 8539 | +} | ||
| 8175 | .district__profile__wrapper { | 8540 | .district__profile__wrapper { |
| 8176 | - position: relative; | ||
| 8177 | float: left; | 8541 | float: left; |
| 8178 | - width: 62.5%; | 8542 | + width: 100%; |
| 8543 | + position: relative; | ||
| 8179 | min-height: 1px; | 8544 | min-height: 1px; |
| 8180 | padding-left: 10px; | 8545 | padding-left: 10px; |
| 8181 | padding-right: 10px; | 8546 | padding-right: 10px; |
| 8182 | } | 8547 | } |
| 8548 | +@media (min-width: 797px) { | ||
| 8549 | + .district__profile__wrapper { | ||
| 8550 | + float: left; | ||
| 8551 | + width: 62.5%; | ||
| 8552 | + } | ||
| 8553 | +} | ||
| 8183 | .district__profile__img { | 8554 | .district__profile__img { |
| 8184 | - position: relative; | ||
| 8185 | float: left; | 8555 | float: left; |
| 8186 | - width: 37.5%; | 8556 | + width: 100%; |
| 8557 | + position: relative; | ||
| 8187 | min-height: 1px; | 8558 | min-height: 1px; |
| 8188 | padding-left: 10px; | 8559 | padding-left: 10px; |
| 8189 | padding-right: 10px; | 8560 | padding-right: 10px; |
| 8561 | + padding: 0; | ||
| 8562 | +} | ||
| 8563 | +@media (min-width: 797px) { | ||
| 8564 | + .district__profile__img { | ||
| 8565 | + float: left; | ||
| 8566 | + width: 37.5%; | ||
| 8567 | + } | ||
| 8568 | +} | ||
| 8569 | +@media (max-width: 796px) { | ||
| 8570 | + .district__profile__img { | ||
| 8571 | + text-align: center; | ||
| 8572 | + } | ||
| 8190 | } | 8573 | } |
| 8191 | .district__profile__description { | 8574 | .district__profile__description { |
| 8192 | - position: relative; | ||
| 8193 | float: left; | 8575 | float: left; |
| 8194 | - width: 62.5%; | 8576 | + width: 100%; |
| 8577 | + position: relative; | ||
| 8195 | min-height: 1px; | 8578 | min-height: 1px; |
| 8196 | padding-left: 10px; | 8579 | padding-left: 10px; |
| 8197 | padding-right: 10px; | 8580 | padding-right: 10px; |
| 8581 | + padding: 0; | ||
| 8582 | +} | ||
| 8583 | +@media (min-width: 797px) { | ||
| 8584 | + .district__profile__description { | ||
| 8585 | + float: left; | ||
| 8586 | + width: 62.5%; | ||
| 8587 | + } | ||
| 8588 | +} | ||
| 8589 | +@media (max-width: 796px) { | ||
| 8198 | } | 8590 | } |
| 8199 | .district__profile__description__wrapper { | 8591 | .district__profile__description__wrapper { |
| 8200 | position: relative; | 8592 | position: relative; |
| ... | @@ -8204,15 +8596,48 @@ label { | ... | @@ -8204,15 +8596,48 @@ label { |
| 8204 | padding-left: 10px; | 8596 | padding-left: 10px; |
| 8205 | padding-right: 10px; | 8597 | padding-right: 10px; |
| 8206 | } | 8598 | } |
| 8599 | +@media (max-width: 796px) { | ||
| 8600 | + .district__profile__description p { | ||
| 8601 | + font-size: 18px; | ||
| 8602 | + } | ||
| 8603 | +} | ||
| 8207 | .district__description { | 8604 | .district__description { |
| 8208 | position: relative; | 8605 | position: relative; |
| 8209 | float: left; | 8606 | float: left; |
| 8210 | - width: 33.33333333%; | 8607 | + width: 100%; |
| 8211 | min-height: 1px; | 8608 | min-height: 1px; |
| 8212 | padding-left: 10px; | 8609 | padding-left: 10px; |
| 8213 | padding-right: 10px; | 8610 | padding-right: 10px; |
| 8214 | float: right !important; | 8611 | float: right !important; |
| 8215 | } | 8612 | } |
| 8613 | +@media (max-width: 796px) { | ||
| 8614 | + .district__description { | ||
| 8615 | + padding: 0; | ||
| 8616 | + } | ||
| 8617 | +} | ||
| 8618 | +@media (max-width: 796px) { | ||
| 8619 | + .district__description p { | ||
| 8620 | + font-size: 18px; | ||
| 8621 | + } | ||
| 8622 | +} | ||
| 8623 | +.district__description__wrapper { | ||
| 8624 | + position: relative; | ||
| 8625 | + min-height: 1px; | ||
| 8626 | + padding-left: 10px; | ||
| 8627 | + padding-right: 10px; | ||
| 8628 | +} | ||
| 8629 | +@media (min-width: 550px) { | ||
| 8630 | + .district__description__wrapper { | ||
| 8631 | + float: left; | ||
| 8632 | + width: 100%; | ||
| 8633 | + } | ||
| 8634 | +} | ||
| 8635 | +@media (min-width: 797px) { | ||
| 8636 | + .district__description__wrapper { | ||
| 8637 | + float: left; | ||
| 8638 | + width: 37.5%; | ||
| 8639 | + } | ||
| 8640 | +} | ||
| 8216 | .passport__top { | 8641 | .passport__top { |
| 8217 | margin-top: 80px; | 8642 | margin-top: 80px; |
| 8218 | } | 8643 | } | ... | ... |
| ... | @@ -23,6 +23,7 @@ | ... | @@ -23,6 +23,7 @@ |
| 23 | <div class="header__nav "> | 23 | <div class="header__nav "> |
| 24 | <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> | 24 | <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> |
| 25 | 25 | ||
| 26 | + <div class="header__nav__wrapper"> | ||
| 26 | <ul class="nav nav--header"> | 27 | <ul class="nav nav--header"> |
| 27 | <li><a href="about.html">О совете депутатов</a></li> | 28 | <li><a href="about.html">О совете депутатов</a></li> |
| 28 | <li><a href="candidates.html">Кандидаты</a></li> | 29 | <li><a href="candidates.html">Кандидаты</a></li> |
| ... | @@ -31,6 +32,11 @@ | ... | @@ -31,6 +32,11 @@ |
| 31 | <li><a href="vote.html">Как проголосовать</a></li> | 32 | <li><a href="vote.html">Как проголосовать</a></li> |
| 32 | </ul> | 33 | </ul> |
| 33 | </div> | 34 | </div> |
| 35 | + </div> | ||
| 36 | + | ||
| 37 | + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a> | ||
| 38 | + | ||
| 39 | + <!--<a id="right-menu" href="#right-menu">Right Menu</a>--> | ||
| 34 | 40 | ||
| 35 | <div class="header__do"> | 41 | <div class="header__do"> |
| 36 | <button type="button" class="btn btn-default btn__attention">Поддержать</button> | 42 | <button type="button" class="btn btn-default btn__attention">Поддержать</button> | ... | ... |
| ... | @@ -21,6 +21,10 @@ | ... | @@ -21,6 +21,10 @@ |
| 21 | <a href="/" class="icon icon__logo"></a> | 21 | <a href="/" class="icon icon__logo"></a> |
| 22 | </div> | 22 | </div> |
| 23 | 23 | ||
| 24 | + <!--<a id="right-menu" href="#right-menu">Right Menu</a>--> | ||
| 25 | + | ||
| 26 | + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a> | ||
| 27 | + | ||
| 24 | <div class="promo__title">Выборы в Совет <br> депутатов Савёловского района</div> | 28 | <div class="promo__title">Выборы в Совет <br> депутатов Савёловского района</div> |
| 25 | 29 | ||
| 26 | <br> | 30 | <br> |
| ... | @@ -31,7 +35,7 @@ | ... | @@ -31,7 +35,7 @@ |
| 31 | 35 | ||
| 32 | <button type="button" class="btn btn-default btn__big">Познакомится с кандидатами</button> | 36 | <button type="button" class="btn btn-default btn__big">Познакомится с кандидатами</button> |
| 33 | 37 | ||
| 34 | - <div class="promo__nav"> | 38 | + <div class="promo__nav header__nav__wrapper"> |
| 35 | <ul class="nav nav--promo"> | 39 | <ul class="nav nav--promo"> |
| 36 | <li><a href="about.html">О совете депутатов</a></li> | 40 | <li><a href="about.html">О совете депутатов</a></li> |
| 37 | <li><a href="#">Кандидаты</a></li> | 41 | <li><a href="#">Кандидаты</a></li> | ... | ... |
| ... | @@ -14087,3 +14087,605 @@ if (typeof jQuery === 'undefined') { | ... | @@ -14087,3 +14087,605 @@ if (typeof jQuery === 'undefined') { |
| 14087 | 14087 | ||
| 14088 | }(jQuery); | 14088 | }(jQuery); |
| 14089 | 14089 | ||
| 14090 | +/*! sidr - v2.2.1 - 2016-02-17 | ||
| 14091 | + * http://www.berriart.com/sidr/ | ||
| 14092 | + * Copyright (c) 2013-2016 Alberto Varela; Licensed MIT */ | ||
| 14093 | + | ||
| 14094 | +(function () { | ||
| 14095 | + 'use strict'; | ||
| 14096 | + | ||
| 14097 | + var babelHelpers = {}; | ||
| 14098 | + | ||
| 14099 | + babelHelpers.classCallCheck = function (instance, Constructor) { | ||
| 14100 | + if (!(instance instanceof Constructor)) { | ||
| 14101 | + throw new TypeError("Cannot call a class as a function"); | ||
| 14102 | + } | ||
| 14103 | + }; | ||
| 14104 | + | ||
| 14105 | + babelHelpers.createClass = function () { | ||
| 14106 | + function defineProperties(target, props) { | ||
| 14107 | + for (var i = 0; i < props.length; i++) { | ||
| 14108 | + var descriptor = props[i]; | ||
| 14109 | + descriptor.enumerable = descriptor.enumerable || false; | ||
| 14110 | + descriptor.configurable = true; | ||
| 14111 | + if ("value" in descriptor) descriptor.writable = true; | ||
| 14112 | + Object.defineProperty(target, descriptor.key, descriptor); | ||
| 14113 | + } | ||
| 14114 | + } | ||
| 14115 | + | ||
| 14116 | + return function (Constructor, protoProps, staticProps) { | ||
| 14117 | + if (protoProps) defineProperties(Constructor.prototype, protoProps); | ||
| 14118 | + if (staticProps) defineProperties(Constructor, staticProps); | ||
| 14119 | + return Constructor; | ||
| 14120 | + }; | ||
| 14121 | + }(); | ||
| 14122 | + | ||
| 14123 | + babelHelpers; | ||
| 14124 | + | ||
| 14125 | + var sidrStatus = { | ||
| 14126 | + moving: false, | ||
| 14127 | + opened: false | ||
| 14128 | + }; | ||
| 14129 | + | ||
| 14130 | + var helper = { | ||
| 14131 | + // Check for valids urls | ||
| 14132 | + // From : http://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-an-url | ||
| 14133 | + | ||
| 14134 | + isUrl: function isUrl(str) { | ||
| 14135 | + var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol | ||
| 14136 | + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name | ||
| 14137 | + '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address | ||
| 14138 | + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path | ||
| 14139 | + '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string | ||
| 14140 | + '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator | ||
| 14141 | + | ||
| 14142 | + if (pattern.test(str)) { | ||
| 14143 | + return true; | ||
| 14144 | + } else { | ||
| 14145 | + return false; | ||
| 14146 | + } | ||
| 14147 | + }, | ||
| 14148 | + | ||
| 14149 | + | ||
| 14150 | + // Add sidr prefixes | ||
| 14151 | + addPrefixes: function addPrefixes($element) { | ||
| 14152 | + this.addPrefix($element, 'id'); | ||
| 14153 | + this.addPrefix($element, 'class'); | ||
| 14154 | + $element.removeAttr('style'); | ||
| 14155 | + }, | ||
| 14156 | + addPrefix: function addPrefix($element, attribute) { | ||
| 14157 | + var toReplace = $element.attr(attribute); | ||
| 14158 | + | ||
| 14159 | + if (typeof toReplace === 'string' && toReplace !== '' && toReplace !== 'sidr-inner') { | ||
| 14160 | + $element.attr(attribute, toReplace.replace(/([A-Za-z0-9_.\-]+)/g, 'sidr-' + attribute + '-$1')); | ||
| 14161 | + } | ||
| 14162 | + }, | ||
| 14163 | + | ||
| 14164 | + | ||
| 14165 | + // Check if transitions is supported | ||
| 14166 | + transitions: function () { | ||
| 14167 | + var body = document.body || document.documentElement, | ||
| 14168 | + style = body.style, | ||
| 14169 | + supported = false, | ||
| 14170 | + property = 'transition'; | ||
| 14171 | + | ||
| 14172 | + if (property in style) { | ||
| 14173 | + supported = true; | ||
| 14174 | + } else { | ||
| 14175 | + (function () { | ||
| 14176 | + var prefixes = ['moz', 'webkit', 'o', 'ms'], | ||
| 14177 | + prefix = undefined, | ||
| 14178 | + i = undefined; | ||
| 14179 | + | ||
| 14180 | + property = property.charAt(0).toUpperCase() + property.substr(1); | ||
| 14181 | + supported = function () { | ||
| 14182 | + for (i = 0; i < prefixes.length; i++) { | ||
| 14183 | + prefix = prefixes[i]; | ||
| 14184 | + if (prefix + property in style) { | ||
| 14185 | + return true; | ||
| 14186 | + } | ||
| 14187 | + } | ||
| 14188 | + | ||
| 14189 | + return false; | ||
| 14190 | + }(); | ||
| 14191 | + property = supported ? '-' + prefix.toLowerCase() + '-' + property.toLowerCase() : null; | ||
| 14192 | + })(); | ||
| 14193 | + } | ||
| 14194 | + | ||
| 14195 | + return { | ||
| 14196 | + supported: supported, | ||
| 14197 | + property: property | ||
| 14198 | + }; | ||
| 14199 | + }() | ||
| 14200 | + }; | ||
| 14201 | + | ||
| 14202 | + var $$2 = jQuery; | ||
| 14203 | + | ||
| 14204 | + var bodyAnimationClass = 'sidr-animating'; | ||
| 14205 | + var openAction = 'open'; | ||
| 14206 | + var closeAction = 'close'; | ||
| 14207 | + var transitionEndEvent = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'; | ||
| 14208 | + var Menu = function () { | ||
| 14209 | + function Menu(name) { | ||
| 14210 | + babelHelpers.classCallCheck(this, Menu); | ||
| 14211 | + | ||
| 14212 | + this.name = name; | ||
| 14213 | + this.item = $$2('#' + name); | ||
| 14214 | + this.openClass = name === 'sidr' ? 'sidr-open' : 'sidr-open ' + name + '-open'; | ||
| 14215 | + this.menuWidth = this.item.outerWidth(true); | ||
| 14216 | + this.speed = this.item.data('speed'); | ||
| 14217 | + this.side = this.item.data('side'); | ||
| 14218 | + this.displace = this.item.data('displace'); | ||
| 14219 | + this.timing = this.item.data('timing'); | ||
| 14220 | + this.method = this.item.data('method'); | ||
| 14221 | + this.onOpenCallback = this.item.data('onOpen'); | ||
| 14222 | + this.onCloseCallback = this.item.data('onClose'); | ||
| 14223 | + this.onOpenEndCallback = this.item.data('onOpenEnd'); | ||
| 14224 | + this.onCloseEndCallback = this.item.data('onCloseEnd'); | ||
| 14225 | + this.body = $$2(this.item.data('body')); | ||
| 14226 | + } | ||
| 14227 | + | ||
| 14228 | + babelHelpers.createClass(Menu, [{ | ||
| 14229 | + key: 'getAnimation', | ||
| 14230 | + value: function getAnimation(action, element) { | ||
| 14231 | + var animation = {}, | ||
| 14232 | + prop = this.side; | ||
| 14233 | + | ||
| 14234 | + if (action === 'open' && element === 'body') { | ||
| 14235 | + animation[prop] = this.menuWidth + 'px'; | ||
| 14236 | + } else if (action === 'close' && element === 'menu') { | ||
| 14237 | + animation[prop] = '-' + this.menuWidth + 'px'; | ||
| 14238 | + } else { | ||
| 14239 | + animation[prop] = 0; | ||
| 14240 | + } | ||
| 14241 | + | ||
| 14242 | + return animation; | ||
| 14243 | + } | ||
| 14244 | + }, { | ||
| 14245 | + key: 'prepareBody', | ||
| 14246 | + value: function prepareBody(action) { | ||
| 14247 | + var prop = action === 'open' ? 'hidden' : ''; | ||
| 14248 | + | ||
| 14249 | + // Prepare page if container is body | ||
| 14250 | + if (this.body.is('body')) { | ||
| 14251 | + var $html = $$2('html'), | ||
| 14252 | + scrollTop = $html.scrollTop(); | ||
| 14253 | + | ||
| 14254 | + $html.css('overflow-x', prop).scrollTop(scrollTop); | ||
| 14255 | + } | ||
| 14256 | + } | ||
| 14257 | + }, { | ||
| 14258 | + key: 'openBody', | ||
| 14259 | + value: function openBody() { | ||
| 14260 | + if (this.displace) { | ||
| 14261 | + var transitions = helper.transitions, | ||
| 14262 | + $body = this.body; | ||
| 14263 | + | ||
| 14264 | + if (transitions.supported) { | ||
| 14265 | + $body.css(transitions.property, this.side + ' ' + this.speed / 1000 + 's ' + this.timing).css(this.side, 0).css({ | ||
| 14266 | + width: $body.width(), | ||
| 14267 | + position: 'absolute' | ||
| 14268 | + }); | ||
| 14269 | + $body.css(this.side, this.menuWidth + 'px'); | ||
| 14270 | + } else { | ||
| 14271 | + var bodyAnimation = this.getAnimation(openAction, 'body'); | ||
| 14272 | + | ||
| 14273 | + $body.css({ | ||
| 14274 | + width: $body.width(), | ||
| 14275 | + position: 'absolute' | ||
| 14276 | + }).animate(bodyAnimation, { | ||
| 14277 | + queue: false, | ||
| 14278 | + duration: this.speed | ||
| 14279 | + }); | ||
| 14280 | + } | ||
| 14281 | + } | ||
| 14282 | + } | ||
| 14283 | + }, { | ||
| 14284 | + key: 'onCloseBody', | ||
| 14285 | + value: function onCloseBody() { | ||
| 14286 | + var transitions = helper.transitions, | ||
| 14287 | + resetStyles = { | ||
| 14288 | + width: '', | ||
| 14289 | + position: '', | ||
| 14290 | + right: '', | ||
| 14291 | + left: '' | ||
| 14292 | + }; | ||
| 14293 | + | ||
| 14294 | + if (transitions.supported) { | ||
| 14295 | + resetStyles[transitions.property] = ''; | ||
| 14296 | + } | ||
| 14297 | + | ||
| 14298 | + this.body.css(resetStyles).unbind(transitionEndEvent); | ||
| 14299 | + } | ||
| 14300 | + }, { | ||
| 14301 | + key: 'closeBody', | ||
| 14302 | + value: function closeBody() { | ||
| 14303 | + var _this = this; | ||
| 14304 | + | ||
| 14305 | + if (this.displace) { | ||
| 14306 | + if (helper.transitions.supported) { | ||
| 14307 | + this.body.css(this.side, 0).one(transitionEndEvent, function () { | ||
| 14308 | + _this.onCloseBody(); | ||
| 14309 | + }); | ||
| 14310 | + } else { | ||
| 14311 | + var bodyAnimation = this.getAnimation(closeAction, 'body'); | ||
| 14312 | + | ||
| 14313 | + this.body.animate(bodyAnimation, { | ||
| 14314 | + queue: false, | ||
| 14315 | + duration: this.speed, | ||
| 14316 | + complete: function complete() { | ||
| 14317 | + _this.onCloseBody(); | ||
| 14318 | + } | ||
| 14319 | + }); | ||
| 14320 | + } | ||
| 14321 | + } | ||
| 14322 | + } | ||
| 14323 | + }, { | ||
| 14324 | + key: 'moveBody', | ||
| 14325 | + value: function moveBody(action) { | ||
| 14326 | + if (action === openAction) { | ||
| 14327 | + this.openBody(); | ||
| 14328 | + } else { | ||
| 14329 | + this.closeBody(); | ||
| 14330 | + } | ||
| 14331 | + } | ||
| 14332 | + }, { | ||
| 14333 | + key: 'onOpenMenu', | ||
| 14334 | + value: function onOpenMenu(callback) { | ||
| 14335 | + var name = this.name; | ||
| 14336 | + | ||
| 14337 | + sidrStatus.moving = false; | ||
| 14338 | + sidrStatus.opened = name; | ||
| 14339 | + | ||
| 14340 | + this.item.unbind(transitionEndEvent); | ||
| 14341 | + | ||
| 14342 | + this.body.removeClass(bodyAnimationClass).addClass(this.openClass); | ||
| 14343 | + | ||
| 14344 | + this.onOpenEndCallback(); | ||
| 14345 | + | ||
| 14346 | + if (typeof callback === 'function') { | ||
| 14347 | + callback(name); | ||
| 14348 | + } | ||
| 14349 | + } | ||
| 14350 | + }, { | ||
| 14351 | + key: 'openMenu', | ||
| 14352 | + value: function openMenu(callback) { | ||
| 14353 | + var _this2 = this; | ||
| 14354 | + | ||
| 14355 | + var $item = this.item; | ||
| 14356 | + | ||
| 14357 | + if (helper.transitions.supported) { | ||
| 14358 | + $item.css(this.side, 0).one(transitionEndEvent, function () { | ||
| 14359 | + _this2.onOpenMenu(callback); | ||
| 14360 | + }); | ||
| 14361 | + } else { | ||
| 14362 | + var menuAnimation = this.getAnimation(openAction, 'menu'); | ||
| 14363 | + | ||
| 14364 | + $item.css('display', 'block').animate(menuAnimation, { | ||
| 14365 | + queue: false, | ||
| 14366 | + duration: this.speed, | ||
| 14367 | + complete: function complete() { | ||
| 14368 | + _this2.onOpenMenu(callback); | ||
| 14369 | + } | ||
| 14370 | + }); | ||
| 14371 | + } | ||
| 14372 | + } | ||
| 14373 | + }, { | ||
| 14374 | + key: 'onCloseMenu', | ||
| 14375 | + value: function onCloseMenu(callback) { | ||
| 14376 | + this.item.css({ | ||
| 14377 | + left: '', | ||
| 14378 | + right: '' | ||
| 14379 | + }).unbind(transitionEndEvent); | ||
| 14380 | + $$2('html').css('overflow-x', ''); | ||
| 14381 | + | ||
| 14382 | + sidrStatus.moving = false; | ||
| 14383 | + sidrStatus.opened = false; | ||
| 14384 | + | ||
| 14385 | + this.body.removeClass(bodyAnimationClass).removeClass(this.openClass); | ||
| 14386 | + | ||
| 14387 | + this.onCloseEndCallback(); | ||
| 14388 | + | ||
| 14389 | + // Callback | ||
| 14390 | + if (typeof callback === 'function') { | ||
| 14391 | + callback(name); | ||
| 14392 | + } | ||
| 14393 | + } | ||
| 14394 | + }, { | ||
| 14395 | + key: 'closeMenu', | ||
| 14396 | + value: function closeMenu(callback) { | ||
| 14397 | + var _this3 = this; | ||
| 14398 | + | ||
| 14399 | + var item = this.item; | ||
| 14400 | + | ||
| 14401 | + if (helper.transitions.supported) { | ||
| 14402 | + item.css(this.side, '').one(transitionEndEvent, function () { | ||
| 14403 | + _this3.onCloseMenu(callback); | ||
| 14404 | + }); | ||
| 14405 | + } else { | ||
| 14406 | + var menuAnimation = this.getAnimation(closeAction, 'menu'); | ||
| 14407 | + | ||
| 14408 | + item.animate(menuAnimation, { | ||
| 14409 | + queue: false, | ||
| 14410 | + duration: this.speed, | ||
| 14411 | + complete: function complete() { | ||
| 14412 | + _this3.onCloseMenu(); | ||
| 14413 | + } | ||
| 14414 | + }); | ||
| 14415 | + } | ||
| 14416 | + } | ||
| 14417 | + }, { | ||
| 14418 | + key: 'moveMenu', | ||
| 14419 | + value: function moveMenu(action, callback) { | ||
| 14420 | + this.body.addClass(bodyAnimationClass); | ||
| 14421 | + | ||
| 14422 | + if (action === openAction) { | ||
| 14423 | + this.openMenu(callback); | ||
| 14424 | + } else { | ||
| 14425 | + this.closeMenu(callback); | ||
| 14426 | + } | ||
| 14427 | + } | ||
| 14428 | + }, { | ||
| 14429 | + key: 'move', | ||
| 14430 | + value: function move(action, callback) { | ||
| 14431 | + // Lock sidr | ||
| 14432 | + sidrStatus.moving = true; | ||
| 14433 | + | ||
| 14434 | + this.prepareBody(action); | ||
| 14435 | + this.moveBody(action); | ||
| 14436 | + this.moveMenu(action, callback); | ||
| 14437 | + } | ||
| 14438 | + }, { | ||
| 14439 | + key: 'open', | ||
| 14440 | + value: function open(callback) { | ||
| 14441 | + var _this4 = this; | ||
| 14442 | + | ||
| 14443 | + // Check if is already opened or moving | ||
| 14444 | + if (sidrStatus.opened === this.name || sidrStatus.moving) { | ||
| 14445 | + return; | ||
| 14446 | + } | ||
| 14447 | + | ||
| 14448 | + // If another menu opened close first | ||
| 14449 | + if (sidrStatus.opened !== false) { | ||
| 14450 | + var alreadyOpenedMenu = new Menu(sidrStatus.opened); | ||
| 14451 | + | ||
| 14452 | + alreadyOpenedMenu.close(function () { | ||
| 14453 | + _this4.open(callback); | ||
| 14454 | + }); | ||
| 14455 | + | ||
| 14456 | + return; | ||
| 14457 | + } | ||
| 14458 | + | ||
| 14459 | + this.move('open', callback); | ||
| 14460 | + | ||
| 14461 | + // onOpen callback | ||
| 14462 | + this.onOpenCallback(); | ||
| 14463 | + } | ||
| 14464 | + }, { | ||
| 14465 | + key: 'close', | ||
| 14466 | + value: function close(callback) { | ||
| 14467 | + // Check if is already closed or moving | ||
| 14468 | + if (sidrStatus.opened !== this.name || sidrStatus.moving) { | ||
| 14469 | + return; | ||
| 14470 | + } | ||
| 14471 | + | ||
| 14472 | + this.move('close', callback); | ||
| 14473 | + | ||
| 14474 | + // onClose callback | ||
| 14475 | + this.onCloseCallback(); | ||
| 14476 | + } | ||
| 14477 | + }, { | ||
| 14478 | + key: 'toggle', | ||
| 14479 | + value: function toggle(callback) { | ||
| 14480 | + if (sidrStatus.opened === this.name) { | ||
| 14481 | + this.close(callback); | ||
| 14482 | + } else { | ||
| 14483 | + this.open(callback); | ||
| 14484 | + } | ||
| 14485 | + } | ||
| 14486 | + }]); | ||
| 14487 | + return Menu; | ||
| 14488 | + }(); | ||
| 14489 | + | ||
| 14490 | + var $$1 = jQuery; | ||
| 14491 | + | ||
| 14492 | + function execute(action, name, callback) { | ||
| 14493 | + var sidr = new Menu(name); | ||
| 14494 | + | ||
| 14495 | + switch (action) { | ||
| 14496 | + case 'open': | ||
| 14497 | + sidr.open(callback); | ||
| 14498 | + break; | ||
| 14499 | + case 'close': | ||
| 14500 | + sidr.close(callback); | ||
| 14501 | + break; | ||
| 14502 | + case 'toggle': | ||
| 14503 | + sidr.toggle(callback); | ||
| 14504 | + break; | ||
| 14505 | + default: | ||
| 14506 | + $$1.error('Method ' + action + ' does not exist on jQuery.sidr'); | ||
| 14507 | + break; | ||
| 14508 | + } | ||
| 14509 | + } | ||
| 14510 | + | ||
| 14511 | + var i; | ||
| 14512 | + var $ = jQuery; | ||
| 14513 | + var publicMethods = ['open', 'close', 'toggle']; | ||
| 14514 | + var methodName; | ||
| 14515 | + var methods = {}; | ||
| 14516 | + var getMethod = function getMethod(methodName) { | ||
| 14517 | + return function (name, callback) { | ||
| 14518 | + // Check arguments | ||
| 14519 | + if (typeof name === 'function') { | ||
| 14520 | + callback = name; | ||
| 14521 | + name = 'sidr'; | ||
| 14522 | + } else if (!name) { | ||
| 14523 | + name = 'sidr'; | ||
| 14524 | + } | ||
| 14525 | + | ||
| 14526 | + execute(methodName, name, callback); | ||
| 14527 | + }; | ||
| 14528 | + }; | ||
| 14529 | + for (i = 0; i < publicMethods.length; i++) { | ||
| 14530 | + methodName = publicMethods[i]; | ||
| 14531 | + methods[methodName] = getMethod(methodName); | ||
| 14532 | + } | ||
| 14533 | + | ||
| 14534 | + function sidr(method) { | ||
| 14535 | + if (method === 'status') { | ||
| 14536 | + return sidrStatus; | ||
| 14537 | + } else if (methods[method]) { | ||
| 14538 | + return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); | ||
| 14539 | + } else if (typeof method === 'function' || typeof method === 'string' || !method) { | ||
| 14540 | + return methods.toggle.apply(this, arguments); | ||
| 14541 | + } else { | ||
| 14542 | + $.error('Method ' + method + ' does not exist on jQuery.sidr'); | ||
| 14543 | + } | ||
| 14544 | + } | ||
| 14545 | + | ||
| 14546 | + var $$3 = jQuery; | ||
| 14547 | + | ||
| 14548 | + function fillContent($sideMenu, settings) { | ||
| 14549 | + // The menu content | ||
| 14550 | + if (typeof settings.source === 'function') { | ||
| 14551 | + var newContent = settings.source(name); | ||
| 14552 | + | ||
| 14553 | + $sideMenu.html(newContent); | ||
| 14554 | + } else if (typeof settings.source === 'string' && helper.isUrl(settings.source)) { | ||
| 14555 | + $$3.get(settings.source, function (data) { | ||
| 14556 | + $sideMenu.html(data); | ||
| 14557 | + }); | ||
| 14558 | + } else if (typeof settings.source === 'string') { | ||
| 14559 | + var htmlContent = '', | ||
| 14560 | + selectors = settings.source.split(','); | ||
| 14561 | + | ||
| 14562 | + $$3.each(selectors, function (index, element) { | ||
| 14563 | + htmlContent += '<div class="sidr-inner">' + $$3(element).html() + '</div>'; | ||
| 14564 | + }); | ||
| 14565 | + | ||
| 14566 | + // Renaming ids and classes | ||
| 14567 | + if (settings.renaming) { | ||
| 14568 | + var $htmlContent = $$3('<div />').html(htmlContent); | ||
| 14569 | + | ||
| 14570 | + $htmlContent.find('*').each(function (index, element) { | ||
| 14571 | + var $element = $$3(element); | ||
| 14572 | + | ||
| 14573 | + helper.addPrefixes($element); | ||
| 14574 | + }); | ||
| 14575 | + htmlContent = $htmlContent.html(); | ||
| 14576 | + } | ||
| 14577 | + | ||
| 14578 | + $sideMenu.html(htmlContent); | ||
| 14579 | + } else if (settings.source !== null) { | ||
| 14580 | + $$3.error('Invalid Sidr Source'); | ||
| 14581 | + } | ||
| 14582 | + | ||
| 14583 | + return $sideMenu; | ||
| 14584 | + } | ||
| 14585 | + | ||
| 14586 | + function fnSidr(options) { | ||
| 14587 | + var transitions = helper.transitions, | ||
| 14588 | + settings = $$3.extend({ | ||
| 14589 | + name: 'sidr', // Name for the 'sidr' | ||
| 14590 | + speed: 200, // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds) | ||
| 14591 | + side: 'left', // Accepts 'left' or 'right' | ||
| 14592 | + source: null, // Override the source of the content. | ||
| 14593 | + renaming: true, // The ids and classes will be prepended with a prefix when loading existent content | ||
| 14594 | + body: 'body', // Page container selector, | ||
| 14595 | + displace: true, // Displace the body content or not | ||
| 14596 | + timing: 'ease', // Timing function for CSS transitions | ||
| 14597 | + method: 'toggle', // The method to call when element is clicked | ||
| 14598 | + bind: 'touchstart click', // The event(s) to trigger the menu | ||
| 14599 | + onOpen: function onOpen() {}, | ||
| 14600 | + // Callback when sidr start opening | ||
| 14601 | + onClose: function onClose() {}, | ||
| 14602 | + // Callback when sidr start closing | ||
| 14603 | + onOpenEnd: function onOpenEnd() {}, | ||
| 14604 | + // Callback when sidr end opening | ||
| 14605 | + onCloseEnd: function onCloseEnd() {} // Callback when sidr end closing | ||
| 14606 | + | ||
| 14607 | + }, options), | ||
| 14608 | + name = settings.name, | ||
| 14609 | + $sideMenu = $$3('#' + name); | ||
| 14610 | + | ||
| 14611 | + // If the side menu do not exist create it | ||
| 14612 | + if ($sideMenu.length === 0) { | ||
| 14613 | + $sideMenu = $$3('<div />').attr('id', name).appendTo($$3('body')); | ||
| 14614 | + } | ||
| 14615 | + | ||
| 14616 | + // Add transition to menu if are supported | ||
| 14617 | + if (transitions.supported) { | ||
| 14618 | + $sideMenu.css(transitions.property, settings.side + ' ' + settings.speed / 1000 + 's ' + settings.timing); | ||
| 14619 | + } | ||
| 14620 | + | ||
| 14621 | + // Adding styles and options | ||
| 14622 | + $sideMenu.addClass('sidr').addClass(settings.side).data({ | ||
| 14623 | + speed: settings.speed, | ||
| 14624 | + side: settings.side, | ||
| 14625 | + body: settings.body, | ||
| 14626 | + displace: settings.displace, | ||
| 14627 | + timing: settings.timing, | ||
| 14628 | + method: settings.method, | ||
| 14629 | + onOpen: settings.onOpen, | ||
| 14630 | + onClose: settings.onClose, | ||
| 14631 | + onOpenEnd: settings.onOpenEnd, | ||
| 14632 | + onCloseEnd: settings.onCloseEnd | ||
| 14633 | + }); | ||
| 14634 | + | ||
| 14635 | + $sideMenu = fillContent($sideMenu, settings); | ||
| 14636 | + | ||
| 14637 | + return this.each(function () { | ||
| 14638 | + var $this = $$3(this), | ||
| 14639 | + data = $this.data('sidr'), | ||
| 14640 | + flag = false; | ||
| 14641 | + | ||
| 14642 | + // If the plugin hasn't been initialized yet | ||
| 14643 | + if (!data) { | ||
| 14644 | + sidrStatus.moving = false; | ||
| 14645 | + sidrStatus.opened = false; | ||
| 14646 | + | ||
| 14647 | + $this.data('sidr', name); | ||
| 14648 | + | ||
| 14649 | + $this.bind(settings.bind, function (event) { | ||
| 14650 | + event.preventDefault(); | ||
| 14651 | + | ||
| 14652 | + if (!flag) { | ||
| 14653 | + flag = true; | ||
| 14654 | + sidr(settings.method, name); | ||
| 14655 | + | ||
| 14656 | + setTimeout(function () { | ||
| 14657 | + flag = false; | ||
| 14658 | + }, 100); | ||
| 14659 | + } | ||
| 14660 | + }); | ||
| 14661 | + } | ||
| 14662 | + }); | ||
| 14663 | + } | ||
| 14664 | + | ||
| 14665 | + jQuery.sidr = sidr; | ||
| 14666 | + jQuery.fn.sidr = fnSidr; | ||
| 14667 | + | ||
| 14668 | +}()); | ||
| 14669 | + | ||
| 14670 | +$(document).ready(function() { | ||
| 14671 | + $('#right-menu').sidr({ | ||
| 14672 | + name: 'sidr-right', | ||
| 14673 | + side: 'right', | ||
| 14674 | + source: '.header__nav__wrapper', | ||
| 14675 | + onOpen: function() { | ||
| 14676 | + $('.mobile-menu').addClass('active'); | ||
| 14677 | + }, | ||
| 14678 | + onClose: function() { | ||
| 14679 | + $('.mobile-menu').removeClass('active'); | ||
| 14680 | + } | ||
| 14681 | + }); | ||
| 14682 | +}); | ||
| 14683 | + | ||
| 14684 | +$(document).mouseup(function (e){ | ||
| 14685 | + var container = $("#sidr-right"); | ||
| 14686 | + | ||
| 14687 | + if (!container.is(e.target) | ||
| 14688 | + && container.has(e.target).length === 0) { | ||
| 14689 | + $.sidr('close', 'sidr-right'); | ||
| 14690 | + } | ||
| 14691 | +}); | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -23,6 +23,7 @@ | ... | @@ -23,6 +23,7 @@ |
| 23 | <div class="header__nav "> | 23 | <div class="header__nav "> |
| 24 | <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> | 24 | <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> |
| 25 | 25 | ||
| 26 | + <div class="header__nav__wrapper"> | ||
| 26 | <ul class="nav nav--header"> | 27 | <ul class="nav nav--header"> |
| 27 | <li><a href="about.html">О совете депутатов</a></li> | 28 | <li><a href="about.html">О совете депутатов</a></li> |
| 28 | <li><a href="candidates.html">Кандидаты</a></li> | 29 | <li><a href="candidates.html">Кандидаты</a></li> |
| ... | @@ -31,6 +32,11 @@ | ... | @@ -31,6 +32,11 @@ |
| 31 | <li><a href="vote.html">Как проголосовать</a></li> | 32 | <li><a href="vote.html">Как проголосовать</a></li> |
| 32 | </ul> | 33 | </ul> |
| 33 | </div> | 34 | </div> |
| 35 | + </div> | ||
| 36 | + | ||
| 37 | + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a> | ||
| 38 | + | ||
| 39 | + <!--<a id="right-menu" href="#right-menu">Right Menu</a>--> | ||
| 34 | 40 | ||
| 35 | <div class="header__do"> | 41 | <div class="header__do"> |
| 36 | <button type="button" class="btn btn-default btn__attention">Поддержать</button> | 42 | <button type="button" class="btn btn-default btn__attention">Поддержать</button> | ... | ... |
| ... | @@ -23,6 +23,7 @@ | ... | @@ -23,6 +23,7 @@ |
| 23 | <div class="header__nav "> | 23 | <div class="header__nav "> |
| 24 | <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> | 24 | <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> |
| 25 | 25 | ||
| 26 | + <div class="header__nav__wrapper"> | ||
| 26 | <ul class="nav nav--header"> | 27 | <ul class="nav nav--header"> |
| 27 | <li><a href="about.html">О совете депутатов</a></li> | 28 | <li><a href="about.html">О совете депутатов</a></li> |
| 28 | <li><a href="candidates.html">Кандидаты</a></li> | 29 | <li><a href="candidates.html">Кандидаты</a></li> |
| ... | @@ -31,6 +32,11 @@ | ... | @@ -31,6 +32,11 @@ |
| 31 | <li><a href="vote.html">Как проголосовать</a></li> | 32 | <li><a href="vote.html">Как проголосовать</a></li> |
| 32 | </ul> | 33 | </ul> |
| 33 | </div> | 34 | </div> |
| 35 | + </div> | ||
| 36 | + | ||
| 37 | + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a> | ||
| 38 | + | ||
| 39 | + <!--<a id="right-menu" href="#right-menu">Right Menu</a>--> | ||
| 34 | 40 | ||
| 35 | <div class="header__do"> | 41 | <div class="header__do"> |
| 36 | <button type="button" class="btn btn-default btn__attention">Поддержать</button> | 42 | <button type="button" class="btn btn-default btn__attention">Поддержать</button> | ... | ... |
| ... | @@ -9,6 +9,7 @@ | ... | @@ -9,6 +9,7 @@ |
| 9 | <div class="header__nav "> | 9 | <div class="header__nav "> |
| 10 | <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> | 10 | <div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div> |
| 11 | 11 | ||
| 12 | + <div class="header__nav__wrapper"> | ||
| 12 | <ul class="nav nav--header"> | 13 | <ul class="nav nav--header"> |
| 13 | <li><a href="about.html">О совете депутатов</a></li> | 14 | <li><a href="about.html">О совете депутатов</a></li> |
| 14 | <li><a href="candidates.html">Кандидаты</a></li> | 15 | <li><a href="candidates.html">Кандидаты</a></li> |
| ... | @@ -17,6 +18,11 @@ | ... | @@ -17,6 +18,11 @@ |
| 17 | <li><a href="vote.html">Как проголосовать</a></li> | 18 | <li><a href="vote.html">Как проголосовать</a></li> |
| 18 | </ul> | 19 | </ul> |
| 19 | </div> | 20 | </div> |
| 21 | + </div> | ||
| 22 | + | ||
| 23 | + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a> | ||
| 24 | + | ||
| 25 | + <!--<a id="right-menu" href="#right-menu">Right Menu</a>--> | ||
| 20 | 26 | ||
| 21 | <div class="header__do"> | 27 | <div class="header__do"> |
| 22 | <button type="button" class="btn btn-default btn__attention">Поддержать</button> | 28 | <button type="button" class="btn btn-default btn__attention">Поддержать</button> | ... | ... |
| ... | @@ -9,6 +9,10 @@ | ... | @@ -9,6 +9,10 @@ |
| 9 | <a href="/" class="icon icon__logo"></a> | 9 | <a href="/" class="icon icon__logo"></a> |
| 10 | </div> | 10 | </div> |
| 11 | 11 | ||
| 12 | + <!--<a id="right-menu" href="#right-menu">Right Menu</a>--> | ||
| 13 | + | ||
| 14 | + <a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a> | ||
| 15 | + | ||
| 12 | <div class="promo__title">Выборы в Совет <br> депутатов Савёловского района</div> | 16 | <div class="promo__title">Выборы в Совет <br> депутатов Савёловского района</div> |
| 13 | 17 | ||
| 14 | <br> | 18 | <br> |
| ... | @@ -19,7 +23,7 @@ | ... | @@ -19,7 +23,7 @@ |
| 19 | 23 | ||
| 20 | <button type="button" class="btn btn-default btn__big">Познакомится с кандидатами</button> | 24 | <button type="button" class="btn btn-default btn__big">Познакомится с кандидатами</button> |
| 21 | 25 | ||
| 22 | - <div class="promo__nav"> | 26 | + <div class="promo__nav header__nav__wrapper"> |
| 23 | <ul class="nav nav--promo"> | 27 | <ul class="nav nav--promo"> |
| 24 | <li><a href="about.html">О совете депутатов</a></li> | 28 | <li><a href="about.html">О совете депутатов</a></li> |
| 25 | <li><a href="#">Кандидаты</a></li> | 29 | <li><a href="#">Кандидаты</a></li> | ... | ... |
src/scripts/jquery.sidr.js
0 → 100644
| 1 | +/*! sidr - v2.2.1 - 2016-02-17 | ||
| 2 | + * http://www.berriart.com/sidr/ | ||
| 3 | + * Copyright (c) 2013-2016 Alberto Varela; Licensed MIT */ | ||
| 4 | + | ||
| 5 | +(function () { | ||
| 6 | + 'use strict'; | ||
| 7 | + | ||
| 8 | + var babelHelpers = {}; | ||
| 9 | + | ||
| 10 | + babelHelpers.classCallCheck = function (instance, Constructor) { | ||
| 11 | + if (!(instance instanceof Constructor)) { | ||
| 12 | + throw new TypeError("Cannot call a class as a function"); | ||
| 13 | + } | ||
| 14 | + }; | ||
| 15 | + | ||
| 16 | + babelHelpers.createClass = function () { | ||
| 17 | + function defineProperties(target, props) { | ||
| 18 | + for (var i = 0; i < props.length; i++) { | ||
| 19 | + var descriptor = props[i]; | ||
| 20 | + descriptor.enumerable = descriptor.enumerable || false; | ||
| 21 | + descriptor.configurable = true; | ||
| 22 | + if ("value" in descriptor) descriptor.writable = true; | ||
| 23 | + Object.defineProperty(target, descriptor.key, descriptor); | ||
| 24 | + } | ||
| 25 | + } | ||
| 26 | + | ||
| 27 | + return function (Constructor, protoProps, staticProps) { | ||
| 28 | + if (protoProps) defineProperties(Constructor.prototype, protoProps); | ||
| 29 | + if (staticProps) defineProperties(Constructor, staticProps); | ||
| 30 | + return Constructor; | ||
| 31 | + }; | ||
| 32 | + }(); | ||
| 33 | + | ||
| 34 | + babelHelpers; | ||
| 35 | + | ||
| 36 | + var sidrStatus = { | ||
| 37 | + moving: false, | ||
| 38 | + opened: false | ||
| 39 | + }; | ||
| 40 | + | ||
| 41 | + var helper = { | ||
| 42 | + // Check for valids urls | ||
| 43 | + // From : http://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-an-url | ||
| 44 | + | ||
| 45 | + isUrl: function isUrl(str) { | ||
| 46 | + var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol | ||
| 47 | + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name | ||
| 48 | + '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address | ||
| 49 | + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path | ||
| 50 | + '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string | ||
| 51 | + '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator | ||
| 52 | + | ||
| 53 | + if (pattern.test(str)) { | ||
| 54 | + return true; | ||
| 55 | + } else { | ||
| 56 | + return false; | ||
| 57 | + } | ||
| 58 | + }, | ||
| 59 | + | ||
| 60 | + | ||
| 61 | + // Add sidr prefixes | ||
| 62 | + addPrefixes: function addPrefixes($element) { | ||
| 63 | + this.addPrefix($element, 'id'); | ||
| 64 | + this.addPrefix($element, 'class'); | ||
| 65 | + $element.removeAttr('style'); | ||
| 66 | + }, | ||
| 67 | + addPrefix: function addPrefix($element, attribute) { | ||
| 68 | + var toReplace = $element.attr(attribute); | ||
| 69 | + | ||
| 70 | + if (typeof toReplace === 'string' && toReplace !== '' && toReplace !== 'sidr-inner') { | ||
| 71 | + $element.attr(attribute, toReplace.replace(/([A-Za-z0-9_.\-]+)/g, 'sidr-' + attribute + '-$1')); | ||
| 72 | + } | ||
| 73 | + }, | ||
| 74 | + | ||
| 75 | + | ||
| 76 | + // Check if transitions is supported | ||
| 77 | + transitions: function () { | ||
| 78 | + var body = document.body || document.documentElement, | ||
| 79 | + style = body.style, | ||
| 80 | + supported = false, | ||
| 81 | + property = 'transition'; | ||
| 82 | + | ||
| 83 | + if (property in style) { | ||
| 84 | + supported = true; | ||
| 85 | + } else { | ||
| 86 | + (function () { | ||
| 87 | + var prefixes = ['moz', 'webkit', 'o', 'ms'], | ||
| 88 | + prefix = undefined, | ||
| 89 | + i = undefined; | ||
| 90 | + | ||
| 91 | + property = property.charAt(0).toUpperCase() + property.substr(1); | ||
| 92 | + supported = function () { | ||
| 93 | + for (i = 0; i < prefixes.length; i++) { | ||
| 94 | + prefix = prefixes[i]; | ||
| 95 | + if (prefix + property in style) { | ||
| 96 | + return true; | ||
| 97 | + } | ||
| 98 | + } | ||
| 99 | + | ||
| 100 | + return false; | ||
| 101 | + }(); | ||
| 102 | + property = supported ? '-' + prefix.toLowerCase() + '-' + property.toLowerCase() : null; | ||
| 103 | + })(); | ||
| 104 | + } | ||
| 105 | + | ||
| 106 | + return { | ||
| 107 | + supported: supported, | ||
| 108 | + property: property | ||
| 109 | + }; | ||
| 110 | + }() | ||
| 111 | + }; | ||
| 112 | + | ||
| 113 | + var $$2 = jQuery; | ||
| 114 | + | ||
| 115 | + var bodyAnimationClass = 'sidr-animating'; | ||
| 116 | + var openAction = 'open'; | ||
| 117 | + var closeAction = 'close'; | ||
| 118 | + var transitionEndEvent = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'; | ||
| 119 | + var Menu = function () { | ||
| 120 | + function Menu(name) { | ||
| 121 | + babelHelpers.classCallCheck(this, Menu); | ||
| 122 | + | ||
| 123 | + this.name = name; | ||
| 124 | + this.item = $$2('#' + name); | ||
| 125 | + this.openClass = name === 'sidr' ? 'sidr-open' : 'sidr-open ' + name + '-open'; | ||
| 126 | + this.menuWidth = this.item.outerWidth(true); | ||
| 127 | + this.speed = this.item.data('speed'); | ||
| 128 | + this.side = this.item.data('side'); | ||
| 129 | + this.displace = this.item.data('displace'); | ||
| 130 | + this.timing = this.item.data('timing'); | ||
| 131 | + this.method = this.item.data('method'); | ||
| 132 | + this.onOpenCallback = this.item.data('onOpen'); | ||
| 133 | + this.onCloseCallback = this.item.data('onClose'); | ||
| 134 | + this.onOpenEndCallback = this.item.data('onOpenEnd'); | ||
| 135 | + this.onCloseEndCallback = this.item.data('onCloseEnd'); | ||
| 136 | + this.body = $$2(this.item.data('body')); | ||
| 137 | + } | ||
| 138 | + | ||
| 139 | + babelHelpers.createClass(Menu, [{ | ||
| 140 | + key: 'getAnimation', | ||
| 141 | + value: function getAnimation(action, element) { | ||
| 142 | + var animation = {}, | ||
| 143 | + prop = this.side; | ||
| 144 | + | ||
| 145 | + if (action === 'open' && element === 'body') { | ||
| 146 | + animation[prop] = this.menuWidth + 'px'; | ||
| 147 | + } else if (action === 'close' && element === 'menu') { | ||
| 148 | + animation[prop] = '-' + this.menuWidth + 'px'; | ||
| 149 | + } else { | ||
| 150 | + animation[prop] = 0; | ||
| 151 | + } | ||
| 152 | + | ||
| 153 | + return animation; | ||
| 154 | + } | ||
| 155 | + }, { | ||
| 156 | + key: 'prepareBody', | ||
| 157 | + value: function prepareBody(action) { | ||
| 158 | + var prop = action === 'open' ? 'hidden' : ''; | ||
| 159 | + | ||
| 160 | + // Prepare page if container is body | ||
| 161 | + if (this.body.is('body')) { | ||
| 162 | + var $html = $$2('html'), | ||
| 163 | + scrollTop = $html.scrollTop(); | ||
| 164 | + | ||
| 165 | + $html.css('overflow-x', prop).scrollTop(scrollTop); | ||
| 166 | + } | ||
| 167 | + } | ||
| 168 | + }, { | ||
| 169 | + key: 'openBody', | ||
| 170 | + value: function openBody() { | ||
| 171 | + if (this.displace) { | ||
| 172 | + var transitions = helper.transitions, | ||
| 173 | + $body = this.body; | ||
| 174 | + | ||
| 175 | + if (transitions.supported) { | ||
| 176 | + $body.css(transitions.property, this.side + ' ' + this.speed / 1000 + 's ' + this.timing).css(this.side, 0).css({ | ||
| 177 | + width: $body.width(), | ||
| 178 | + position: 'absolute' | ||
| 179 | + }); | ||
| 180 | + $body.css(this.side, this.menuWidth + 'px'); | ||
| 181 | + } else { | ||
| 182 | + var bodyAnimation = this.getAnimation(openAction, 'body'); | ||
| 183 | + | ||
| 184 | + $body.css({ | ||
| 185 | + width: $body.width(), | ||
| 186 | + position: 'absolute' | ||
| 187 | + }).animate(bodyAnimation, { | ||
| 188 | + queue: false, | ||
| 189 | + duration: this.speed | ||
| 190 | + }); | ||
| 191 | + } | ||
| 192 | + } | ||
| 193 | + } | ||
| 194 | + }, { | ||
| 195 | + key: 'onCloseBody', | ||
| 196 | + value: function onCloseBody() { | ||
| 197 | + var transitions = helper.transitions, | ||
| 198 | + resetStyles = { | ||
| 199 | + width: '', | ||
| 200 | + position: '', | ||
| 201 | + right: '', | ||
| 202 | + left: '' | ||
| 203 | + }; | ||
| 204 | + | ||
| 205 | + if (transitions.supported) { | ||
| 206 | + resetStyles[transitions.property] = ''; | ||
| 207 | + } | ||
| 208 | + | ||
| 209 | + this.body.css(resetStyles).unbind(transitionEndEvent); | ||
| 210 | + } | ||
| 211 | + }, { | ||
| 212 | + key: 'closeBody', | ||
| 213 | + value: function closeBody() { | ||
| 214 | + var _this = this; | ||
| 215 | + | ||
| 216 | + if (this.displace) { | ||
| 217 | + if (helper.transitions.supported) { | ||
| 218 | + this.body.css(this.side, 0).one(transitionEndEvent, function () { | ||
| 219 | + _this.onCloseBody(); | ||
| 220 | + }); | ||
| 221 | + } else { | ||
| 222 | + var bodyAnimation = this.getAnimation(closeAction, 'body'); | ||
| 223 | + | ||
| 224 | + this.body.animate(bodyAnimation, { | ||
| 225 | + queue: false, | ||
| 226 | + duration: this.speed, | ||
| 227 | + complete: function complete() { | ||
| 228 | + _this.onCloseBody(); | ||
| 229 | + } | ||
| 230 | + }); | ||
| 231 | + } | ||
| 232 | + } | ||
| 233 | + } | ||
| 234 | + }, { | ||
| 235 | + key: 'moveBody', | ||
| 236 | + value: function moveBody(action) { | ||
| 237 | + if (action === openAction) { | ||
| 238 | + this.openBody(); | ||
| 239 | + } else { | ||
| 240 | + this.closeBody(); | ||
| 241 | + } | ||
| 242 | + } | ||
| 243 | + }, { | ||
| 244 | + key: 'onOpenMenu', | ||
| 245 | + value: function onOpenMenu(callback) { | ||
| 246 | + var name = this.name; | ||
| 247 | + | ||
| 248 | + sidrStatus.moving = false; | ||
| 249 | + sidrStatus.opened = name; | ||
| 250 | + | ||
| 251 | + this.item.unbind(transitionEndEvent); | ||
| 252 | + | ||
| 253 | + this.body.removeClass(bodyAnimationClass).addClass(this.openClass); | ||
| 254 | + | ||
| 255 | + this.onOpenEndCallback(); | ||
| 256 | + | ||
| 257 | + if (typeof callback === 'function') { | ||
| 258 | + callback(name); | ||
| 259 | + } | ||
| 260 | + } | ||
| 261 | + }, { | ||
| 262 | + key: 'openMenu', | ||
| 263 | + value: function openMenu(callback) { | ||
| 264 | + var _this2 = this; | ||
| 265 | + | ||
| 266 | + var $item = this.item; | ||
| 267 | + | ||
| 268 | + if (helper.transitions.supported) { | ||
| 269 | + $item.css(this.side, 0).one(transitionEndEvent, function () { | ||
| 270 | + _this2.onOpenMenu(callback); | ||
| 271 | + }); | ||
| 272 | + } else { | ||
| 273 | + var menuAnimation = this.getAnimation(openAction, 'menu'); | ||
| 274 | + | ||
| 275 | + $item.css('display', 'block').animate(menuAnimation, { | ||
| 276 | + queue: false, | ||
| 277 | + duration: this.speed, | ||
| 278 | + complete: function complete() { | ||
| 279 | + _this2.onOpenMenu(callback); | ||
| 280 | + } | ||
| 281 | + }); | ||
| 282 | + } | ||
| 283 | + } | ||
| 284 | + }, { | ||
| 285 | + key: 'onCloseMenu', | ||
| 286 | + value: function onCloseMenu(callback) { | ||
| 287 | + this.item.css({ | ||
| 288 | + left: '', | ||
| 289 | + right: '' | ||
| 290 | + }).unbind(transitionEndEvent); | ||
| 291 | + $$2('html').css('overflow-x', ''); | ||
| 292 | + | ||
| 293 | + sidrStatus.moving = false; | ||
| 294 | + sidrStatus.opened = false; | ||
| 295 | + | ||
| 296 | + this.body.removeClass(bodyAnimationClass).removeClass(this.openClass); | ||
| 297 | + | ||
| 298 | + this.onCloseEndCallback(); | ||
| 299 | + | ||
| 300 | + // Callback | ||
| 301 | + if (typeof callback === 'function') { | ||
| 302 | + callback(name); | ||
| 303 | + } | ||
| 304 | + } | ||
| 305 | + }, { | ||
| 306 | + key: 'closeMenu', | ||
| 307 | + value: function closeMenu(callback) { | ||
| 308 | + var _this3 = this; | ||
| 309 | + | ||
| 310 | + var item = this.item; | ||
| 311 | + | ||
| 312 | + if (helper.transitions.supported) { | ||
| 313 | + item.css(this.side, '').one(transitionEndEvent, function () { | ||
| 314 | + _this3.onCloseMenu(callback); | ||
| 315 | + }); | ||
| 316 | + } else { | ||
| 317 | + var menuAnimation = this.getAnimation(closeAction, 'menu'); | ||
| 318 | + | ||
| 319 | + item.animate(menuAnimation, { | ||
| 320 | + queue: false, | ||
| 321 | + duration: this.speed, | ||
| 322 | + complete: function complete() { | ||
| 323 | + _this3.onCloseMenu(); | ||
| 324 | + } | ||
| 325 | + }); | ||
| 326 | + } | ||
| 327 | + } | ||
| 328 | + }, { | ||
| 329 | + key: 'moveMenu', | ||
| 330 | + value: function moveMenu(action, callback) { | ||
| 331 | + this.body.addClass(bodyAnimationClass); | ||
| 332 | + | ||
| 333 | + if (action === openAction) { | ||
| 334 | + this.openMenu(callback); | ||
| 335 | + } else { | ||
| 336 | + this.closeMenu(callback); | ||
| 337 | + } | ||
| 338 | + } | ||
| 339 | + }, { | ||
| 340 | + key: 'move', | ||
| 341 | + value: function move(action, callback) { | ||
| 342 | + // Lock sidr | ||
| 343 | + sidrStatus.moving = true; | ||
| 344 | + | ||
| 345 | + this.prepareBody(action); | ||
| 346 | + this.moveBody(action); | ||
| 347 | + this.moveMenu(action, callback); | ||
| 348 | + } | ||
| 349 | + }, { | ||
| 350 | + key: 'open', | ||
| 351 | + value: function open(callback) { | ||
| 352 | + var _this4 = this; | ||
| 353 | + | ||
| 354 | + // Check if is already opened or moving | ||
| 355 | + if (sidrStatus.opened === this.name || sidrStatus.moving) { | ||
| 356 | + return; | ||
| 357 | + } | ||
| 358 | + | ||
| 359 | + // If another menu opened close first | ||
| 360 | + if (sidrStatus.opened !== false) { | ||
| 361 | + var alreadyOpenedMenu = new Menu(sidrStatus.opened); | ||
| 362 | + | ||
| 363 | + alreadyOpenedMenu.close(function () { | ||
| 364 | + _this4.open(callback); | ||
| 365 | + }); | ||
| 366 | + | ||
| 367 | + return; | ||
| 368 | + } | ||
| 369 | + | ||
| 370 | + this.move('open', callback); | ||
| 371 | + | ||
| 372 | + // onOpen callback | ||
| 373 | + this.onOpenCallback(); | ||
| 374 | + } | ||
| 375 | + }, { | ||
| 376 | + key: 'close', | ||
| 377 | + value: function close(callback) { | ||
| 378 | + // Check if is already closed or moving | ||
| 379 | + if (sidrStatus.opened !== this.name || sidrStatus.moving) { | ||
| 380 | + return; | ||
| 381 | + } | ||
| 382 | + | ||
| 383 | + this.move('close', callback); | ||
| 384 | + | ||
| 385 | + // onClose callback | ||
| 386 | + this.onCloseCallback(); | ||
| 387 | + } | ||
| 388 | + }, { | ||
| 389 | + key: 'toggle', | ||
| 390 | + value: function toggle(callback) { | ||
| 391 | + if (sidrStatus.opened === this.name) { | ||
| 392 | + this.close(callback); | ||
| 393 | + } else { | ||
| 394 | + this.open(callback); | ||
| 395 | + } | ||
| 396 | + } | ||
| 397 | + }]); | ||
| 398 | + return Menu; | ||
| 399 | + }(); | ||
| 400 | + | ||
| 401 | + var $$1 = jQuery; | ||
| 402 | + | ||
| 403 | + function execute(action, name, callback) { | ||
| 404 | + var sidr = new Menu(name); | ||
| 405 | + | ||
| 406 | + switch (action) { | ||
| 407 | + case 'open': | ||
| 408 | + sidr.open(callback); | ||
| 409 | + break; | ||
| 410 | + case 'close': | ||
| 411 | + sidr.close(callback); | ||
| 412 | + break; | ||
| 413 | + case 'toggle': | ||
| 414 | + sidr.toggle(callback); | ||
| 415 | + break; | ||
| 416 | + default: | ||
| 417 | + $$1.error('Method ' + action + ' does not exist on jQuery.sidr'); | ||
| 418 | + break; | ||
| 419 | + } | ||
| 420 | + } | ||
| 421 | + | ||
| 422 | + var i; | ||
| 423 | + var $ = jQuery; | ||
| 424 | + var publicMethods = ['open', 'close', 'toggle']; | ||
| 425 | + var methodName; | ||
| 426 | + var methods = {}; | ||
| 427 | + var getMethod = function getMethod(methodName) { | ||
| 428 | + return function (name, callback) { | ||
| 429 | + // Check arguments | ||
| 430 | + if (typeof name === 'function') { | ||
| 431 | + callback = name; | ||
| 432 | + name = 'sidr'; | ||
| 433 | + } else if (!name) { | ||
| 434 | + name = 'sidr'; | ||
| 435 | + } | ||
| 436 | + | ||
| 437 | + execute(methodName, name, callback); | ||
| 438 | + }; | ||
| 439 | + }; | ||
| 440 | + for (i = 0; i < publicMethods.length; i++) { | ||
| 441 | + methodName = publicMethods[i]; | ||
| 442 | + methods[methodName] = getMethod(methodName); | ||
| 443 | + } | ||
| 444 | + | ||
| 445 | + function sidr(method) { | ||
| 446 | + if (method === 'status') { | ||
| 447 | + return sidrStatus; | ||
| 448 | + } else if (methods[method]) { | ||
| 449 | + return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); | ||
| 450 | + } else if (typeof method === 'function' || typeof method === 'string' || !method) { | ||
| 451 | + return methods.toggle.apply(this, arguments); | ||
| 452 | + } else { | ||
| 453 | + $.error('Method ' + method + ' does not exist on jQuery.sidr'); | ||
| 454 | + } | ||
| 455 | + } | ||
| 456 | + | ||
| 457 | + var $$3 = jQuery; | ||
| 458 | + | ||
| 459 | + function fillContent($sideMenu, settings) { | ||
| 460 | + // The menu content | ||
| 461 | + if (typeof settings.source === 'function') { | ||
| 462 | + var newContent = settings.source(name); | ||
| 463 | + | ||
| 464 | + $sideMenu.html(newContent); | ||
| 465 | + } else if (typeof settings.source === 'string' && helper.isUrl(settings.source)) { | ||
| 466 | + $$3.get(settings.source, function (data) { | ||
| 467 | + $sideMenu.html(data); | ||
| 468 | + }); | ||
| 469 | + } else if (typeof settings.source === 'string') { | ||
| 470 | + var htmlContent = '', | ||
| 471 | + selectors = settings.source.split(','); | ||
| 472 | + | ||
| 473 | + $$3.each(selectors, function (index, element) { | ||
| 474 | + htmlContent += '<div class="sidr-inner">' + $$3(element).html() + '</div>'; | ||
| 475 | + }); | ||
| 476 | + | ||
| 477 | + // Renaming ids and classes | ||
| 478 | + if (settings.renaming) { | ||
| 479 | + var $htmlContent = $$3('<div />').html(htmlContent); | ||
| 480 | + | ||
| 481 | + $htmlContent.find('*').each(function (index, element) { | ||
| 482 | + var $element = $$3(element); | ||
| 483 | + | ||
| 484 | + helper.addPrefixes($element); | ||
| 485 | + }); | ||
| 486 | + htmlContent = $htmlContent.html(); | ||
| 487 | + } | ||
| 488 | + | ||
| 489 | + $sideMenu.html(htmlContent); | ||
| 490 | + } else if (settings.source !== null) { | ||
| 491 | + $$3.error('Invalid Sidr Source'); | ||
| 492 | + } | ||
| 493 | + | ||
| 494 | + return $sideMenu; | ||
| 495 | + } | ||
| 496 | + | ||
| 497 | + function fnSidr(options) { | ||
| 498 | + var transitions = helper.transitions, | ||
| 499 | + settings = $$3.extend({ | ||
| 500 | + name: 'sidr', // Name for the 'sidr' | ||
| 501 | + speed: 200, // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds) | ||
| 502 | + side: 'left', // Accepts 'left' or 'right' | ||
| 503 | + source: null, // Override the source of the content. | ||
| 504 | + renaming: true, // The ids and classes will be prepended with a prefix when loading existent content | ||
| 505 | + body: 'body', // Page container selector, | ||
| 506 | + displace: true, // Displace the body content or not | ||
| 507 | + timing: 'ease', // Timing function for CSS transitions | ||
| 508 | + method: 'toggle', // The method to call when element is clicked | ||
| 509 | + bind: 'touchstart click', // The event(s) to trigger the menu | ||
| 510 | + onOpen: function onOpen() {}, | ||
| 511 | + // Callback when sidr start opening | ||
| 512 | + onClose: function onClose() {}, | ||
| 513 | + // Callback when sidr start closing | ||
| 514 | + onOpenEnd: function onOpenEnd() {}, | ||
| 515 | + // Callback when sidr end opening | ||
| 516 | + onCloseEnd: function onCloseEnd() {} // Callback when sidr end closing | ||
| 517 | + | ||
| 518 | + }, options), | ||
| 519 | + name = settings.name, | ||
| 520 | + $sideMenu = $$3('#' + name); | ||
| 521 | + | ||
| 522 | + // If the side menu do not exist create it | ||
| 523 | + if ($sideMenu.length === 0) { | ||
| 524 | + $sideMenu = $$3('<div />').attr('id', name).appendTo($$3('body')); | ||
| 525 | + } | ||
| 526 | + | ||
| 527 | + // Add transition to menu if are supported | ||
| 528 | + if (transitions.supported) { | ||
| 529 | + $sideMenu.css(transitions.property, settings.side + ' ' + settings.speed / 1000 + 's ' + settings.timing); | ||
| 530 | + } | ||
| 531 | + | ||
| 532 | + // Adding styles and options | ||
| 533 | + $sideMenu.addClass('sidr').addClass(settings.side).data({ | ||
| 534 | + speed: settings.speed, | ||
| 535 | + side: settings.side, | ||
| 536 | + body: settings.body, | ||
| 537 | + displace: settings.displace, | ||
| 538 | + timing: settings.timing, | ||
| 539 | + method: settings.method, | ||
| 540 | + onOpen: settings.onOpen, | ||
| 541 | + onClose: settings.onClose, | ||
| 542 | + onOpenEnd: settings.onOpenEnd, | ||
| 543 | + onCloseEnd: settings.onCloseEnd | ||
| 544 | + }); | ||
| 545 | + | ||
| 546 | + $sideMenu = fillContent($sideMenu, settings); | ||
| 547 | + | ||
| 548 | + return this.each(function () { | ||
| 549 | + var $this = $$3(this), | ||
| 550 | + data = $this.data('sidr'), | ||
| 551 | + flag = false; | ||
| 552 | + | ||
| 553 | + // If the plugin hasn't been initialized yet | ||
| 554 | + if (!data) { | ||
| 555 | + sidrStatus.moving = false; | ||
| 556 | + sidrStatus.opened = false; | ||
| 557 | + | ||
| 558 | + $this.data('sidr', name); | ||
| 559 | + | ||
| 560 | + $this.bind(settings.bind, function (event) { | ||
| 561 | + event.preventDefault(); | ||
| 562 | + | ||
| 563 | + if (!flag) { | ||
| 564 | + flag = true; | ||
| 565 | + sidr(settings.method, name); | ||
| 566 | + | ||
| 567 | + setTimeout(function () { | ||
| 568 | + flag = false; | ||
| 569 | + }, 100); | ||
| 570 | + } | ||
| 571 | + }); | ||
| 572 | + } | ||
| 573 | + }); | ||
| 574 | + } | ||
| 575 | + | ||
| 576 | + jQuery.sidr = sidr; | ||
| 577 | + jQuery.fn.sidr = fnSidr; | ||
| 578 | + | ||
| 579 | +}()); | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 1 | + | ||
| 2 | +$(document).ready(function() { | ||
| 3 | + $('#right-menu').sidr({ | ||
| 4 | + name: 'sidr-right', | ||
| 5 | + side: 'right', | ||
| 6 | + source: '.header__nav__wrapper', | ||
| 7 | + onOpen: function() { | ||
| 8 | + $('.mobile-menu').addClass('active'); | ||
| 9 | + }, | ||
| 10 | + onClose: function() { | ||
| 11 | + $('.mobile-menu').removeClass('active'); | ||
| 12 | + } | ||
| 13 | + }); | ||
| 14 | +}); | ||
| 15 | + | ||
| 16 | +$(document).mouseup(function (e){ | ||
| 17 | + var container = $("#sidr-right"); | ||
| 18 | + | ||
| 19 | + if (!container.is(e.target) | ||
| 20 | + && container.has(e.target).length === 0) { | ||
| 21 | + $.sidr('close', 'sidr-right'); | ||
| 22 | + } | ||
| 23 | +}); | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| 1 | 1 | ||
| 2 | .btn { | 2 | .btn { |
| 3 | outline: none; | 3 | outline: none; |
| 4 | + white-space: normal; | ||
| 4 | 5 | ||
| 5 | &:active, &:focus { | 6 | &:active, &:focus { |
| 6 | outline: none; | 7 | outline: none; |
| ... | @@ -17,13 +18,16 @@ | ... | @@ -17,13 +18,16 @@ |
| 17 | border: 1px solid #fb1e42; | 18 | border: 1px solid #fb1e42; |
| 18 | color: white; | 19 | color: white; |
| 19 | 20 | ||
| 20 | - &:hover, &:focus { | 21 | + &:hover, &:focus, &:active { |
| 21 | background-color: #fb1e42; | 22 | background-color: #fb1e42; |
| 22 | border: 1px solid #fb1e42; | 23 | border: 1px solid #fb1e42; |
| 23 | color: white; | 24 | color: white; |
| 25 | + } | ||
| 24 | 26 | ||
| 27 | + &:hover { | ||
| 25 | &:active { | 28 | &:active { |
| 26 | background-color: #fb1e42; | 29 | background-color: #fb1e42; |
| 30 | + border: 1px solid #fb1e42; | ||
| 27 | color: white; | 31 | color: white; |
| 28 | } | 32 | } |
| 29 | } | 33 | } |
| ... | @@ -32,13 +36,16 @@ | ... | @@ -32,13 +36,16 @@ |
| 32 | background-color: #125f8e; | 36 | background-color: #125f8e; |
| 33 | border: 1px solid #125f8e; | 37 | border: 1px solid #125f8e; |
| 34 | 38 | ||
| 35 | - &:hover, &:focus { | 39 | + &:hover, &:focus, &:active { |
| 36 | background-color: #125f8e; | 40 | background-color: #125f8e; |
| 37 | border: 1px solid #125f8e; | 41 | border: 1px solid #125f8e; |
| 38 | color: white; | 42 | color: white; |
| 43 | + } | ||
| 39 | 44 | ||
| 45 | + &:hover { | ||
| 40 | &:active { | 46 | &:active { |
| 41 | background-color: #125f8e; | 47 | background-color: #125f8e; |
| 48 | + border: 1px solid #125f8e; | ||
| 42 | color: white; | 49 | color: white; |
| 43 | } | 50 | } |
| 44 | } | 51 | } |
| ... | @@ -56,24 +63,22 @@ | ... | @@ -56,24 +63,22 @@ |
| 56 | letter-spacing: 0.09em; | 63 | letter-spacing: 0.09em; |
| 57 | transition: all 0.2s ease; | 64 | transition: all 0.2s ease; |
| 58 | text-transform: uppercase; | 65 | text-transform: uppercase; |
| 59 | - | 66 | + @media(@xs){ |
| 60 | - &:hover { | 67 | + width: 100%; |
| 61 | - background-color: rgba(18, 95, 142, 0.8); | 68 | + font-size: 12px; |
| 62 | - color: white; | 69 | + padding: 10px 0px; |
| 63 | } | 70 | } |
| 64 | 71 | ||
| 65 | - &:focus { | 72 | + &:hover, &:focus, &:active { |
| 66 | - text-decoration: none; | 73 | + background-color: rgba(18, 95, 142, 0.8); |
| 67 | - background-color: #125f8e; | 74 | + border: 1px solid rgba(18, 95, 142, 0.8); |
| 68 | color: white; | 75 | color: white; |
| 69 | } | 76 | } |
| 70 | 77 | ||
| 78 | + &:hover { | ||
| 71 | &:active { | 79 | &:active { |
| 72 | background-color: rgba(18, 95, 142, 0.8); | 80 | background-color: rgba(18, 95, 142, 0.8); |
| 73 | - color: white; | 81 | + border: 1px solid rgba(18, 95, 142, 0.8); |
| 74 | - | ||
| 75 | - &:focus { | ||
| 76 | - background-color: rgba(18, 95, 142, 0.8); | ||
| 77 | color: white; | 82 | color: white; |
| 78 | } | 83 | } |
| 79 | } | 84 | } |
| ... | @@ -91,8 +96,18 @@ | ... | @@ -91,8 +96,18 @@ |
| 91 | background: #fb1e42; | 96 | background: #fb1e42; |
| 92 | color: white; | 97 | color: white; |
| 93 | 98 | ||
| 94 | - &:hover, &:focus { | 99 | + &:hover, &:focus, &:active { |
| 100 | + background-color: #fb1e42; | ||
| 101 | + border: 1px solid #fb1e42; | ||
| 102 | + color: white; | ||
| 103 | + } | ||
| 104 | + | ||
| 105 | + &:hover { | ||
| 106 | + &:active { | ||
| 107 | + background-color: #fb1e42; | ||
| 108 | + border: 1px solid #fb1e42; | ||
| 95 | color: white; | 109 | color: white; |
| 96 | } | 110 | } |
| 97 | } | 111 | } |
| 112 | + } | ||
| 98 | } | 113 | } |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -2,6 +2,10 @@ | ... | @@ -2,6 +2,10 @@ |
| 2 | .content { | 2 | .content { |
| 3 | min-height: 500px; | 3 | min-height: 500px; |
| 4 | padding: 30px 0px; | 4 | padding: 30px 0px; |
| 5 | + @media(@md){ | ||
| 6 | + padding: 20px 0px; | ||
| 7 | + min-height: inherit; | ||
| 8 | + } | ||
| 5 | 9 | ||
| 6 | &__container { | 10 | &__container { |
| 7 | .container(); | 11 | .container(); |
| ... | @@ -15,12 +19,22 @@ | ... | @@ -15,12 +19,22 @@ |
| 15 | height: 150px; | 19 | height: 150px; |
| 16 | position: relative; | 20 | position: relative; |
| 17 | overflow: hidden; | 21 | overflow: hidden; |
| 22 | + @media(@sm){ | ||
| 23 | + height: inherit; | ||
| 24 | + width: 100%; | ||
| 25 | + } | ||
| 18 | 26 | ||
| 19 | img { | 27 | img { |
| 20 | position: absolute; | 28 | position: absolute; |
| 21 | left: 50%; | 29 | left: 50%; |
| 22 | top: 50%; | 30 | top: 50%; |
| 23 | transform: translate(-50%, -50%); | 31 | transform: translate(-50%, -50%); |
| 32 | + @media(@sm){ | ||
| 33 | + position: relative; | ||
| 34 | + left: inherit; | ||
| 35 | + top: initial; | ||
| 36 | + transform: none; | ||
| 37 | + } | ||
| 24 | } | 38 | } |
| 25 | } | 39 | } |
| 26 | } | 40 | } |
| ... | @@ -186,7 +200,6 @@ | ... | @@ -186,7 +200,6 @@ |
| 186 | } | 200 | } |
| 187 | } | 201 | } |
| 188 | 202 | ||
| 189 | - | ||
| 190 | .progress { | 203 | .progress { |
| 191 | position: relative; | 204 | position: relative; |
| 192 | 205 | ... | ... |
| ... | @@ -8,6 +8,9 @@ | ... | @@ -8,6 +8,9 @@ |
| 8 | //background-color: #D7D7D7; | 8 | //background-color: #D7D7D7; |
| 9 | background: #125f8e; | 9 | background: #125f8e; |
| 10 | color: white; | 10 | color: white; |
| 11 | + @media(@md){ | ||
| 12 | + padding: 20px 0px; | ||
| 13 | + } | ||
| 11 | 14 | ||
| 12 | &__container { | 15 | &__container { |
| 13 | .container(); | 16 | .container(); |
| ... | @@ -15,14 +18,19 @@ | ... | @@ -15,14 +18,19 @@ |
| 15 | 18 | ||
| 16 | &__left { | 19 | &__left { |
| 17 | float: left; | 20 | float: left; |
| 21 | + @media(@md){ | ||
| 22 | + width: 100%; | ||
| 23 | + text-align: center; | ||
| 24 | + margin-bottom: 20px; | ||
| 25 | + } | ||
| 18 | } | 26 | } |
| 19 | 27 | ||
| 20 | &__right { | 28 | &__right { |
| 21 | float: right; | 29 | float: right; |
| 30 | + @media(@md){ | ||
| 31 | + width: 100%; | ||
| 32 | + text-align: center; | ||
| 22 | } | 33 | } |
| 23 | - | ||
| 24 | - p { | ||
| 25 | - //color: ; | ||
| 26 | } | 34 | } |
| 27 | } | 35 | } |
| 28 | 36 | ... | ... |
| ... | @@ -14,20 +14,37 @@ | ... | @@ -14,20 +14,37 @@ |
| 14 | 14 | ||
| 15 | &__logo { | 15 | &__logo { |
| 16 | .make-xs-column(2); | 16 | .make-xs-column(2); |
| 17 | + width: initial; | ||
| 17 | } | 18 | } |
| 18 | 19 | ||
| 19 | &__title { | 20 | &__title { |
| 20 | font-size: 18px; | 21 | font-size: 18px; |
| 21 | font-weight: bold; | 22 | font-weight: bold; |
| 22 | margin-top: 10px; | 23 | margin-top: 10px; |
| 24 | + @media(@md){ | ||
| 25 | + font-size: 14px; | ||
| 26 | + margin-top: 0; | ||
| 27 | + } | ||
| 23 | } | 28 | } |
| 24 | 29 | ||
| 25 | &__nav { | 30 | &__nav { |
| 26 | .make-xs-column(18.5); | 31 | .make-xs-column(18.5); |
| 32 | + @media(@md){ | ||
| 33 | + float: none; | ||
| 34 | + width: 100%; | ||
| 35 | + padding: 0px 60px 0px 67px; | ||
| 36 | + } | ||
| 37 | + | ||
| 38 | + &__wrapper { | ||
| 39 | + @media(@md){ | ||
| 40 | + display: none; | ||
| 41 | + } | ||
| 42 | + } | ||
| 27 | } | 43 | } |
| 28 | 44 | ||
| 29 | &__do { | 45 | &__do { |
| 30 | - .make-xs-column(3.5); | 46 | + .make-md-column(24); |
| 47 | + .make-lg-column(3.5); | ||
| 31 | margin-top: 15px; | 48 | margin-top: 15px; |
| 32 | text-align: right; | 49 | text-align: right; |
| 33 | 50 | ||
| ... | @@ -37,6 +54,76 @@ | ... | @@ -37,6 +54,76 @@ |
| 37 | } | 54 | } |
| 38 | } | 55 | } |
| 39 | 56 | ||
| 57 | +.mobile-menu { | ||
| 58 | + position: absolute; | ||
| 59 | + top: 20px; | ||
| 60 | + right: 10px; | ||
| 61 | + width: 43px; | ||
| 62 | + height: 40px; | ||
| 63 | + color: #345; | ||
| 64 | + border: 2px solid white; | ||
| 65 | + background: #125f8e; | ||
| 66 | + z-index: 2; | ||
| 67 | + cursor: pointer; | ||
| 68 | + font-size: 20px; | ||
| 69 | + display: none; | ||
| 70 | + | ||
| 71 | + @media(@md){ | ||
| 72 | + display: block; | ||
| 73 | + } | ||
| 74 | + | ||
| 75 | + span { | ||
| 76 | + position: relative; | ||
| 77 | + background-color: white; | ||
| 78 | + height: 2px; | ||
| 79 | + display: block; | ||
| 80 | + width: 22px; | ||
| 81 | + margin: 17px auto 0; | ||
| 82 | + //transition: all 0.4s; | ||
| 83 | + //transition-delay: 0.3s; | ||
| 84 | + | ||
| 85 | + &:before, | ||
| 86 | + &:after { | ||
| 87 | + content: ''; | ||
| 88 | + position: absolute; | ||
| 89 | + display: block; | ||
| 90 | + width: 20px; | ||
| 91 | + height: 0; | ||
| 92 | + left: 1px; | ||
| 93 | + top: 50%; | ||
| 94 | + margin-top: -7px; | ||
| 95 | + //transition: all 0.3s 0.3s; | ||
| 96 | + } | ||
| 97 | + | ||
| 98 | + &:before { | ||
| 99 | + box-shadow: 0 14px 0 1px white; | ||
| 100 | + } | ||
| 101 | + | ||
| 102 | + &:after { | ||
| 103 | + box-shadow: 0 0 0 1px white; | ||
| 104 | + } | ||
| 105 | + } | ||
| 106 | + | ||
| 107 | + &.active { | ||
| 108 | + span { | ||
| 109 | + background-color: transparent; | ||
| 110 | + | ||
| 111 | + &:before { | ||
| 112 | + transform: rotate(-45deg); | ||
| 113 | + } | ||
| 114 | + | ||
| 115 | + &:after { | ||
| 116 | + transform: rotate(45deg); | ||
| 117 | + } | ||
| 118 | + | ||
| 119 | + &:before, | ||
| 120 | + &:after { | ||
| 121 | + margin-top: 0; | ||
| 122 | + box-shadow: 0 0 0 1px white; | ||
| 123 | + } | ||
| 124 | + } | ||
| 125 | + } | ||
| 126 | +} | ||
| 40 | 127 | ||
| 41 | .nav { | 128 | .nav { |
| 42 | &--promo { | 129 | &--promo { |
| ... | @@ -89,3 +176,5 @@ | ... | @@ -89,3 +176,5 @@ |
| 89 | } | 176 | } |
| 90 | } | 177 | } |
| 91 | } | 178 | } |
| 179 | + | ||
| 180 | + | ... | ... |
| ... | @@ -6,5 +6,10 @@ | ... | @@ -6,5 +6,10 @@ |
| 6 | width: 60px; | 6 | width: 60px; |
| 7 | height: 68px; | 7 | height: 68px; |
| 8 | background-size: cover; | 8 | background-size: cover; |
| 9 | + | ||
| 10 | + @media(@md){ | ||
| 11 | + width: 45px; | ||
| 12 | + height: 50px; | ||
| 13 | + } | ||
| 9 | } | 14 | } |
| 10 | } | 15 | } |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| 1 | @import "../../bower_components/bootstrap/less/bootstrap"; | 1 | @import "../../bower_components/bootstrap/less/bootstrap"; |
| 2 | @import "../../bower_components/bootstrap-select/less/bootstrap-select"; | 2 | @import "../../bower_components/bootstrap-select/less/bootstrap-select"; |
| 3 | +@import (inline)"../../bower_components/sidr/dist/stylesheets/jquery.sidr.dark.css"; | ||
| 3 | 4 | ||
| 4 | @import "fonts"; | 5 | @import "fonts"; |
| 5 | @import "variables"; | 6 | @import "variables"; | ... | ... |
| ... | @@ -3,6 +3,9 @@ | ... | @@ -3,6 +3,9 @@ |
| 3 | text-align: center; | 3 | text-align: center; |
| 4 | padding: 30px 0px; | 4 | padding: 30px 0px; |
| 5 | color: #125f8e; | 5 | color: #125f8e; |
| 6 | + @media(@md){ | ||
| 7 | + padding: 0; | ||
| 8 | + } | ||
| 6 | 9 | ||
| 7 | &__row { | 10 | &__row { |
| 8 | .row; | 11 | .row; |
| ... | @@ -11,19 +14,36 @@ | ... | @@ -11,19 +14,36 @@ |
| 11 | &__logo { | 14 | &__logo { |
| 12 | margin-bottom: 30px; | 15 | margin-bottom: 30px; |
| 13 | display: inline-block; | 16 | display: inline-block; |
| 17 | + @media(@md){ | ||
| 18 | + margin-bottom: 10px; | ||
| 19 | + } | ||
| 14 | } | 20 | } |
| 15 | 21 | ||
| 16 | &__title { | 22 | &__title { |
| 17 | .head-h1; | 23 | .head-h1; |
| 24 | + @media(@md){ | ||
| 25 | + font-size: 20px; | ||
| 26 | + } | ||
| 27 | + @media(@xs){ | ||
| 28 | + font-size: 18px; | ||
| 29 | + } | ||
| 18 | } | 30 | } |
| 19 | 31 | ||
| 20 | &__nav { | 32 | &__nav { |
| 21 | margin-top: 30px; | 33 | margin-top: 30px; |
| 34 | + @media(@md){ | ||
| 35 | + display: block; | ||
| 36 | + } | ||
| 22 | 37 | ||
| 23 | li { | 38 | li { |
| 24 | - margin: 0px 10px; | 39 | + margin: 0px 10px 10px 10px; |
| 40 | + @media(@xs){ | ||
| 41 | + width: 100%; | ||
| 42 | + margin: 0px 0px 10px 0px; | ||
| 43 | + } | ||
| 25 | 44 | ||
| 26 | a { | 45 | a { |
| 46 | + display: inline-block; | ||
| 27 | color: #125f8e; | 47 | color: #125f8e; |
| 28 | font-size: 19px; | 48 | font-size: 19px; |
| 29 | border-bottom: 1px rgba(18, 95, 142, 0.5) dashed; | 49 | border-bottom: 1px rgba(18, 95, 142, 0.5) dashed; | ... | ... |
| ... | @@ -27,7 +27,7 @@ | ... | @@ -27,7 +27,7 @@ |
| 27 | 27 | ||
| 28 | // Large screen / wide desktop | 28 | // Large screen / wide desktop |
| 29 | //** Deprecated `@screen-lg` as of v3.0.1 | 29 | //** Deprecated `@screen-lg` as of v3.0.1 |
| 30 | -@screen-lg: 970px; | 30 | +@screen-lg: 990px; |
| 31 | @screen-lg-min: @screen-lg; | 31 | @screen-lg-min: @screen-lg; |
| 32 | //** Deprecated `@screen-lg-desktop` as of v3.0.1 | 32 | //** Deprecated `@screen-lg-desktop` as of v3.0.1 |
| 33 | @screen-lg-desktop: @screen-lg-min; | 33 | @screen-lg-desktop: @screen-lg-min; |
| ... | @@ -58,12 +58,12 @@ | ... | @@ -58,12 +58,12 @@ |
| 58 | //## Define the maximum width of `.container` for different screen sizes. | 58 | //## Define the maximum width of `.container` for different screen sizes. |
| 59 | 59 | ||
| 60 | // Small screen / tablet | 60 | // Small screen / tablet |
| 61 | -@container-tablet: (950px + @grid-gutter-width); | 61 | +@container-tablet: (100%); |
| 62 | //** For `@screen-sm-min` and up. | 62 | //** For `@screen-sm-min` and up. |
| 63 | @container-sm: @container-tablet; | 63 | @container-sm: @container-tablet; |
| 64 | 64 | ||
| 65 | // Medium screen / desktop | 65 | // Medium screen / desktop |
| 66 | -@container-desktop: (950px + @grid-gutter-width); | 66 | +@container-desktop: (100%); |
| 67 | //** For `@screen-md-min` and up. | 67 | //** For `@screen-md-min` and up. |
| 68 | @container-md: @container-desktop; | 68 | @container-md: @container-desktop; |
| 69 | 69 | ... | ... |
| ... | @@ -6,17 +6,29 @@ | ... | @@ -6,17 +6,29 @@ |
| 6 | padding: 20px 20px; | 6 | padding: 20px 20px; |
| 7 | 7 | ||
| 8 | &__map { | 8 | &__map { |
| 9 | - .make-xs-column(10); | 9 | + .make-xs-column(24); |
| 10 | + .make-lg-column(10); | ||
| 11 | + @media(@md){ | ||
| 12 | + padding: 0; | ||
| 13 | + } | ||
| 10 | 14 | ||
| 11 | &__iframe { | 15 | &__iframe { |
| 12 | width: 100%; | 16 | width: 100%; |
| 13 | height: 200px; | 17 | height: 200px; |
| 18 | + @media(@md){ | ||
| 19 | + height: 300px; | ||
| 20 | + } | ||
| 14 | } | 21 | } |
| 15 | } | 22 | } |
| 16 | 23 | ||
| 17 | &__description { | 24 | &__description { |
| 18 | - .make-xs-column(12); | 25 | + .make-xs-column(24); |
| 26 | + .make-lg-column(12); | ||
| 19 | margin-top: 80px; | 27 | margin-top: 80px; |
| 28 | + @media(@md){ | ||
| 29 | + margin-top: 20px; | ||
| 30 | + padding: 0; | ||
| 31 | + } | ||
| 20 | } | 32 | } |
| 21 | 33 | ||
| 22 | &__label { | 34 | &__label { |
| ... | @@ -57,8 +69,7 @@ | ... | @@ -57,8 +69,7 @@ |
| 57 | } | 69 | } |
| 58 | 70 | ||
| 59 | &__block { | 71 | &__block { |
| 60 | - float: left; | 72 | + margin: 0px -10px; |
| 61 | - margin: 0px -20px; | ||
| 62 | margin-bottom: 20px; | 73 | margin-bottom: 20px; |
| 63 | 74 | ||
| 64 | &:last-child { | 75 | &:last-child { |
| ... | @@ -68,28 +79,64 @@ | ... | @@ -68,28 +79,64 @@ |
| 68 | 79 | ||
| 69 | &__profile { | 80 | &__profile { |
| 70 | .make-xs-column(24); | 81 | .make-xs-column(24); |
| 82 | + padding: 0; | ||
| 71 | margin-bottom: 20px; | 83 | margin-bottom: 20px; |
| 84 | + @media(@sm){ | ||
| 85 | + padding: 0; | ||
| 86 | + } | ||
| 72 | 87 | ||
| 73 | &__wrapper { | 88 | &__wrapper { |
| 74 | - .make-xs-column(15); | 89 | + .make-xs-column(24); |
| 90 | + .make-md-column(15); | ||
| 75 | } | 91 | } |
| 76 | 92 | ||
| 77 | &__img { | 93 | &__img { |
| 78 | - .make-xs-column(9); | 94 | + .make-xs-column(24); |
| 95 | + .make-md-column(9); | ||
| 96 | + padding: 0; | ||
| 97 | + @media(@sm){ | ||
| 98 | + text-align: center; | ||
| 99 | + //padding: 0; | ||
| 100 | + } | ||
| 79 | } | 101 | } |
| 80 | 102 | ||
| 81 | &__description { | 103 | &__description { |
| 82 | - .make-xs-column(15); | 104 | + .make-xs-column(24); |
| 105 | + .make-md-column(15); | ||
| 106 | + padding: 0; | ||
| 107 | + @media(@sm){ | ||
| 108 | + //padding: 0; | ||
| 109 | + } | ||
| 83 | 110 | ||
| 84 | &__wrapper { | 111 | &__wrapper { |
| 85 | .make-xs-column(15); | 112 | .make-xs-column(15); |
| 86 | } | 113 | } |
| 114 | + | ||
| 115 | + p { | ||
| 116 | + @media(@sm){ | ||
| 117 | + font-size: 18px; | ||
| 118 | + } | ||
| 119 | + } | ||
| 87 | } | 120 | } |
| 88 | } | 121 | } |
| 89 | 122 | ||
| 90 | &__description { | 123 | &__description { |
| 91 | - .make-xs-column(8); | 124 | + .make-xs-column(24); |
| 92 | .pull-right; | 125 | .pull-right; |
| 126 | + @media(@sm){ | ||
| 127 | + padding: 0; | ||
| 128 | + } | ||
| 129 | + | ||
| 130 | + p { | ||
| 131 | + @media(@sm){ | ||
| 132 | + font-size: 18px; | ||
| 133 | + } | ||
| 134 | + } | ||
| 135 | + | ||
| 136 | + &__wrapper { | ||
| 137 | + .make-sm-column(24); | ||
| 138 | + .make-md-column(9); | ||
| 139 | + } | ||
| 93 | } | 140 | } |
| 94 | } | 141 | } |
| 95 | 142 | ... | ... |
-
Please register or login to post a comment