rdd.ro/nunta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/agency.css
View File

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

2
css/agency.min.css vendored
View File

File diff suppressed because one or more lines are too long

214
index.html
View File

@ -472,30 +472,32 @@
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Project Name</h2>
<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="">
<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>
<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">
<li>Date: July 2014</li>
<li>Client: Round Icons</li>
<li>Category: Graphic Design</li>
</ul>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Project Name</h2>
<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="">
<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>
<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">
<li>Date: July 2014</li>
<li>Client: Round Icons</li>
<li>Category: Graphic Design</li>
</ul>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
@ -505,23 +507,25 @@
<!-- Portfolio Modal 2 -->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Heading</h2>
<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="">
<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>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Project Heading</h2>
<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="">
<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>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
@ -531,24 +535,26 @@
<!-- Portfolio Modal 3 -->
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Project Name</h2>
<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="">
<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>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Project Name</h2>
<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="">
<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>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
@ -558,24 +564,26 @@
<!-- Portfolio Modal 4 -->
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Project Name</h2>
<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="">
<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>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Project Name</h2>
<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="">
<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>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
@ -585,24 +593,26 @@
<!-- Portfolio Modal 5 -->
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Project Name</h2>
<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="">
<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>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Project Name</h2>
<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="">
<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>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
@ -612,24 +622,26 @@
<!-- Portfolio Modal 6 -->
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Project Name</h2>
<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="">
<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. It’s a beautiful template that’s 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>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Project Name</h2>
<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="">
<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. It’s a beautiful template that’s 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>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>

801
less/agency.less
View File

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

5
scss/agency.scss
View File

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