design update for modals and hide navbar on modal show
This commit is contained in:
David Miller
parent
a3b0d48c84
commit
62cae629dc
160
css/agency.css
160
css/agency.css
@ -12,7 +12,7 @@ p {
|
||||
|
||||
a {
|
||||
color: #fed136; }
|
||||
a.active, a:active, a:focus, a:hover {
|
||||
a:hover {
|
||||
color: #fec503; }
|
||||
|
||||
.text-primary {
|
||||
@ -49,47 +49,20 @@ section {
|
||||
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 700; }
|
||||
|
||||
.btn-primary {
|
||||
color: white;
|
||||
border-color: #fed136;
|
||||
background-color: #fed136; }
|
||||
.btn-primary.focus, .btn-primary:focus {
|
||||
color: white;
|
||||
border-color: #b48b01;
|
||||
background-color: #fec503; }
|
||||
.btn-primary:hover {
|
||||
color: white;
|
||||
border-color: #f6bf01;
|
||||
background-color: #fec503; }
|
||||
.btn-primary.active, .btn-primary:active,
|
||||
.open > .btn-primary.dropdown-toggle {
|
||||
color: white;
|
||||
border-color: #f6bf01;
|
||||
background-color: #fec503; }
|
||||
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover,
|
||||
.open > .btn-primary.dropdown-toggle.focus,
|
||||
.open > .btn-primary.dropdown-toggle:focus,
|
||||
.open > .btn-primary.dropdown-toggle:hover {
|
||||
color: white;
|
||||
border-color: #b48b01;
|
||||
background-color: #dcab01; }
|
||||
.btn-primary.active, .btn-primary:active,
|
||||
.open > .btn-primary.dropdown-toggle {
|
||||
background-image: none; }
|
||||
.btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover,
|
||||
fieldset[disabled] .btn-primary.focus,
|
||||
fieldset[disabled] .btn-primary:focus,
|
||||
fieldset[disabled] .btn-primary:hover {
|
||||
border-color: #fed136;
|
||||
background-color: #fed136; }
|
||||
.btn-primary .badge {
|
||||
color: #fed136;
|
||||
background-color: white; }
|
||||
|
||||
.btn-xl {
|
||||
font-size: 18px;
|
||||
padding: 20px 40px; }
|
||||
|
||||
.btn-primary {
|
||||
background-color: #fed136;
|
||||
border-color: #fed136; }
|
||||
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
|
||||
background-color: #fec810 !important;
|
||||
border-color: #fec810 !important;
|
||||
color: white; }
|
||||
.btn-primary:active, .btn-primary:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(254, 209, 55, 0.5) !important; }
|
||||
|
||||
::-moz-selection {
|
||||
background: #fed136;
|
||||
text-shadow: none; }
|
||||
@ -261,73 +234,62 @@ header.masthead {
|
||||
#portfolio .portfolio-item {
|
||||
margin: 0 0 30px; } }
|
||||
|
||||
.portfolio-modal .modal-dialog {
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
margin: 0; }
|
||||
|
||||
.portfolio-modal .modal-content {
|
||||
min-height: 100%;
|
||||
padding: 100px 0;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-clip: border-box;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none; }
|
||||
.portfolio-modal .modal-content h2 {
|
||||
font-size: 3em;
|
||||
margin-bottom: 15px; }
|
||||
.portfolio-modal .modal-content p {
|
||||
margin-bottom: 30px; }
|
||||
.portfolio-modal .modal-content p.item-intro {
|
||||
font-size: 16px;
|
||||
font-style: italic;
|
||||
margin: 20px 0 30px;
|
||||
font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
|
||||
.portfolio-modal .modal-content ul.list-inline {
|
||||
margin-top: 0;
|
||||
margin-bottom: 30px; }
|
||||
.portfolio-modal .modal-content img {
|
||||
margin-bottom: 30px; }
|
||||
.portfolio-modal .modal-content button {
|
||||
cursor: pointer; }
|
||||
|
||||
.portfolio-modal .close-modal {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 25px;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
cursor: pointer;
|
||||
background-color: transparent; }
|
||||
.portfolio-modal .close-modal:hover {
|
||||
opacity: 0.3; }
|
||||
.portfolio-modal .close-modal .lr {
|
||||
/* Safari and Chrome */
|
||||
z-index: 1051;
|
||||
width: 1px;
|
||||
.portfolio-modal {
|
||||
padding-right: 0px !important; }
|
||||
.portfolio-modal .modal-dialog {
|
||||
margin: 1rem;
|
||||
max-width: 100vw; }
|
||||
.portfolio-modal .modal-content {
|
||||
padding: 100px 0;
|
||||
text-align: center; }
|
||||
.portfolio-modal .modal-content h2 {
|
||||
font-size: 3em;
|
||||
margin-bottom: 15px; }
|
||||
.portfolio-modal .modal-content p {
|
||||
margin-bottom: 30px; }
|
||||
.portfolio-modal .modal-content p.item-intro {
|
||||
font-size: 16px;
|
||||
font-style: italic;
|
||||
margin: 20px 0 30px;
|
||||
font-family: 'Droid Serif', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
|
||||
.portfolio-modal .modal-content ul.list-inline {
|
||||
margin-top: 0;
|
||||
margin-bottom: 30px; }
|
||||
.portfolio-modal .modal-content img {
|
||||
margin-bottom: 30px; }
|
||||
.portfolio-modal .modal-content button {
|
||||
cursor: pointer; }
|
||||
.portfolio-modal .close-modal {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 25px;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin-left: 35px;
|
||||
/* IE 9 */
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
background-color: #212529; }
|
||||
.portfolio-modal .close-modal .lr .rl {
|
||||
cursor: pointer;
|
||||
background-color: transparent; }
|
||||
.portfolio-modal .close-modal:hover {
|
||||
opacity: 0.3; }
|
||||
.portfolio-modal .close-modal .lr {
|
||||
/* Safari and Chrome */
|
||||
z-index: 1052;
|
||||
z-index: 1051;
|
||||
width: 1px;
|
||||
height: 75px;
|
||||
margin-left: 35px;
|
||||
/* IE 9 */
|
||||
-webkit-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
background-color: #212529; }
|
||||
|
||||
.portfolio-modal .modal-backdrop {
|
||||
display: none;
|
||||
opacity: 0; }
|
||||
.portfolio-modal .close-modal .lr .rl {
|
||||
/* Safari and Chrome */
|
||||
z-index: 1052;
|
||||
width: 1px;
|
||||
height: 75px;
|
||||
/* IE 9 */
|
||||
-webkit-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
background-color: #212529; }
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
|
||||
2
css/agency.min.css
vendored
2
css/agency.min.css
vendored
File diff suppressed because one or more lines are too long
@ -39,4 +39,12 @@
|
||||
// Collapse the navbar when page is scrolled
|
||||
$(window).scroll(navbarCollapse);
|
||||
|
||||
// Hide navbar when modals trigger
|
||||
$('.portfolio-modal').on('show.bs.modal', function(e) {
|
||||
$(".navbar").addClass("d-none");
|
||||
})
|
||||
$('.portfolio-modal').on('hidden.bs.modal', function(e) {
|
||||
$(".navbar").removeClass("d-none");
|
||||
})
|
||||
|
||||
})(jQuery); // End of use strict
|
||||
|
||||
2
js/agency.min.js
vendored
2
js/agency.min.js
vendored
@ -3,4 +3,4 @@
|
||||
* Copyright 2013-2017 Start Bootstrap
|
||||
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE)
|
||||
*/
|
||||
!function(a){"use strict";a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var e=a(this.hash);if((e=e.length?e:a("[name="+this.hash.slice(1)+"]")).length)return a("html, body").animate({scrollTop:e.offset().top-54},1e3,"easeInOutExpo"),!1}}),a(".js-scroll-trigger").click(function(){a(".navbar-collapse").collapse("hide")}),a("body").scrollspy({target:"#mainNav",offset:54});var e=function(){a("#mainNav").offset().top>100?a("#mainNav").addClass("navbar-shrink"):a("#mainNav").removeClass("navbar-shrink")};e(),a(window).scroll(e)}(jQuery);
|
||||
!function(a){"use strict";a('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var o=a(this.hash);if((o=o.length?o:a("[name="+this.hash.slice(1)+"]")).length)return a("html, body").animate({scrollTop:o.offset().top-54},1e3,"easeInOutExpo"),!1}}),a(".js-scroll-trigger").click(function(){a(".navbar-collapse").collapse("hide")}),a("body").scrollspy({target:"#mainNav",offset:54});var o=function(){a("#mainNav").offset().top>100?a("#mainNav").addClass("navbar-shrink"):a("#mainNav").removeClass("navbar-shrink")};o(),a(window).scroll(o),a(".portfolio-modal").on("show.bs.modal",function(o){a(".navbar").addClass("d-none")}),a(".portfolio-modal").on("hidden.bs.modal",function(o){a(".navbar").removeClass("d-none")})}(jQuery);
|
||||
@ -10,9 +10,6 @@ p {
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
&.active,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: darken($primary, 10%);
|
||||
}
|
||||
@ -60,15 +57,27 @@ section {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@include button-variant(white, $primary, $primary);
|
||||
}
|
||||
|
||||
.btn-xl {
|
||||
font-size: 18px;
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: darken($primary, 7.5%) !important;
|
||||
border-color: darken($primary, 7.5%) !important;
|
||||
color: white;
|
||||
}
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(254, 209, 55,.5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Highlight color customization
|
||||
::-moz-selection {
|
||||
background: $primary;
|
||||
|
||||
@ -1,55 +1,4 @@
|
||||
// Mixins
|
||||
// Bootstrap Button Variant
|
||||
@mixin button-variant($color, $background, $border) {
|
||||
color: $color;
|
||||
border-color: $border;
|
||||
background-color: $background;
|
||||
&.focus,
|
||||
&:focus {
|
||||
color: $color;
|
||||
border-color: darken($border, 25%);
|
||||
background-color: darken($background, 10%);
|
||||
}
|
||||
&:hover {
|
||||
color: $color;
|
||||
border-color: darken($border, 12%);
|
||||
background-color: darken($background, 10%);
|
||||
}
|
||||
&.active,
|
||||
&:active,
|
||||
.open > &.dropdown-toggle {
|
||||
color: $color;
|
||||
border-color: darken($border, 12%);
|
||||
background-color: darken($background, 10%);
|
||||
&.focus,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $color;
|
||||
border-color: darken($border, 25%);
|
||||
background-color: darken($background, 17%);
|
||||
}
|
||||
}
|
||||
&.active,
|
||||
&:active,
|
||||
.open > &.dropdown-toggle {
|
||||
background-image: none;
|
||||
}
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&.focus,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: $border;
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
color: $background;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
// Background Cover Mixin
|
||||
@mixin background-cover {
|
||||
-webkit-background-size: cover;
|
||||
|
||||
@ -71,20 +71,14 @@
|
||||
}
|
||||
|
||||
.portfolio-modal {
|
||||
padding-right: 0px !important;
|
||||
.modal-dialog {
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
margin: 1rem;
|
||||
max-width: 100vw;
|
||||
}
|
||||
.modal-content {
|
||||
min-height: 100%;
|
||||
padding: 100px 0;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-clip: border-box;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
h2 {
|
||||
font-size: 3em;
|
||||
margin-bottom: 15px;
|
||||
@ -145,7 +139,6 @@
|
||||
}
|
||||
}
|
||||
.modal-backdrop {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
// Restated Bootstrap Variables
|
||||
|
||||
$white: #fff !default;
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
@ -12,24 +12,6 @@ $gray-600: #868e96 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #dc3545 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #fed136 !default;
|
||||
$green: #28a745 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #17a2b8 !default;
|
||||
|
||||
$primary: $yellow !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
$primary: #fed136 !default;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user