titzi
/
anmeldeportal_hochzeit
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

design update for modals and hide navbar on modal show

master
David Miller 8 years ago
parent
a3b0d48c84
commit
62cae629dc
8 changed files with 94 additions and 191 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 160
      css/agency.css
  2. 2
      css/agency.min.css
  3. 8
      js/agency.js
  4. 2
      js/agency.min.js
  5. 23
      scss/_global.scss
  6. 51
      scss/_mixins.scss
  7. 15
      scss/_portfolio.scss
  8. 24
      scss/_variables.scss

160
css/agency.css
Unescape View File

@ -12,7 +12,7 @@ p { @@ -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 { @@ -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 { @@ -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
View File

File diff suppressed because one or more lines are too long

8
js/agency.js
Unescape View File

@ -39,4 +39,12 @@ @@ -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
Unescape View File

@ -3,4 +3,4 @@ @@ -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);

23
scss/_global.scss
Unescape View File

@ -10,9 +10,6 @@ p { @@ -10,9 +10,6 @@ p {
a {
color: $primary;
&.active,
&:active,
&:focus,
&:hover {
color: darken($primary, 10%);
}
@ -60,15 +57,27 @@ section { @@ -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;

51
scss/_mixins.scss
Unescape View File

@ -1,55 +1,4 @@ @@ -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;

15
scss/_portfolio.scss
Unescape View File

@ -71,20 +71,14 @@ @@ -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 @@ @@ -145,7 +139,6 @@
}
}
.modal-backdrop {
display: none;
opacity: 0;
}
}

24
scss/_variables.scss
Unescape View File

@ -2,7 +2,7 @@ @@ -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; @@ -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;

Write Preview
Loading…
Cancel
Save