fixed Issue #48: Closing modals with esc-key doesn't work

This commit is contained in:
Michael Hoffmann 2016-07-12 15:52:15 +02:00
parent 5ad92bea16
commit 496c579c6b
5 changed files with 527 additions and 500 deletions

View File

@ -653,6 +653,11 @@ ul.social-buttons li a:active {
.btn:active:focus { .btn:active:focus {
outline: none; outline: none;
} }
.portfolio-modal .modal-dialog {
margin: 0;
height: 100%;
width: auto;
}
.portfolio-modal .modal-content { .portfolio-modal .modal-content {
border-radius: 0; border-radius: 0;
background-clip: border-box; background-clip: border-box;

2
css/agency.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -472,30 +472,32 @@
<!-- Portfolio Modal 1 --> <!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true"> <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content"> <div class="modal-dialog">
<div class="close-modal" data-dismiss="modal"> <div class="modal-content">
<div class="lr"> <div class="close-modal" data-dismiss="modal">
<div class="rl"> <div class="lr">
<div class="rl">
</div>
</div> </div>
</div> </div>
</div> <div class="container">
<div class="container"> <div class="row">
<div class="row"> <div class="col-lg-8 col-lg-offset-2">
<div class="col-lg-8 col-lg-offset-2"> <div class="modal-body">
<div class="modal-body"> <!-- Project Details Go Here -->
<!-- Project Details Go Here --> <h2>Project Name</h2>
<h2>Project Name</h2> <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> <img class="img-responsive img-centered" src="img/portfolio/roundicons-free.png" alt="">
<img class="img-responsive img-centered" src="img/portfolio/roundicons-free.png" alt=""> <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>
<p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p> <p>
<p> <strong>Want these icons in this portfolio item sample?</strong>You can download 60 of them for free, courtesy of <a href="https://getdpd.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc">RoundIcons.com</a>, or you can purchase the 1500 icon set <a href="https://getdpd.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc">here</a>.</p>
<strong>Want these icons in this portfolio item sample?</strong>You can download 60 of them for free, courtesy of <a href="https://getdpd.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc">RoundIcons.com</a>, or you can purchase the 1500 icon set <a href="https://getdpd.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc">here</a>.</p> <ul class="list-inline">
<ul class="list-inline"> <li>Date: July 2014</li>
<li>Date: July 2014</li> <li>Client: Round Icons</li>
<li>Client: Round Icons</li> <li>Category: Graphic Design</li>
<li>Category: Graphic Design</li> </ul>
</ul> <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> </div>
</div> </div>
</div> </div>
</div> </div>
@ -505,23 +507,25 @@
<!-- Portfolio Modal 2 --> <!-- Portfolio Modal 2 -->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true"> <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content"> <div class="modal-dialog">
<div class="close-modal" data-dismiss="modal"> <div class="modal-content">
<div class="lr"> <div class="close-modal" data-dismiss="modal">
<div class="rl"> <div class="lr">
<div class="rl">
</div>
</div> </div>
</div> </div>
</div> <div class="container">
<div class="container"> <div class="row">
<div class="row"> <div class="col-lg-8 col-lg-offset-2">
<div class="col-lg-8 col-lg-offset-2"> <div class="modal-body">
<div class="modal-body"> <h2>Project Heading</h2>
<h2>Project Heading</h2> <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> <img class="img-responsive img-centered" src="img/portfolio/startup-framework-preview.png" alt="">
<img class="img-responsive img-centered" src="img/portfolio/startup-framework-preview.png" alt=""> <p><a href="http://designmodo.com/startup/?u=787">Startup Framework</a> is a website builder for professionals. Startup Framework contains components and complex blocks (PSD+HTML Bootstrap themes and templates) which can easily be integrated into almost any design. All of these components are made in the same style, and can easily be integrated into projects, allowing you to create hundreds of solutions for your future projects.</p>
<p><a href="http://designmodo.com/startup/?u=787">Startup Framework</a> is a website builder for professionals. Startup Framework contains components and complex blocks (PSD+HTML Bootstrap themes and templates) which can easily be integrated into almost any design. All of these components are made in the same style, and can easily be integrated into projects, allowing you to create hundreds of solutions for your future projects.</p> <p>You can preview Startup Framework <a href="http://designmodo.com/startup/?u=787">here</a>.</p>
<p>You can preview Startup Framework <a href="http://designmodo.com/startup/?u=787">here</a>.</p> <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> </div>
</div> </div>
</div> </div>
</div> </div>
@ -531,24 +535,26 @@
<!-- Portfolio Modal 3 --> <!-- Portfolio Modal 3 -->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true"> <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content"> <div class="modal-dialog">
<div class="close-modal" data-dismiss="modal"> <div class="modal-content">
<div class="lr"> <div class="close-modal" data-dismiss="modal">
<div class="rl"> <div class="lr">
<div class="rl">
</div>
</div> </div>
</div> </div>
</div> <div class="container">
<div class="container"> <div class="row">
<div class="row"> <div class="col-lg-8 col-lg-offset-2">
<div class="col-lg-8 col-lg-offset-2"> <div class="modal-body">
<div class="modal-body"> <!-- Project Details Go Here -->
<!-- Project Details Go Here --> <h2>Project Name</h2>
<h2>Project Name</h2> <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> <img class="img-responsive img-centered" src="img/portfolio/treehouse-preview.png" alt="">
<img class="img-responsive img-centered" src="img/portfolio/treehouse-preview.png" alt=""> <p>Treehouse is a free PSD web template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. This is bright and spacious design perfect for people or startup companies looking to showcase their apps or other projects.</p>
<p>Treehouse is a free PSD web template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. This is bright and spacious design perfect for people or startup companies looking to showcase their apps or other projects.</p> <p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/treehouse-free-psd-web-template/">FreebiesXpress.com</a>.</p>
<p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/treehouse-free-psd-web-template/">FreebiesXpress.com</a>.</p> <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> </div>
</div> </div>
</div> </div>
</div> </div>
@ -558,24 +564,26 @@
<!-- Portfolio Modal 4 --> <!-- Portfolio Modal 4 -->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true"> <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content"> <div class="modal-dialog">
<div class="close-modal" data-dismiss="modal"> <div class="modal-content">
<div class="lr"> <div class="close-modal" data-dismiss="modal">
<div class="rl"> <div class="lr">
<div class="rl">
</div>
</div> </div>
</div> </div>
</div> <div class="container">
<div class="container"> <div class="row">
<div class="row"> <div class="col-lg-8 col-lg-offset-2">
<div class="col-lg-8 col-lg-offset-2"> <div class="modal-body">
<div class="modal-body"> <!-- Project Details Go Here -->
<!-- Project Details Go Here --> <h2>Project Name</h2>
<h2>Project Name</h2> <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> <img class="img-responsive img-centered" src="img/portfolio/golden-preview.png" alt="">
<img class="img-responsive img-centered" src="img/portfolio/golden-preview.png" alt=""> <p>Start Bootstrap's Agency theme is based on Golden, a free PSD website template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. Golden is a modern and clean one page web template that was made exclusively for Best PSD Freebies. This template has a great portfolio, timeline, and meet your team sections that can be easily modified to fit your needs.</p>
<p>Start Bootstrap's Agency theme is based on Golden, a free PSD website template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. Golden is a modern and clean one page web template that was made exclusively for Best PSD Freebies. This template has a great portfolio, timeline, and meet your team sections that can be easily modified to fit your needs.</p> <p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/golden-free-one-page-web-template/">FreebiesXpress.com</a>.</p>
<p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/golden-free-one-page-web-template/">FreebiesXpress.com</a>.</p> <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> </div>
</div> </div>
</div> </div>
</div> </div>
@ -585,24 +593,26 @@
<!-- Portfolio Modal 5 --> <!-- Portfolio Modal 5 -->
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true"> <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content"> <div class="modal-dialog">
<div class="close-modal" data-dismiss="modal"> <div class="modal-content">
<div class="lr"> <div class="close-modal" data-dismiss="modal">
<div class="rl"> <div class="lr">
<div class="rl">
</div>
</div> </div>
</div> </div>
</div> <div class="container">
<div class="container"> <div class="row">
<div class="row"> <div class="col-lg-8 col-lg-offset-2">
<div class="col-lg-8 col-lg-offset-2"> <div class="modal-body">
<div class="modal-body"> <!-- Project Details Go Here -->
<!-- Project Details Go Here --> <h2>Project Name</h2>
<h2>Project Name</h2> <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> <img class="img-responsive img-centered" src="img/portfolio/escape-preview.png" alt="">
<img class="img-responsive img-centered" src="img/portfolio/escape-preview.png" alt=""> <p>Escape is a free PSD web template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. Escape is a one page web template that was designed with agencies in mind. This template is ideal for those looking for a simple one page solution to describe your business and offer your services.</p>
<p>Escape is a free PSD web template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. Escape is a one page web template that was designed with agencies in mind. This template is ideal for those looking for a simple one page solution to describe your business and offer your services.</p> <p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/escape-one-page-psd-web-template/">FreebiesXpress.com</a>.</p>
<p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/escape-one-page-psd-web-template/">FreebiesXpress.com</a>.</p> <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> </div>
</div> </div>
</div> </div>
</div> </div>
@ -612,24 +622,26 @@
<!-- Portfolio Modal 6 --> <!-- Portfolio Modal 6 -->
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true"> <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content"> <div class="modal-dialog">
<div class="close-modal" data-dismiss="modal"> <div class="modal-content">
<div class="lr"> <div class="close-modal" data-dismiss="modal">
<div class="rl"> <div class="lr">
<div class="rl">
</div>
</div> </div>
</div> </div>
</div> <div class="container">
<div class="container"> <div class="row">
<div class="row"> <div class="col-lg-8 col-lg-offset-2">
<div class="col-lg-8 col-lg-offset-2"> <div class="modal-body">
<div class="modal-body"> <!-- Project Details Go Here -->
<!-- Project Details Go Here --> <h2>Project Name</h2>
<h2>Project Name</h2> <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p>
<p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> <img class="img-responsive img-centered" src="img/portfolio/dreams-preview.png" alt="">
<img class="img-responsive img-centered" src="img/portfolio/dreams-preview.png" alt=""> <p>Dreams is a free PSD web template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. Dreams is a modern one page web template designed for almost any purpose. Its a beautiful template thats designed with the Bootstrap framework in mind.</p>
<p>Dreams is a free PSD web template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. Dreams is a modern one page web template designed for almost any purpose. Its a beautiful template thats designed with the Bootstrap framework in mind.</p> <p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/dreams-free-one-page-web-template/">FreebiesXpress.com</a>.</p>
<p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/dreams-free-one-page-web-template/">FreebiesXpress.com</a>.</p> <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> </div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -4,25 +4,25 @@
// Global Components // Global Components
body { body {
overflow-x: hidden; overflow-x: hidden;
.body-font; .body-font;
} }
.text-muted { .text-muted {
color: @gray-light; color: @gray-light;
} }
.text-primary { .text-primary {
color: @theme-primary; color: @theme-primary;
} }
p { p {
font-size: 14px; font-size: 14px;
line-height: 1.75; line-height: 1.75;
} }
p.large { p.large {
font-size: 16px; font-size: 16px;
} }
a, a,
@ -30,191 +30,191 @@ a:hover,
a:focus, a:focus,
a:active, a:active,
a.active { a.active {
outline: none; outline: none;
} }
a { a {
color: @theme-primary; color: @theme-primary;
} }
a:hover, a:hover,
a:focus, a:focus,
a:active, a:active,
a.active { a.active {
color: darken(@theme-primary, 10%); color: darken(@theme-primary, 10%);
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
.heading-font; .heading-font;
font-weight: 700; font-weight: 700;
} }
.img-centered { .img-centered {
margin: 0 auto; margin: 0 auto;
} }
.bg-light-gray { .bg-light-gray {
background-color: @gray-lighter; background-color: @gray-lighter;
} }
.bg-darkest-gray { .bg-darkest-gray {
background-color: @gray-darker; background-color: @gray-darker;
} }
// Restyled Primary Buttons // Restyled Primary Buttons
.btn-primary { .btn-primary {
.button-variant(white; @theme-primary; @theme-primary); .button-variant(white; @theme-primary; @theme-primary);
.heading-font; .heading-font;
font-weight: 700; font-weight: 700;
} }
.btn-xl { .btn-xl {
.button-variant(white; @theme-primary; @theme-primary); .button-variant(white; @theme-primary; @theme-primary);
.heading-font; .heading-font;
font-weight: 700; font-weight: 700;
border-radius: 3px; border-radius: 3px;
font-size: 18px; font-size: 18px;
padding: 20px 40px; padding: 20px 40px;
} }
// Custom Navigation Bar // Custom Navigation Bar
.navbar-custom { .navbar-custom {
background-color: @gray-darker; background-color: @gray-darker;
border-color: transparent; border-color: transparent;
.navbar-brand { .navbar-brand {
color: @theme-primary; color: @theme-primary;
.script-font; .script-font;
&:hover, &:hover,
&:focus, &:focus,
&:active, &:active,
&.active { &.active {
color: darken(@theme-primary, 10%); color: darken(@theme-primary, 10%);
} }
}
.navbar-collapse {
border-color: fade(white, 2%);
}
.navbar-toggle {
background-color: @theme-primary;
border-color: @theme-primary;
.heading-font;
color: white;
font-size: 12px;
&:hover,
&:focus {
background-color: @theme-primary;
}
}
.nav {
li {
a {
.heading-font;
font-weight: 400;
letter-spacing: 1px;
color: white;
&:hover,
&:focus {
color: @theme-primary;
outline: none;
}
}
}
} }
.navbar-nav>.active>a { .navbar-collapse {
border-radius: 0; border-color: fade(white, 2%);
color: white; }
background-color: @theme-primary; .navbar-toggle {
} background-color: @theme-primary;
.navbar-nav>.active>a:hover, border-color: @theme-primary;
.navbar-nav>.active>a:focus { .heading-font;
color: white; color: white;
background-color: darken(@theme-primary, 10%); font-size: 12px;
} &:hover,
&:focus {
background-color: @theme-primary;
}
}
.nav {
li {
a {
.heading-font;
font-weight: 400;
letter-spacing: 1px;
color: white;
&:hover,
&:focus {
color: @theme-primary;
outline: none;
}
}
}
}
.navbar-nav>.active>a {
border-radius: 0;
color: white;
background-color: @theme-primary;
}
.navbar-nav>.active>a:hover,
.navbar-nav>.active>a:focus {
color: white;
background-color: darken(@theme-primary, 10%);
}
} }
@media(min-width:768px) { @media(min-width:768px) {
.navbar-custom { .navbar-custom {
background-color: transparent; background-color: transparent;
padding: 25px 0; padding: 25px 0;
-webkit-transition: padding 0.3s; -webkit-transition: padding 0.3s;
-moz-transition: padding 0.3s; -moz-transition: padding 0.3s;
transition: padding 0.3s; transition: padding 0.3s;
border: none; border: none;
.navbar-brand { .navbar-brand {
font-size: 2em; font-size: 2em;
-webkit-transition: all 0.3s; -webkit-transition: all 0.3s;
-moz-transition: all 0.3s; -moz-transition: all 0.3s;
transition: all 0.3s; transition: all 0.3s;
} }
.navbar-nav>.active>a { .navbar-nav>.active>a {
border-radius: 3px; border-radius: 3px;
} }
} }
} }
// Navbar Change on Scroll // Navbar Change on Scroll
@media(min-width:768px) { @media(min-width:768px) {
.navbar-custom.affix { .navbar-custom.affix {
background-color: @gray-darker; background-color: @gray-darker;
padding: 10px 0; padding: 10px 0;
.navbar-brand { .navbar-brand {
font-size: 1.5em; font-size: 1.5em;
} }
} }
} }
header { header {
background-image: url('../img/header-bg.jpg'); background-image: url('../img/header-bg.jpg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: scroll; background-attachment: scroll;
background-position: center center; background-position: center center;
.background-cover; .background-cover;
text-align: center; text-align: center;
color: white; color: white;
.intro-text { .intro-text {
padding-top: 100px; padding-top: 100px;
padding-bottom: 50px; padding-bottom: 50px;
.intro-lead-in { .intro-lead-in {
.serif-font; .serif-font;
font-style: italic; font-style: italic;
font-size: 22px; font-size: 22px;
line-height: 22px; line-height: 22px;
margin-bottom: 25px; margin-bottom: 25px;
} }
.intro-heading { .intro-heading {
.heading-font; .heading-font;
font-weight: 700; font-weight: 700;
font-size: 50px; font-size: 50px;
line-height: 50px; line-height: 50px;
margin-bottom: 25px; margin-bottom: 25px;
} }
} }
} }
@media(min-width:768px) { @media(min-width:768px) {
header { header {
.intro-text { .intro-text {
padding-top: 300px; padding-top: 300px;
padding-bottom: 200px; padding-bottom: 200px;
.intro-lead-in { .intro-lead-in {
.serif-font; .serif-font;
font-style: italic; font-style: italic;
font-size: 40px; font-size: 40px;
line-height: 40px; line-height: 40px;
margin-bottom: 25px; margin-bottom: 25px;
} }
.intro-heading { .intro-heading {
.heading-font; .heading-font;
font-weight: 700; font-weight: 700;
font-size: 75px; font-size: 75px;
line-height: 75px; line-height: 75px;
margin-bottom: 50px; margin-bottom: 50px;
} }
} }
} }
} }
// Global Section Styles // Global Section Styles
@ -222,31 +222,31 @@ header {
section { section {
padding: 100px 0; padding: 100px 0;
h2.section-heading { h2.section-heading {
font-size: 40px; font-size: 40px;
margin-top: 0; margin-top: 0;
margin-bottom: 15px; margin-bottom: 15px;
} }
h3.section-subheading { h3.section-subheading {
font-size: 16px; font-size: 16px;
.serif-font; .serif-font;
text-transform: none; text-transform: none;
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
margin-bottom: 75px; margin-bottom: 75px;
} }
} }
@media(min-width:768px) { @media(min-width:768px) {
section { section {
padding: 150px 0; padding: 150px 0;
} }
} }
// Services Section // Services Section
.service-heading { .service-heading {
margin: 15px 0; margin: 15px 0;
text-transform: none; text-transform: none;
} }
// Portfolio Section // Portfolio Section
@ -292,21 +292,21 @@ section {
} }
} }
.portfolio-caption { .portfolio-caption {
max-width: 400px; max-width: 400px;
margin: 0 auto; margin: 0 auto;
background-color: white; background-color: white;
text-align: center; text-align: center;
padding: 25px; padding: 25px;
h4 { h4 {
text-transform: none; text-transform: none;
margin: 0; margin: 0;
} }
p { p {
.serif-font; .serif-font;
font-style: italic; font-style: italic;
font-size: 16px; font-size: 16px;
margin: 0; margin: 0;
} }
} }
} }
* { * {
@ -348,32 +348,32 @@ section {
display: table; display: table;
} }
&:after { &:after {
clear: both; clear: both;
} }
.timeline-panel { .timeline-panel {
width: 100%; width: 100%;
float: right; float: right;
padding: 0 20px 0 100px; padding: 0 20px 0 100px;
position: relative; position: relative;
text-align: left; text-align: left;
&:before { &:before {
border-left-width: 0; border-left-width: 0;
border-right-width: 15px; border-right-width: 15px;
left: -15px; left: -15px;
right: auto; right: auto;
} }
&:after { &:after {
border-left-width: 0; border-left-width: 0;
border-right-width: 14px; border-right-width: 14px;
left: -14px; left: -14px;
right: auto; right: auto;
} }
} }
.timeline-image { .timeline-image {
left: 0; left: 0;
margin-left: 0; margin-left: 0;
width: 80px; width: 80px;
height: 80px; height: 80px;
position: absolute; position: absolute;
z-index: 100; z-index: 100;
background-color: @theme-primary; background-color: @theme-primary;
@ -382,16 +382,16 @@ section {
border: 7px solid #f1f1f1; border: 7px solid #f1f1f1;
text-align: center; text-align: center;
h4 { h4 {
font-size: 10px; font-size: 10px;
margin-top: 12px; margin-top: 12px;
line-height: 14px; line-height: 14px;
} }
} }
&.timeline-inverted > .timeline-panel { &.timeline-inverted > .timeline-panel {
float: right; float: right;
text-align: left; text-align: left;
padding: 0 20px 0 100px; padding: 0 20px 0 100px;
&:before { &:before {
border-left-width: 0; border-left-width: 0;
border-right-width: 15px; border-right-width: 15px;
left: -15px; left: -15px;
@ -405,268 +405,273 @@ section {
} }
} }
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
}
}
.timeline-heading {
h4 {
margin-top: 0;
color: inherit;
&.subheading {
text-transform: none;
}
}
}
.timeline-body {
> p,
> ul {
margin-bottom: 0;
} }
} }
.timeline-heading {
h4 {
margin-top: 0;
color: inherit;
&.subheading {
text-transform: none;
}
}
}
.timeline-body {
> p,
> ul {
margin-bottom: 0;
}
}
} }
@media(min-width:768px) { @media(min-width:768px) {
.timeline { .timeline {
&:before { &:before {
left: 50%; left: 50%;
} }
> li { > li {
margin-bottom: 100px; margin-bottom: 100px;
min-height: 100px; min-height: 100px;
.timeline-panel { .timeline-panel {
width: 41%; width: 41%;
float: left; float: left;
padding: 0 20px 20px 30px; padding: 0 20px 20px 30px;
text-align: right; text-align: right;
} }
.timeline-image { .timeline-image {
width: 100px; width: 100px;
height: 100px; height: 100px;
left: 50%; left: 50%;
margin-left: -50px; margin-left: -50px;
h4 { h4 {
font-size: 13px; font-size: 13px;
margin-top: 16px; margin-top: 16px;
line-height: 18px; line-height: 18px;
} }
} }
&.timeline-inverted > .timeline-panel { &.timeline-inverted > .timeline-panel {
float: right; float: right;
text-align: left; text-align: left;
padding: 0 30px 20px 20px; padding: 0 30px 20px 20px;
} }
} }
} }
} }
@media(min-width:992px) { @media(min-width:992px) {
.timeline { .timeline {
> li { > li {
min-height: 150px; min-height: 150px;
.timeline-panel { .timeline-panel {
padding: 0 20px 20px; padding: 0 20px 20px;
} }
.timeline-image { .timeline-image {
width: 150px; width: 150px;
height: 150px; height: 150px;
margin-left: -75px; margin-left: -75px;
h4 { h4 {
font-size: 18px; font-size: 18px;
margin-top: 30px; margin-top: 30px;
line-height: 26px; line-height: 26px;
} }
} }
&.timeline-inverted > .timeline-panel { &.timeline-inverted > .timeline-panel {
padding: 0 20px 20px; padding: 0 20px 20px;
} }
} }
} }
} }
@media(min-width:1200px) { @media(min-width:1200px) {
.timeline { .timeline {
> li { > li {
min-height: 170px; min-height: 170px;
.timeline-panel { .timeline-panel {
padding: 0 20px 20px 100px; padding: 0 20px 20px 100px;
} }
.timeline-image { .timeline-image {
width: 170px; width: 170px;
height: 170px; height: 170px;
margin-left: -85px; margin-left: -85px;
h4 { h4 {
margin-top: 40px; margin-top: 40px;
} }
} }
&.timeline-inverted > .timeline-panel { &.timeline-inverted > .timeline-panel {
padding: 0 100px 20px 20px; padding: 0 100px 20px 20px;
} }
} }
} }
} }
// Team Section // Team Section
.team-member { .team-member {
text-align: center; text-align: center;
margin-bottom: 50px; margin-bottom: 50px;
img { img {
margin: 0 auto; margin: 0 auto;
border: 7px solid white; border: 7px solid white;
} }
h4 { h4 {
margin-top: 25px; margin-top: 25px;
margin-bottom: 0; margin-bottom: 0;
text-transform: none; text-transform: none;
} }
p { p {
margin-top: 0; margin-top: 0;
} }
} }
// Clients Aside // Clients Aside
aside.clients { aside.clients {
img { img {
margin: 50px auto; margin: 50px auto;
} }
} }
// Contact Section // Contact Section
section#contact { section#contact {
background-color: @gray-darker; background-color: @gray-darker;
background-image: url('../img/map-image.png'); background-image: url('../img/map-image.png');
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
.section-heading { .section-heading {
color: white; color: white;
} }
.form-group { .form-group {
margin-bottom: 25px; margin-bottom: 25px;
input, input,
textarea { textarea {
padding: 20px; padding: 20px;
} }
input.form-control { input.form-control {
height: auto; height: auto;
} }
textarea.form-control { textarea.form-control {
height: 236px; height: 236px;
} }
} }
.form-control:focus { .form-control:focus {
border-color: @theme-primary; border-color: @theme-primary;
box-shadow: none; box-shadow: none;
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
.heading-font; .heading-font;
font-weight: 700; font-weight: 700;
color: @gray-lighter; color: @gray-lighter;
} }
:-moz-placeholder { /* Firefox 18- */ :-moz-placeholder { /* Firefox 18- */
.heading-font; .heading-font;
font-weight: 700; font-weight: 700;
color: @gray-lighter; color: @gray-lighter;
} }
::-moz-placeholder { /* Firefox 19+ */ ::-moz-placeholder { /* Firefox 19+ */
.heading-font; .heading-font;
font-weight: 700; font-weight: 700;
color: @gray-lighter; color: @gray-lighter;
} }
:-ms-input-placeholder { :-ms-input-placeholder {
.heading-font; .heading-font;
font-weight: 700; font-weight: 700;
color: @gray-lighter; color: @gray-lighter;
} }
.text-danger { .text-danger {
color: @theme-danger; color: @theme-danger;
} }
} }
// Footer // Footer
footer { footer {
padding: 25px 0; padding: 25px 0;
text-align: center; text-align: center;
span.copyright { span.copyright {
line-height: 40px; line-height: 40px;
.heading-font; .heading-font;
text-transform: none; text-transform: none;
} }
ul.quicklinks { ul.quicklinks {
margin-bottom: 0; margin-bottom: 0;
line-height: 40px; line-height: 40px;
.heading-font; .heading-font;
text-transform: none; text-transform: none;
} }
} }
// Social Buttons // Social Buttons
ul.social-buttons { ul.social-buttons {
margin-bottom: 0; margin-bottom: 0;
li { li {
a { a {
display: block; display: block;
background-color: @gray-darker; background-color: @gray-darker;
height: 40px; height: 40px;
width: 40px; width: 40px;
border-radius: 100%; border-radius: 100%;
font-size: 20px; font-size: 20px;
line-height: 40px; line-height: 40px;
color: white; color: white;
outline: none; outline: none;
-webkit-transition: all 0.3s; -webkit-transition: all 0.3s;
-moz-transition: all 0.3s; -moz-transition: all 0.3s;
transition: all 0.3s; transition: all 0.3s;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background-color: @theme-primary; background-color: @theme-primary;
} }
} }
} }
} }
.btn:focus, .btn:focus,
.btn:active, .btn:active,
.btn.active, .btn.active,
.btn:active:focus { .btn:active:focus {
outline: none; outline: none;
} }
.portfolio-modal { .portfolio-modal {
.modal-content { .modal-dialog{
border-radius: 0; margin: 0;
background-clip: border-box; height: 100%;
-webkit-box-shadow: none; width: auto;
box-shadow: none; }
border: none; .modal-content {
min-height: 100%; border-radius: 0;
padding: 100px 0; background-clip: border-box;
text-align: center; -webkit-box-shadow: none;
h2 { box-shadow: none;
margin-bottom: 15px; border: none;
font-size: 3em; min-height: 100%;
} padding: 100px 0;
p { text-align: center;
margin-bottom: 30px; h2 {
} margin-bottom: 15px;
p.item-intro { font-size: 3em;
margin: 20px 0 30px; }
.serif-font; p {
font-style: italic; margin-bottom: 30px;
font-size: 16px; }
} p.item-intro {
ul.list-inline { margin: 20px 0 30px;
margin-bottom: 30px; .serif-font;
margin-top: 0; font-style: italic;
} font-size: 16px;
img { }
margin-bottom: 30px; ul.list-inline {
} margin-bottom: 30px;
} margin-top: 0;
}
img {
margin-bottom: 30px;
}
}
.close-modal { .close-modal {
position: absolute; position: absolute;
width:75px; width:75px;
@ -703,8 +708,8 @@ ul.social-buttons {
} }
} }
.modal-backdrop { .modal-backdrop {
opacity: 0; opacity: 0;
display: none; display: none;
} }
} }

View File

@ -717,6 +717,11 @@ ul.social-buttons {
} }
.portfolio-modal { .portfolio-modal {
.modal-dialog{
margin: 0;
height: 100%;
width: auto;
}
.modal-content { .modal-content {
border-radius: 0; border-radius: 0;
background-clip: border-box; background-clip: border-box;