Skip to content

GitLab

Commit 40d72331 authored by Matija Obreza's avatar Matija Obreza
Browse files

Genesys UX 2016 (contents pages)

parent 8cdcac5d
Hide whitespace changes
Inline Side-by-side
src/main/sourceapp/1/images/ICON-LINKEDIN-A.svg 0 → 100644
View file @ 40d72331
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24.2 24.2" style="enable-background:new 0 0 24.2 24.2;" xml:space="preserve">
<style type="text/css">
.st0{fill:#015E91;}
</style>
<path class="st0" d="M12.1,0.1C5.4,0.1,0,5.5,0,12.1c0,6.7,5.4,12.1,12.1,12.1c6.7,0,12.1-5.4,12.1-12.1C24.1,5.5,18.7,0.1,12.1,0.1
z M8.6,17.4H5.7l0-8.7h2.9V17.4z M8.6,6.4c0,0.8-0.7,1.4-1.5,1.5h0c-0.8,0-1.5-0.6-1.5-1.5V6.4c0-0.8,0.6-1.5,1.4-1.5h0
C7.9,4.9,8.6,5.5,8.6,6.4L8.6,6.4z M18.5,17.4l-3,0v-5.8c0-0.2-0.4-0.8-1.2-0.8h0c-0.9,0-1.3,0.6-1.3,0.8v5.8l-2.9,0V8.8h2.9v0.9
c0.1-0.1,0.8-0.9,2.7-0.9c2.5,0,2.8,1.7,2.9,2.6V17.4z"/>
</svg>
src/main/sourceapp/1/images/ICON-LINKEDIN-N.svg 0 → 100644
View file @ 40d72331
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24.2 24.2" style="enable-background:new 0 0 24.2 24.2;" xml:space="preserve">
<style type="text/css">
.st0{fill:#036EB5;}
</style>
<path class="st0" d="M12.1,0.1C5.4,0.1,0,5.5,0,12.1c0,6.7,5.4,12.1,12.1,12.1c6.7,0,12.1-5.4,12.1-12.1C24.1,5.5,18.7,0.1,12.1,0.1
z M8.6,17.4H5.7l0-8.7h2.9V17.4z M8.6,6.4c0,0.8-0.7,1.4-1.5,1.5h0c-0.8,0-1.5-0.6-1.5-1.5V6.4c0-0.8,0.6-1.5,1.4-1.5h0
C7.9,4.9,8.6,5.5,8.6,6.4L8.6,6.4z M18.5,17.4l-3,0v-5.8c0-0.2-0.4-0.8-1.2-0.8h0c-0.9,0-1.3,0.6-1.3,0.8v5.8l-2.9,0V8.8h2.9v0.9
c0.1-0.1,0.8-0.9,2.7-0.9c2.5,0,2.8,1.7,2.9,2.6V17.4z"/>
</svg>
src/main/sourceapp/1/images/ICON-TWITTER-A.svg 0 → 100644
View file @ 40d72331
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24.2 24.2" style="enable-background:new 0 0 24.2 24.2;" xml:space="preserve">
<style type="text/css">
.st0{fill:#005D91;}
</style>
<path class="st0" d="M12.1,0C5.4,0,0,5.4,0,12.1s5.4,12.1,12.1,12.1s12.1-5.4,12.1-12.1S18.8,0,12.1,0z M16.5,9.8c0,0.1,0,0.2,0,0.3
c0,3-2.3,6.5-6.5,6.5c-1.3,0-2.5-0.4-3.5-1c0.2,0,0.4,0,0.5,0c1.1,0,2.1-0.4,2.9-1c-1,0-1.9-0.7-2.1-1.6c0.1,0,0.3,0,0.4,0
c0.2,0,0.4,0,0.6-0.1c-1.1-0.2-1.8-1.1-1.8-2.3c0,0,0,0,0,0C7.3,10.9,7.6,11,8,11c-0.6-0.4-1-1.1-1-1.9C7,8.7,7.1,8.3,7.3,8
c1.1,1.4,2.8,2.3,4.7,2.4c0-0.2-0.1-0.3-0.1-0.5c0-1.3,1-2.3,2.3-2.3c0.7,0,1.3,0.3,1.7,0.7c0.5-0.1,1-0.3,1.5-0.6
c-0.2,0.5-0.5,1-1,1.3c0.5-0.1,0.9-0.2,1.3-0.4C17.4,9.1,17,9.5,16.5,9.8z"/>
</svg>
src/main/sourceapp/1/images/ICON-TWITTER-N.svg 0 → 100644
View file @ 40d72331
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24.2 24.2" style="enable-background:new 0 0 24.2 24.2;" xml:space="preserve">
<style type="text/css">
.st0{fill:#036EB5;}
</style>
<path class="st0" d="M12.1,0C5.4,0,0,5.4,0,12.1s5.4,12.1,12.1,12.1s12.1-5.4,12.1-12.1S18.8,0,12.1,0z M16.5,9.8c0,0.1,0,0.2,0,0.3
c0,3-2.3,6.5-6.5,6.5c-1.3,0-2.5-0.4-3.5-1c0.2,0,0.4,0,0.5,0c1.1,0,2.1-0.4,2.9-1c-1,0-1.9-0.7-2.1-1.6c0.1,0,0.3,0,0.4,0
c0.2,0,0.4,0,0.6-0.1c-1.1-0.2-1.8-1.1-1.8-2.3c0,0,0,0,0,0C7.3,10.9,7.6,11,8,11c-0.6-0.4-1-1.1-1-1.9C7,8.7,7.1,8.3,7.3,8
c1.1,1.4,2.8,2.3,4.7,2.4c0-0.2-0.1-0.3-0.1-0.5c0-1.3,1-2.3,2.3-2.3c0.7,0,1.3,0.3,1.7,0.7c0.5-0.1,1-0.3,1.5-0.6
c-0.2,0.5-0.5,1-1,1.3c0.5-0.1,0.9-0.2,1.3-0.4C17.4,9.1,17,9.5,16.5,9.8z"/>
</svg>
src/main/sourceapp/1/styles/genesys.scss
View file @ 40d72331
......@@ -7,9 +7,14 @@ $input-color: #6d6c69;
$content-footer-bg: #e7e5df;
$map-bg: #D8D6D0;
$dark-text-color: #2b2924;
$about-text: #4d4c46;
$default-font-family: 'Roboto-Regular';
$emphasis-font-family: 'Roboto-Medium';
$heading-font-family: 'Roboto-Bold';
@font-face {
font-family: 'Roboto-Bold';
font-family: $heading-font-family;
src: url('fonts/Roboto-Bold.eot');
src: url('fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/Roboto-Bold.woff2') format('woff2'),
......@@ -32,7 +37,7 @@ $dark-text-color: #2b2924;
font-style: normal;
}
@font-face {
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
src: url('fonts/Roboto-Medium.eot');
src: url('fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
url('fonts/Roboto-Medium.woff2') format('woff2'),
......@@ -43,7 +48,7 @@ $dark-text-color: #2b2924;
font-style: normal;
}
@font-face {
font-family: 'Roboto-Regular';
font-family: $default-font-family;
src: url('fonts/Roboto-Regular.eot');
src: url('fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Roboto-Regular.woff2') format('woff2'),
......@@ -77,7 +82,7 @@ $dark-text-color: #2b2924;
.genesys-page {
font-family: 'Roboto-Regular';
font-family: $default-font-family;
.navbar-right ul.dropdown-menu {
background: $dark-text-color;
......@@ -89,7 +94,7 @@ $dark-text-color: #2b2924;
label {
color: #fff;
font-weight: 700;
font-family: 'Roboto-Bold';
font-family: $heading-font-family;
font-size: 14px;
}
input {
......@@ -102,7 +107,7 @@ $dark-text-color: #2b2924;
.checkbox {
text-align: left;
label {
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
color: #fff;
font-size: 14px;
}
......@@ -112,14 +117,14 @@ $dark-text-color: #2b2924;
font-size: 16px;
border-radius: 0;
outline: 0 none;
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
color: $dark-text-color;
}
.btn {
border-radius: 0;
outline: 0 none;
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
color: $dark-text-color;
font-size: 14px;
}
......@@ -161,8 +166,7 @@ $dark-text-color: #2b2924;
}
}
a {
font-family: 'Roboto-Regular';
font-size: 16px;
font-family: $default-font-family;
color: $hyperlink;
text-decoration: none;
}
......@@ -198,7 +202,7 @@ $dark-text-color: #2b2924;
background-color: #514f49;
font-size: 11px;
line-height: 13px;
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
min-height: 22px;
min-width: 23px;
}
......@@ -249,7 +253,7 @@ $dark-text-color: #2b2924;
background-color: $dropdown-bg;
border-bottom: 1px solid $light-grey;
font-size: 15px;
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
}
}
}
......@@ -267,7 +271,7 @@ $dark-text-color: #2b2924;
> a {
padding: 32px 23px 23px 5px;
font-size: 18px;
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
color: $content-footer-bg;
}
&.active, &:hover, &:focus, &.open {
......@@ -318,7 +322,7 @@ $dark-text-color: #2b2924;
input {
color: $input-color;
@include placeholder {
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
color: $input-color;
font-size: 18px;
}
......@@ -357,17 +361,17 @@ $dark-text-color: #2b2924;
color: $white-color;
h1 {
font-family: 'Roboto-Bold';
font-family: $heading-font-family;
font-size: 30px;
margin-top: 7px;
margin-bottom: 15px;
}
p {
font-family: 'Roboto-Regular';
font-family: $default-font-family;
font-size: 16px;
line-height: 23px;
strong {
font-family: 'Roboto-Bold';
font-family: $heading-font-family;
}
}
......@@ -375,7 +379,7 @@ $dark-text-color: #2b2924;
position: static;
margin-top: 11px;
background-color: $btn-bg;
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
font-size: 17px;
padding: 9px 64px;
border-width: 2px;
......@@ -419,7 +423,7 @@ $dark-text-color: #2b2924;
}
p {
padding: 16px 0px 0px 15px;
font-family: 'Roboto-Regular';
font-family: $default-font-family;
font-size: 15px;
line-height: 23px;
}
......@@ -453,7 +457,7 @@ $dark-text-color: #2b2924;
}
}
p {
font-family: 'Roboto-Bold';
font-family: $heading-font-family;
font-size: 16px;
color: $dark-text-color;
margin-top: 16px;
......@@ -489,7 +493,7 @@ $dark-text-color: #2b2924;
a {
font-size: 16px;
line-height: 24px;
font-family: 'Roboto-Bold';
font-family: $heading-font-family;
display: inline-block;
vertical-align: middle;
width: 60%;
......@@ -521,14 +525,14 @@ $dark-text-color: #2b2924;
.post-actions {
color: #bcbab4;
font-family: 'Roboto-Regular';
font-family: $default-font-family;
font-size: 14px;
line-height: 17px;
}
.post-content {
color: $dark-text-color;
font-family: 'Roboto-Regular';
font-family: $default-font-family;
font-size: 16px;
line-height: 25px;
padding: 10px 10% 0px 0px;
......@@ -554,7 +558,7 @@ $dark-text-color: #2b2924;
left: 0;
top: 0;
content: 'M';
font-family: 'Roboto-Regular';
font-family: $default-font-family;
font-size: 16px;
color: $white-color;
width: 100%;
......@@ -573,7 +577,7 @@ $dark-text-color: #2b2924;
display: inline-block;
padding-left: 17px;
font-size: 20px;
font-family: 'Roboto-Bold';
font-family: $heading-font-family;
}
}
......@@ -581,7 +585,7 @@ $dark-text-color: #2b2924;
width: 98%;
margin: 0 auto;
background: $btn-bg;
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
font-size: 17px;
color: $white-color;
text-transform: uppercase;
......@@ -617,7 +621,7 @@ $dark-text-color: #2b2924;
.btn-default {
margin-top: 8px;
background-color: $btn-bg;
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
font-size: 17px;
padding: 8px 41px;
border-width: 1px;
......@@ -684,7 +688,7 @@ $dark-text-color: #2b2924;
margin: 0 0.3%;
display: inline-block;
a {
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
font-size: 14px;
color: $dark-text-color;
margin: 0;
......@@ -701,7 +705,7 @@ $dark-text-color: #2b2924;
#copyright {
padding: 0 0 2px;
p {
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
font-size: 11px;
color: $dark-text-color;
padding: 13px 0 0 10px;
......@@ -731,11 +735,11 @@ $dark-text-color: #2b2924;
padding: 16px 8px 9px;
box-shadow: none;
border-radius: 0;
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
color: #bbbbbb;
font-size: 18px;
@include placeholder {
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
color: #bbbbbb;
font-size: 18px;
}
......@@ -780,7 +784,7 @@ $dark-text-color: #2b2924;
}
h2.short {
background: $dark-text-color;
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
font-size: 18px;
color: $white-color;
font-weight: normal;
......@@ -843,6 +847,197 @@ $dark-text-color: #2b2924;
}
}
//about page
.top-image {
background-image: url('../images/about-banner.png');
background-repeat: no-repeat;
background-size: cover;
min-height: 231px;
}
.green-bg {
background: $btn-bg;
}
.about-page {
#content-body-content {
h1.green-bg {
font-family: $heading-font-family;
color: $white-color;
margin: 0;
font-size: 30px;
padding: 16px 20px;
}
.article {
margin-bottom: 20px;
}
.main-col {
padding: 33px 40px 49px 39px;
background: $white-color;
float: left;
width: 66.6%;
}
.free-text {
p {
font-family: $default-font-family;
font-size: 18px;
line-height: 30px;
color: $about-text;
margin-top: 29px;
margin-bottom: 0;
padding-right: 60px;
}
& > p:first-child {
font-family: 'Roboto-Light';
font-size: 24px;
color: $about-text;
line-height: 36px;
margin: 0;
}
h1, h2, h3, h4, h5, h5 {
font-family: $heading-font-family;
}
h3 {
font-size: 24px;
margin-top: 28px;
padding-bottom: 6px;
}
ul {
padding: 0;
margin-top: 30px;
margin-bottom: 0;
list-style: none;
li {
color: $hyperlink;
font-family: $default-font-family;
font-size: 18px;
line-height: 31px;
position: relative;
padding-left: 11px;
p {
margin-top: 0;
}
&:before {
content: "\2022";
padding-right: 5px;
color: $about-text;
position: absolute;
width: 11px;
height: 100%;
left: 0;
top: 0;
}
}
}
}
.article-timestamp {
font-family: 'Roboto-Light';
font-size: 14px;
color: $about-text;
margin-top: 10px;
display: none;
}
.share-article {
border-top: 1px solid #d5d4d3;
border-bottom: 1px solid #d5d4d3;
margin-top: 57px;
padding-top: 20px;
padding-bottom: 19px;
p {
display: inline-block;
vertical-align: middle;
margin: 0;
font-family: $emphasis-font-family;
padding-right: 20px;
font-size: 18px;
color: $about-text;
}
ul {
display: inline-block;
vertical-align: middle;
margin: 0;
li {
vertical-align: middle;
&:before {
display: none;
}
a {
font-family: $emphasis-font-family;
font-size: 18px;
&:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 5px;
background-repeat: no-repeat;
width: 50px;
height: 50px;
}
&.twitter-share-button {
margin-right: 15px;
&:before {
background-image: url('../images/ICON-TWITTER-N.svg');
}
&:hover {
&:before {
background-image: url('../images/ICON-TWITTER-A.svg');
}
}
}
&.linkedin-share-button {
&:before {
background-image: url('../images/ICON-LINKEDIN-N.svg');
}
&:hover {
&:before {
background-image: url('../images/ICON-LINKEDIN-A.svg');
}
}
}
}
}
}
}
.sidebar-nav {
width: 33.4%;
float: left;
ul.cms-menu {
padding: 0 20px;
.cms-menu-item {
border-bottom: 1px solid #d5d4d3;
padding: 12px 9px 11px;
a {
line-height: 26px;
}
&:hover, &:active, &:focus {
background: #ccc9be;
}
}
}
}
}
}
}
......@@ -858,7 +1053,7 @@ $dark-text-color: #2b2924;
display: none;
position: fixed;
top: 79px;
left: -15px;
left: 0px;
max-height: 95%;
max-height: calc(100% - 79px);
overflow-y: auto;
......@@ -898,8 +1093,53 @@ $dark-text-color: #2b2924;
}
}
//about page
.top-image {
background-image: url('../images/about-banner-tablet.png');
min-height: 230px;
background-position: 0% 53%;
}
.about-page #content-body-content {
.article {
margin-bottom: 0;
}
.main-col {
width: 73.5%;
}
.sidebar-nav {
width: 26.5%;
ul.cms-menu {
padding: 0;
.cms-menu-item {
padding: 14px 10px 9px;
}
}
}
.free-text {
p {
padding-right: 0;
}
}
.share-article {
margin-top: 45px;
padding-right: 13px;
p {
padding-right: 12px;
}
}
}
}
}
@media (max-width: 1919px) {
......@@ -1198,12 +1438,14 @@ $dark-text-color: #2b2924;
width: 100%;
position: static;
float: none !important;
box-shadow: none;
border: none;
li {
width: 100%;
a {
font-size: 15px;
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
color: #e7e5df;
padding: 14px 19px;
}
......@@ -1217,7 +1459,7 @@ $dark-text-color: #2b2924;
.form-group, .checkbox {
label {
color: #e7e5df;
font-family: 'Roboto-Medium';
font-family: $emphasis-font-family;
font-size: 15px;
}
}
......@@ -1446,6 +1688,106 @@ $dark-text-color: #2b2924;
padding: 3px 0px;
}
}
// about page
.top-image {
background-image: url('../images/about-banner-mobile.png');
min-height: 181px;
background-position-y: 25%;
}
.about-page #content-body-content {
.main-col {
width: 100%;
padding: 0 0 49px 0;
.free-text {