Skip to content

Commit

Permalink
6 - Get WMS button working with modal, copy to clipboard function - M…
Browse files Browse the repository at this point in the history
…issing fonts added, less mixings for font types - Font fixes
  • Loading branch information
eamador committed Apr 18, 2017
1 parent 7463c30 commit 39becda
Show file tree
Hide file tree
Showing 14 changed files with 341 additions and 88 deletions.
106 changes: 80 additions & 26 deletions src/css/shared/elements/info/styles.less
Original file line number Diff line number Diff line change
Expand Up @@ -38,27 +38,37 @@ info {
.fadeIn();

.btn-row {
&:not(.hidden) {
padding-top: 36px;
}
.btn.download {
opacity: 1;
visibility: visible;
.animated(0.3s, 0.2s);
.fadeIn();
position: relative;
width: 120px;
width: auto;
height: 32px;
padding: 0 10px;
border-radius: 16px;
.bg_azul_iucn();
border:2px solid @azul_iucn;
border: 2px solid @azul_iucn;
line-height: 30px;
text-align: center;
.fira_sans();
.color_blanco();
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
display: table;
letter-spacing: 1px;
margin: 0 0 16px 0;
.bg_azul_iucn();
.font(semibold);
.color_blanco();
}
&.hidden {
.btn.download {
opacity: 0;
visibility: hidden;
.fadeOut();
display: none;
}
}
}
Expand All @@ -73,7 +83,6 @@ info {
.color_blanco();
font-size: 14px;
line-height: 18px;
font-weight: normal;
margin-bottom: 10px;
}
> paragraph,
Expand Down Expand Up @@ -113,15 +122,55 @@ info {
}
}

.title{
.fira_sans();
.color_blanco();
font-size:24px;
line-height:32px;
font-weight: 800;
font-style: italic;
margin-bottom:8px;
.allMapLayers {
max-height: 92%;
overflow-y: auto;
.mapLayerWrapper {
width: 320px;
&:not(:last-child) {
border-bottom: 2px solid @azul_iucn;
margin-bottom: 10px;
padding-bottom: 22px;
}
}
}

.titleWrapper {
display: flex;
align-items: center;
margin-bottom: 8px;
.btn {
background-color: white;
color: @azul_iucn;
border: 2px solid @azul_iucn;
background-image: none;
display: inline-flex;
align-items: center;
justify-content: center;
.font(bold);
margin-right: 8px;
&.selected {
border: 2px solid transparent;
}
}
.title {
.font(semibolditalic);
.color_blanco();
font-size: 14px;
line-height: 18px;
font-weight: 800;
font-style: italic;
display: inline-flex;
max-width: 279px;
cursor: pointer;

&.selected {
font-size:24px;
line-height:32px;
}
}
}

.credit {
display: block;
width: 320px;
Expand All @@ -131,17 +180,22 @@ info {
.color_blanco();
font-size: 14px;
line-height: 18px;
font-weight: normal;

position: relative;
&:before{
content: "";
position: absolute;
top: -6px;
left: 0px;
width: 8px;
display: block;
border-bottom: 1.5px solid #fff;

&(:empty) {
display: none;
}

&:not(:empty) {
&:before {
content: "";
position: absolute;
top: -6px;
left: 0px;
width: 8px;
display: block;
border-bottom: 1.5px solid #fff;
}
}
&.hidden {
display: none;
Expand Down Expand Up @@ -172,8 +226,8 @@ info {
.summary {
display: block;
.btn {
.font(bold);
color: @azul_iucn;
font-weight: bold;
background-image: none;
display: flex;
align-items: center;
Expand Down
6 changes: 2 additions & 4 deletions src/css/shared/elements/paragraph/styles.less
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@ paragraph {
.animated(0.6s, 0.1s);

&.highlight{
.fira_sans();
font-weight:300;
.font(light);
font-size:24px;
line-height:32px;
}
Expand All @@ -25,12 +24,11 @@ paragraph {
float: left;
position: relative;
font-size: 156px;
font-weight: 900;
.color_azul_profundo();
padding-top: 52px;
padding-bottom: 30px;
padding-right: 10px;
.fira_sans();
.font(ultrabold);
}
}
clear: both;
Expand Down
91 changes: 91 additions & 0 deletions src/css/shared/modal/modal.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@

.modalOverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: fade(#000000, 50%);
opacity: 0;
visibility: hidden;
z-index: -1;

display: flex;
align-items: center;
justify-content: center;

.modal {
width: 400px;
min-height: 120px;
max-height: 400px;
overflow-y: auto;
opacity: 0;
visibility: hidden;
background-color: white;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
background-clip: padding-box;

.fira_sans();
font-size: 14px;

.modal-header {
margin: 15px;
text-align: center;
cursor: pointer;
font-size: 16px;
.close {
position: absolute;
right: 10px;
top: 10px;
color: #999;
line-height: 10px;
cursor: pointer;
}
}

.modal-body {
margin: 5px 15px 5px 15px;
display: flex;
align-items: center;
justify-content: center;
}

.modal-footer {
margin: 15px;
text-align: center;
height: 19px;
}
}

&.open {
.animated(0.8s, 0.3s);
.fadeInDown();
opacity: 1;
visibility: visible;
z-index: 101;

.modal {
.animated(0.8s, 0.3s);
.fadeInDown();
opacity: 1;
visibility: visible;

input.wmsInput {
width: 100%;
padding: 8px;
border-radius: 4px;
border: 1px solid fade(@azul_iucn, 40%);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
.fira_sans();
font-size: 14px;
}
input.wmsInput::-moz-focus-inner {
border: 0;
}
}
}
}
1 change: 1 addition & 0 deletions src/css/shared/shared.less
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@
@import 'steps/map/styles';
@import 'steps/conclusion/styles';
@import 'steps/skip/styles';
@import 'modal/modal';
15 changes: 6 additions & 9 deletions src/css/shared/steps/conclusion/styles.less
Original file line number Diff line number Diff line change
Expand Up @@ -7,37 +7,34 @@ conclusion {
padding-bottom: 64px;
}

h2{
h2 {
text-align: center;
.fira_sans();
.font(extrabold);
.color_azul_claro_iucn();
font-size:24px;
font-size: 24px;
line-height: 32px;
margin-bottom:25px;
font-weight: 800;
margin-bottom: 25px;
}
paragraph {
.fira_sans();
.font(light);
font-size: 16px;
line-height: 24px;
.color_blanco();
max-width: 740px;
width:95%;
display: block;
margin:0 auto 24px auto;
font-weight: 300;
.capitalized{
span{
&:first-of-type{
float:left;
position: relative;
font-size:156px;
font-weight: 900;
.color_blanco();
padding-top:54px;
padding-bottom:30px;
padding-right:10px;
.fira_sans();
.font(ultrabold);
}
}
clear:both;
Expand Down
6 changes: 3 additions & 3 deletions src/css/shared/steps/cover/styles.less
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ cover {
vertical-align: middle;
}
span {
font-weight: 500;
.font(medium);
text-transform: uppercase;
letter-spacing: 1px;
}
Expand Down Expand Up @@ -88,7 +88,7 @@ cover {
bottom: 58px;
top: auto;
span {
font-weight: 500;
.font(medium);
text-transform: uppercase;
letter-spacing: 1px;
display: block;
Expand Down Expand Up @@ -121,7 +121,7 @@ cover {
font-weight:normal;
padding-top:13px;
.author{
font-weight:700;
.font(bold);
padding-left:5px;
}
}
Expand Down
Loading

0 comments on commit 39becda

Please sign in to comment.