Initial public push: docs cosmos v4 + AI module + framework groundwork
This is the snapshot the production landing site (nibiru-framework.com) is deployed from. Brings together the recent splash + docs migration to the v4 "Cosmos" design system, the new in-framework AI module, and the framework groundwork that backs the framework-reference extraction. What lands: - docs/: Astro + Starlight site with the v4 dark cosmic palette, GalaxyHero canvas constellation, Mission Control chat (wired to /api/oracle → api.neuronetz.ai via providers.mjs Ollama), 5-panel MMVC stage (Model · AI · Module · Controller · View), translated EN/DE/JA/ES/FR content, PWA + sitemap + llms.txt + Umami analytics. - docs/design-system/: canonical mockup bundle (source/index-v2.html for splash, source/docs-system.html + preview/ for docs, SPEC.md, tokens). - docs/scripts/extraction/framework-reference-v2.md: deep framework reference (~1.6k lines, file:line citations, every public factory and idiom — basis for the LoRA training corpus. - application/module/ai/: AI module with chat / embed / RAG / agent plugins, plus pdoQuery / httpGet / fileRead tools and Modelfile + smoke-test in training/. - application/module/users/: user / ACL / form-factory traits used as the reference plugin pattern for the framework docs. - application/settings/config/database/: schema + seed migrations including the AI module tables (200–203). - Form factory + autogenerator changes the framework-reference-v2 covers. Production secrets stay out: docs/.env, settings.production.ini and ai.production.ini are all gitignored (.example files are in tree). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
stephan
106
application/view/mockup/template/less/modules/_404.less
Normal file
106
application/view/mockup/template/less/modules/_404.less
Normal file
@@ -0,0 +1,106 @@
|
||||
.page-404{
|
||||
background-image: url(../img/backgrounds/14.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left bottom;
|
||||
background-size: cover;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.page-404-general{
|
||||
padding: 60px 25px;
|
||||
position: relative;
|
||||
padding-left: 155px;
|
||||
}
|
||||
|
||||
.page-404-error{
|
||||
padding: 15px 25px;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.page-404-error-text{
|
||||
font-size: 50px;
|
||||
line-height: 53px;
|
||||
color: @color_black;
|
||||
opacity: 0.22;
|
||||
font-weight: @font_black;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-404-info{
|
||||
padding: 15px 25px;
|
||||
border-left: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
.page-404-info-title{
|
||||
font-size: 50px;
|
||||
line-height: 53px;
|
||||
font-weight: @font_thin;
|
||||
opacity: 0.73;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-404-info-description{
|
||||
font-size: 24px;
|
||||
font-weight: @font_light;
|
||||
opacity: 0.60;
|
||||
padding: 20px 0;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.page-404-redirect{
|
||||
font-size: 18px;
|
||||
font-weight: @font_light;
|
||||
color: @color_blue;
|
||||
margin-bottom: 15px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
i{
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: @break-small){
|
||||
.page-404-info-description{
|
||||
font-size: 21px;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.page-404-info-title{
|
||||
font-size: 45px;
|
||||
line-height: 47px;
|
||||
}
|
||||
|
||||
.page-404-error-text{
|
||||
font-size: 45px;
|
||||
line-height: 47px;
|
||||
}
|
||||
|
||||
.page-404-general{
|
||||
padding: 60px 25px 60px 144px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: @break-small-x){
|
||||
.page-404-error{
|
||||
position: relative;
|
||||
top: auto;
|
||||
padding: 15px 0;
|
||||
}
|
||||
.page-404-info{
|
||||
border-left: none;
|
||||
border-top: 1px solid #dbdbdb;
|
||||
padding: 15px 0;
|
||||
}
|
||||
.page-404-general{
|
||||
padding: 30px 25px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
.accordion{
|
||||
border: 2px solid @color_grey-lighter;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.accordion-item{
|
||||
display: block;
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
background-color: @color_grey-lighter;
|
||||
.transition(background-color);
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.active{
|
||||
background-color: #fdfdfd;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-title{
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
font-weight: @font_light;
|
||||
padding: 20px 25px 20px 55px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
|
||||
&:after{
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: "\f105";
|
||||
.transition(transform);
|
||||
top: 22px;
|
||||
left: 25px;
|
||||
font-size: 17px;
|
||||
color: @color_black;
|
||||
font-family: @icons;
|
||||
line-height: 1;
|
||||
|
||||
.accordion-item.active &{
|
||||
.transform(rotate(90deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-description{
|
||||
font-size: 14px;
|
||||
line-height: 25px;
|
||||
display: none;
|
||||
padding: 0px 25px 20px;
|
||||
}
|
||||
|
||||
@media all and (max-width: @break-small-x){
|
||||
.accordion-title{
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
padding: 20px 15px 20px 40px;
|
||||
|
||||
&:after{
|
||||
left: 15px;
|
||||
top: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-description{
|
||||
padding: 0px 15px 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,265 @@
|
||||
.comments{
|
||||
margin-bottom: 30px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
.comment-list{
|
||||
margin: 0 0 30px 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.comment-list-item{
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid @color_grey-light;
|
||||
position: relative;
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-reply{
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
|
||||
&:before{
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
z-index: 2;
|
||||
top: -5px;
|
||||
left: 49%;
|
||||
background-color: @color_grey-lighter;
|
||||
border-left: 1px solid @color_grey-light;
|
||||
border-top: 1px solid @color_grey-light;
|
||||
.transform(rotate(45deg));
|
||||
}
|
||||
|
||||
.comment-list{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.comment-list-item{
|
||||
border-radius: 0;
|
||||
background-color: @color_grey-lighter;
|
||||
border-left: 1px solid @color_grey-light;
|
||||
border-top: 1px solid @color_grey-light;
|
||||
border-right: 1px solid @color_grey-light;
|
||||
border-bottom: 0;
|
||||
margin: 0;
|
||||
|
||||
&:last-child{
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-content{
|
||||
padding-left: 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.comment-user-photo{
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
line-height: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
img{
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-header{
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:after{
|
||||
clear: both;
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-username{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.comment-meta{
|
||||
.fz(14);
|
||||
float: right;
|
||||
color: @color_grey;
|
||||
font-weight: @font_light;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
li{
|
||||
display: inline;
|
||||
position: relative;
|
||||
padding: 0 7px;
|
||||
|
||||
&:after{
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
display: block;
|
||||
content: '';
|
||||
top: 2px;
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background-color: @color_grey-light;
|
||||
}
|
||||
|
||||
&:first-child{
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
|
||||
border: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-message{
|
||||
.fz(15);
|
||||
}
|
||||
|
||||
.comment-actions{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
text-align: right;
|
||||
font-size: 16px;
|
||||
font-weight: @font_light;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.comment-action-item{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-action-like{
|
||||
color: @color_red;
|
||||
|
||||
&:hover .fa:before, &.comment-action-liked .fa:before{
|
||||
content: '\f004'
|
||||
}
|
||||
}
|
||||
|
||||
.comment-action-reply{
|
||||
color: @color_grey;
|
||||
}
|
||||
|
||||
.comment-form{
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.comment-form-title{
|
||||
|
||||
}
|
||||
|
||||
.comment-form-list{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.comment-form-list-item{
|
||||
margin-bottom: 20px;
|
||||
|
||||
input[type="text"]{
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
textarea{
|
||||
height: 110px;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 175px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button{
|
||||
display: block;
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border: 1px solid @color_grey-light;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
line-height: 35px;
|
||||
border-radius: 3px;
|
||||
font-weight: @font_light;
|
||||
position: relative;
|
||||
|
||||
&:before{
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-family: @icons-stroke;
|
||||
font-size: 20px;
|
||||
line-height: 45px;
|
||||
content: '\e668';
|
||||
border-right: 1px solid @color_grey-light;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&:hover:before{
|
||||
content: '+';
|
||||
font-family: @font_primary;
|
||||
line-height: 42px;
|
||||
font-size: 24px;
|
||||
font-weight: @font_normal;
|
||||
color: @color_grey-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.comment-username, .comment-meta{
|
||||
width: 100%;
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment-content{
|
||||
padding-left: 0;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.comment-user-photo{
|
||||
left: 50%;
|
||||
width: 80px;
|
||||
margin-left: -40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.comment-actions{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
182
application/view/mockup/template/less/modules/_article.less
Normal file
182
application/view/mockup/template/less/modules/_article.less
Normal file
@@ -0,0 +1,182 @@
|
||||
.article{
|
||||
|
||||
}
|
||||
|
||||
.article-title{
|
||||
margin: 0 0 20px 0;
|
||||
line-height: 1.2;
|
||||
.fz(40);
|
||||
}
|
||||
|
||||
// Article meta
|
||||
.article-meta{
|
||||
margin: 0 0 10px 0;
|
||||
list-style-type: none;
|
||||
font-size: 14px;
|
||||
color: @color_grey;
|
||||
font-weight: @font_light;
|
||||
border-top: 1px solid @color_grey-light;
|
||||
padding: 20px 0 10px 0;
|
||||
|
||||
&:after{
|
||||
clear: both;
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
|
||||
li{
|
||||
float: left;
|
||||
margin-right: 18px;
|
||||
|
||||
&:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article-meta-item{
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
|
||||
a{
|
||||
color: inherit;
|
||||
|
||||
&:hover{
|
||||
color: @color_blue;
|
||||
}
|
||||
}
|
||||
|
||||
&:before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-family: @icons-stroke;
|
||||
font-size: 20px;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.article-meta-date:before{ content: '\e660' }
|
||||
.article-meta-author:before{ content: '\e605' }
|
||||
.article-meta-category:before{ content: '\e653' }
|
||||
.article-meta-views:before{ content: '\e63e' }
|
||||
.article-meta-comments:before{ content: '\e668' }
|
||||
.article-meta-likes:before{ content: '\e642' }
|
||||
|
||||
|
||||
.article-featured-image{
|
||||
max-width: 100%;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.article-subtitle{
|
||||
.fz(24);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.article-content{
|
||||
.fz(19);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
}
|
||||
|
||||
.article-media{
|
||||
margin: 30px 0;
|
||||
|
||||
.fluid-width-video-wrapper{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.article-tags{
|
||||
font-weight: @font_light;
|
||||
margin-bottom: 20px;
|
||||
color: @color_grey-dark;
|
||||
padding-top: 10px;
|
||||
.fz(14);
|
||||
}
|
||||
|
||||
.article-tag{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
background-color: @color_grey-lighter;
|
||||
color: @color_grey-dark;
|
||||
padding: 5px 10px;
|
||||
margin-left: 2px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.article-navigation{
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:after{
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.article-navigation-prev, .article-navigation-next{
|
||||
display: block;
|
||||
font-weight: @font_light;
|
||||
color: @color_grey-dark;
|
||||
position: relative;
|
||||
|
||||
&:before{
|
||||
font-family: @icons-stroke;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 35px;
|
||||
width: 15px;
|
||||
text-align: center;
|
||||
text-indent: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.article-navigation-prev{
|
||||
padding-left: 20px;
|
||||
float: left;
|
||||
|
||||
&:before{
|
||||
content: '\e686';
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.article-navigation-next{
|
||||
padding-right: 15px;
|
||||
float: right;
|
||||
|
||||
&:before{
|
||||
content: '\e684';
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.article-widget{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.article-widget-title{
|
||||
.fz(22);
|
||||
}
|
||||
|
||||
.article-related-articles{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: @font_light;
|
||||
|
||||
li{
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.vjs-audio.video-js:after{
|
||||
padding: 100% 0 0;
|
||||
}
|
||||
|
||||
.vjs-audio.video-js{
|
||||
background-color: white;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@import (less) '../libs/twentytwenty.css';
|
||||
|
||||
// Before and After
|
||||
.before-and-after{
|
||||
margin-bottom: 30px;
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay{ display: none; }
|
||||
}
|
||||
117
application/view/mockup/template/less/modules/_blog.less
Normal file
117
application/view/mockup/template/less/modules/_blog.less
Normal file
@@ -0,0 +1,117 @@
|
||||
// Blog
|
||||
|
||||
.blog{
|
||||
|
||||
}
|
||||
|
||||
.blog-grid{
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.blog-grid-image{
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
|
||||
img{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
&:before, &:after{
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background-color: white;
|
||||
.transform(translateX(-50%) translateY(-50%));
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
&:before{
|
||||
width: 2px;
|
||||
height: 0;
|
||||
-webkit-transition: height .25s ease;
|
||||
-moz-transition: height .25s ease;
|
||||
-ms-transition: height .25s ease;
|
||||
-o-transition: height .25s ease;
|
||||
transition: height .25s ease;
|
||||
}
|
||||
|
||||
&:after{
|
||||
width: 0;
|
||||
height: 2px;
|
||||
-webkit-transition: width .25s ease;
|
||||
-moz-transition: width .25s ease;
|
||||
-ms-transition: width .25s ease;
|
||||
-o-transition: width .25s ease;
|
||||
transition: width .25s ease;
|
||||
}
|
||||
|
||||
&:hover:before{
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&:hover:after{
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.blog-grid-image-over{
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
.transition(opacity);
|
||||
|
||||
.blog-grid-image:hover &{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-grid-title{
|
||||
margin-bottom: 10px;
|
||||
.fz(21);
|
||||
line-height: 1.4;
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-grid-excerpt{
|
||||
.fz(15);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.blog-grid-meta{
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
color: @color_grey;
|
||||
font-weight: @font_light;
|
||||
line-height: 1.4;
|
||||
position: relative;
|
||||
|
||||
&:after{
|
||||
clear: both;
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.blog-grid-date{
|
||||
|
||||
}
|
||||
|
||||
.blog-grid-author{
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
.book-grid{
|
||||
|
||||
}
|
||||
|
||||
.book-grid-item{
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:after{
|
||||
display: block;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.book-grid-cover{
|
||||
max-width: 40%;
|
||||
float: left;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.book-grid-meta{
|
||||
float: left;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.book-grid-title{
|
||||
.fz(20);
|
||||
line-height: 1.2;
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.book-grid-details{
|
||||
.fz(16);
|
||||
border-bottom: 1px solid lighten(@color_grey-light, 5%);
|
||||
line-height: 2.8;
|
||||
margin: 0;
|
||||
|
||||
&:last-child{
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.book-grid-item { text-align: center; }
|
||||
.book-grid-cover {
|
||||
float: none;
|
||||
margin-right: 0;
|
||||
margin-bottom: 15px;
|
||||
max-width: none;
|
||||
}
|
||||
.book-grid-meta{
|
||||
float: none;
|
||||
max-width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
63
application/view/mockup/template/less/modules/_book.less
Normal file
63
application/view/mockup/template/less/modules/_book.less
Normal file
@@ -0,0 +1,63 @@
|
||||
.book{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.book-image{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.book-title{
|
||||
.fz(44);
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.book-description{
|
||||
.fz(20);
|
||||
color: @color_grey-dark;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.book-download-list{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.book-download-item{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
a{
|
||||
padding: 10px 20px;
|
||||
background-color: @color_green;
|
||||
color: white;
|
||||
display: block;
|
||||
line-height: 1.4;
|
||||
border-radius: 3px;
|
||||
font-weight: @font_light;
|
||||
.transition-color-background();
|
||||
|
||||
i{
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
background-color: darken(@color_green, 5%)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small) {
|
||||
.book-title{ .fz(35); margin-top: 48px; }
|
||||
.book-description{ .fz(16); margin-bottom: 24px; }
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.book-title{ .fz(28); margin-top: 38px; }
|
||||
.book-description{ .fz(13); margin-bottom: 19px; }
|
||||
}
|
||||
82
application/view/mockup/template/less/modules/_box.less
Normal file
82
application/view/mockup/template/less/modules/_box.less
Normal file
@@ -0,0 +1,82 @@
|
||||
.box{
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
|
||||
&.box-small-icon{
|
||||
padding-left: 40px;
|
||||
|
||||
.box-title{
|
||||
.fz(25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-small-icon-alt{
|
||||
padding-left: 150px;
|
||||
padding-right: 60px;
|
||||
padding-top: 20px;
|
||||
|
||||
.box-title{
|
||||
.fz(25);
|
||||
}
|
||||
|
||||
.box-icon{
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 1px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-icon{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.box-icon-large{
|
||||
color: @color_blue;
|
||||
.fz(40);
|
||||
margin-bottom: 20px;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
line-height: 75px;
|
||||
border-radius: 50%;
|
||||
background-color: @color_grey-lighter;
|
||||
}
|
||||
|
||||
.box-title{
|
||||
.fz(35);
|
||||
font-weight: @font_light;
|
||||
|
||||
.box-image &{
|
||||
.fz(25);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.box-description{
|
||||
.fz(16);
|
||||
font-weight: @font_light;
|
||||
line-height: 1.5;
|
||||
color: @color_grey-dark;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.box-small-icon-alt{
|
||||
padding: 100px 0 0 0;
|
||||
text-align: center;
|
||||
|
||||
.box-icon{
|
||||
left: 50%;
|
||||
margin-left: -40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
59
application/view/mockup/template/less/modules/_brands.less
Normal file
59
application/view/mockup/template/less/modules/_brands.less
Normal file
@@ -0,0 +1,59 @@
|
||||
.brands{
|
||||
margin: 0 0 30px 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
&:after{
|
||||
display: block;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.brand-item{
|
||||
float: left;
|
||||
width: 16.6666666667%;
|
||||
padding: 0 10px;
|
||||
line-height: 0;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:nth-of-type(6n+1){
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-item-image{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small) {
|
||||
.brand-item{
|
||||
width: 25%;
|
||||
|
||||
&:nth-of-type(6n+1){
|
||||
clear: none;
|
||||
}
|
||||
|
||||
&:nth-of-type(4n+1){
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.brand-item{
|
||||
width: 50%;
|
||||
|
||||
&:nth-of-type(6n+1){
|
||||
clear: none;
|
||||
}
|
||||
|
||||
&:nth-of-type(4n+1){
|
||||
clear: none;
|
||||
}
|
||||
|
||||
&:nth-of-type(2n+1){
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
76
application/view/mockup/template/less/modules/_browser.less
Normal file
76
application/view/mockup/template/less/modules/_browser.less
Normal file
@@ -0,0 +1,76 @@
|
||||
.header-browser{
|
||||
max-width: 970px;
|
||||
margin: 110px auto -200px;
|
||||
-webkit-box-shadow: 0px 0px 9px 1px rgba(0,0,0,.13);
|
||||
box-shadow: 0px 0px 9px 1px rgba(0,0,0,.13);
|
||||
border-radius: 3px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.header-browser-header{
|
||||
background-color: #e8e8e8;
|
||||
height: 35px;
|
||||
border-bottom: 1px solid #dadada;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.header-browser-dots{
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 14px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 7px;
|
||||
|
||||
li{
|
||||
width: 8px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background-color: lighten(@color_grey-dark, 20%);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.header-browser-menu{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 11px;
|
||||
|
||||
i{
|
||||
font-size: 15px;
|
||||
color: lighten(@color_grey-dark, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.header-browser-content{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-browser-img{
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small) {
|
||||
.header-back-web, .header-back-mac{
|
||||
padding: 130px 0 0;
|
||||
}
|
||||
}
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.header-browser{
|
||||
display: none;
|
||||
}
|
||||
.header-back-web, .header-back-mac{
|
||||
padding: 110px 0 60px;
|
||||
}
|
||||
.header-back-web {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
// Browsers table
|
||||
.browsers-table{
|
||||
font-size: 18px;
|
||||
font-weight: @font_light;
|
||||
margin-bottom: 30px;
|
||||
width: 100%;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.browsers-table-row{
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
td{
|
||||
padding: 20px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.browsers-table-icon{
|
||||
margin-right: 15px;
|
||||
font-size: 26px;
|
||||
color: @color_grey-dark;
|
||||
}
|
||||
|
||||
.browsers-table-comment{ text-align: center; }
|
||||
.browsers-table-recommended{ color: @color_green; }
|
||||
.browsers-table-partial{ color: @color_orange; }
|
||||
|
||||
@media all and (max-width: @break-small-x){
|
||||
.browsers-table-comment{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.browsers-table td{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.browsers-table-icon{
|
||||
display: block;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
193
application/view/mockup/template/less/modules/_browsers.less
Normal file
193
application/view/mockup/template/less/modules/_browsers.less
Normal file
@@ -0,0 +1,193 @@
|
||||
.browsers{
|
||||
margin: 30px 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
&.browsers-compact li{
|
||||
width: 18.4%;
|
||||
margin-right: 2%;
|
||||
border: none;
|
||||
|
||||
.browser-icon:before, .browser-icon:after{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:after{
|
||||
clear: both;
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
|
||||
li{
|
||||
float: left;
|
||||
width: 15%;
|
||||
text-align: center;
|
||||
border: 1px solid @color_grey-light;
|
||||
margin-right: 6.25%;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
|
||||
&:after{
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browser-title{
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.browser-icon{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
height: 70%;
|
||||
|
||||
svg{
|
||||
max-width: 50%;
|
||||
height: 50%;
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
||||
// Regular state of before and after pseudo elements
|
||||
&:before, &:after{
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Recommended and Partial before pseudo elements
|
||||
li.browser-recommended &:before, li.browser-partial &:before{
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
background-color: white;
|
||||
font-size: 17px;
|
||||
font-family: @icons;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 38px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
li.browser-recommended &:before{
|
||||
display: block;
|
||||
content: "\f005";
|
||||
background-color: white;
|
||||
color: @color_green;
|
||||
border-color: @color_green;
|
||||
}
|
||||
|
||||
li.browser-partial &:before{
|
||||
display: block;
|
||||
content: "\f12a";
|
||||
background-color: white;
|
||||
color: @color_orange;
|
||||
border-color: @color_orange;
|
||||
}
|
||||
|
||||
// Recommended after
|
||||
li.browser-recommended &:after, li.browser-partial &:after{
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Hover state of before
|
||||
li:hover &:before, li:hover &:after{
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Recommended before
|
||||
li.browser-recommended:hover &:before, li.browser-partial:hover &:before{
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '' !important;
|
||||
background-color: #fff;
|
||||
border: 0;
|
||||
border-right: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
.transform(rotate(45deg));
|
||||
top: -13px;
|
||||
left: 50%;
|
||||
margin-left: -2px;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
li.browser-recommended:hover &:after, li.browser-partial:hover &:after{
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0px;
|
||||
top: -41px;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
line-height: 2.4;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li.browser-recommended:hover &:after{
|
||||
color: @color_green;
|
||||
border: 1px solid @color_green;
|
||||
content: 'recommended';
|
||||
}
|
||||
|
||||
li.browser-partial:hover &:after{
|
||||
color: @color_orange;
|
||||
border: 1px solid @color_orange;
|
||||
content: 'partial support';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small) {
|
||||
.browsers li, .browsers.browsers-compact li{
|
||||
width: 30%;
|
||||
margin-right: 5%;
|
||||
margin-bottom: 5%;
|
||||
|
||||
&:nth-child(3n){
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.browser-icon{ margin-bottom: 10px; }
|
||||
.browser-title{ font-size: 14px; }
|
||||
.browsers li, .browsers.browsers-compact li{
|
||||
width: 45%;
|
||||
margin-right: 10%;
|
||||
margin-bottom: 10%;
|
||||
|
||||
&:nth-child(2n){
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3n){
|
||||
margin-right: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
182
application/view/mockup/template/less/modules/_button.less
Normal file
182
application/view/mockup/template/less/modules/_button.less
Normal file
@@ -0,0 +1,182 @@
|
||||
.button{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
text-decoration: none;
|
||||
.fz(16);
|
||||
font-weight: @font_light;
|
||||
color: @color_black;
|
||||
border: 1px solid @color_grey-light;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 12px 20px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
background-color: @color_grey-lighter;
|
||||
outline: none;
|
||||
.transition-color-background();
|
||||
|
||||
&.button-icon-right{
|
||||
i{
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
i{
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// State
|
||||
&:active{
|
||||
bottom: -1px;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.large{
|
||||
.fz(18);
|
||||
padding: 18px 42px;
|
||||
border-radius: 5px;
|
||||
|
||||
&.button-icon{
|
||||
padding: 16px 42px 16px 22px;
|
||||
}
|
||||
|
||||
&.button-icon-right{
|
||||
padding: 16px 22px 16px 42px;
|
||||
}
|
||||
}
|
||||
|
||||
&.rounded{
|
||||
border-radius: 21px;
|
||||
|
||||
&.small{
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
&.large{
|
||||
border-radius: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
&.small{
|
||||
.fz(14);
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&.full{
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Colors
|
||||
&.green, &.blue, &.blue-light, &.purple, &.orange, &.red{
|
||||
color: white;
|
||||
border: 1px solid rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
&.green {
|
||||
background-color: @color_green;
|
||||
&:hover{ background-color: darken(@color_green, 5%);}
|
||||
}
|
||||
&.blue {
|
||||
background-color: @color_blue;
|
||||
&:hover{ background-color: darken( @color_blue, 5%);}
|
||||
}
|
||||
&.blue-light{
|
||||
background-color: @color_blue-light;
|
||||
&:hover{ background-color: darken( @color_blue-light, 5%);}
|
||||
}
|
||||
&.purple {
|
||||
background-color: @color_purple;
|
||||
&:hover{ background-color: darken( @color_purple, 5%);}
|
||||
}
|
||||
&.orange {
|
||||
background-color: @color_orange;
|
||||
&:hover{ background-color: darken( @color_orange, 5%);}
|
||||
}
|
||||
&.red {
|
||||
background-color: @color_red;
|
||||
&:hover{ background-color: darken( @color_red, 5%);}
|
||||
}
|
||||
|
||||
&.stroke{
|
||||
background-color: transparent;
|
||||
&.green {
|
||||
color: @color_green;
|
||||
border-color: @color_green;
|
||||
}
|
||||
&.blue {
|
||||
color: @color_blue;
|
||||
border-color: @color_blue;
|
||||
}
|
||||
&.blue-light {
|
||||
color: @color_blue-light;
|
||||
border-color: @color_blue-light;
|
||||
}
|
||||
&.purple {
|
||||
color: @color_purple;
|
||||
border-color: @color_purple;
|
||||
}
|
||||
&.orange {
|
||||
color: @color_orange;
|
||||
border-color: @color_orange;
|
||||
}
|
||||
&.red {
|
||||
color: @color_red;
|
||||
border-color: @color_red;
|
||||
}
|
||||
|
||||
&.white{
|
||||
color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
&.black{
|
||||
color: @color_black;
|
||||
border-color: @color_black;
|
||||
}
|
||||
|
||||
&.green:hover, &.blue:hover, &.blue-light:hover, &.purple:hover, &.orange:hover, &.red:hover{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.button-list{
|
||||
.button{
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.button.large{
|
||||
padding: 13px 32px;
|
||||
font-size: 14px;
|
||||
|
||||
&.button-icon{
|
||||
padding: 11px 37px 11px 17px;
|
||||
}
|
||||
&.button-right{
|
||||
padding: 11px 17px 11px 37px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
.call-to-action{
|
||||
padding: 80px 0;
|
||||
// background-position: bottom;
|
||||
background-size: cover;
|
||||
background-image: url('../img/backgrounds/7.jpg');
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.call-to-action-title{
|
||||
.fz(52);
|
||||
font-weight: @font_thin;
|
||||
color: darken(@color_black, 10%);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.call-to-action-description{
|
||||
.fz(20);
|
||||
color: @color_grey-dark;
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.call-to-action-button{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
background-color: @color_blue;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
color: white;
|
||||
padding: 0 30px;
|
||||
border-radius: 25px;
|
||||
line-height: 50px;
|
||||
font-weight: @font_normal;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.all-to-action-title{
|
||||
.fz(38);
|
||||
}
|
||||
|
||||
.call-to-action-description{
|
||||
.fz(17);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,223 @@
|
||||
.category-info{
|
||||
padding: 60px 0 20px 0;
|
||||
}
|
||||
|
||||
.category-title{
|
||||
.fz(45);
|
||||
position: relative;
|
||||
font-weight: @font_light;
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
.category-description{
|
||||
.fz(22);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 20px;
|
||||
font-weight: @font_light;
|
||||
color: @color_grey-dark;
|
||||
}
|
||||
|
||||
.category-content{
|
||||
color: darken(@color_grey-dark, 10%);
|
||||
}
|
||||
|
||||
.fragment-identifier{
|
||||
color: @color_grey-light;
|
||||
display: block;
|
||||
font-size: 19px;
|
||||
border: 1px solid @color_grey-light;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
text-align: center;
|
||||
line-height: 45px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
border-radius: 3px;
|
||||
top: 0;
|
||||
outline: none;
|
||||
.transition-custom(color .3s ease, border-color .3s ease);
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
border: 1px solid @color_grey;
|
||||
color: @color_grey;
|
||||
|
||||
&:after, &:before{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.fragment-identifier-copied{
|
||||
|
||||
&:after{
|
||||
content: 'copied';
|
||||
color: @color_green;
|
||||
border-color: @color_green;
|
||||
width: 70px;
|
||||
margin-left: -35px;
|
||||
}
|
||||
|
||||
&:before{
|
||||
border-color: @color_green;
|
||||
}
|
||||
}
|
||||
|
||||
&.fragment-identifier-error{
|
||||
|
||||
&:after{
|
||||
content: 'not supported :(';
|
||||
color: @color_orange;
|
||||
border-color: @color_orange;
|
||||
width: 110px;
|
||||
margin-left: -55px;
|
||||
}
|
||||
|
||||
&:before{
|
||||
border-color: @color_orange;
|
||||
}
|
||||
}
|
||||
|
||||
&:after{
|
||||
content: 'copy fragment identifier';
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-size: 13px;
|
||||
width: 170px;
|
||||
left: 50%;
|
||||
margin-left: -85px;
|
||||
top: -43px;
|
||||
opacity: 0;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
color: @color_grey-dark;
|
||||
border: 1px solid @color_grey-light;
|
||||
line-height: 31px;
|
||||
border-radius: 3px;
|
||||
.transition-custom(color .3s ease, border-color .3s ease, opacity .3s ease);
|
||||
background-color: white;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:before{
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
border-right: 1px solid @color_grey;
|
||||
border-bottom: 1px solid @color_grey;
|
||||
background-color: white;
|
||||
.transform(rotate(45deg));
|
||||
.transition(opacity);
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
margin-left: -2px;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Fix the horizontal scroll bar
|
||||
@media (min-width: 1200px) {
|
||||
.container-fluid .fragment-identifier:after{
|
||||
top: 5px;
|
||||
left: auto;
|
||||
right: 55px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container-fluid .fragment-identifier:before{
|
||||
margin: 0;
|
||||
left: auto;
|
||||
right: 53px;
|
||||
top: 20px;
|
||||
.transform(rotate(-45deg));
|
||||
}
|
||||
}
|
||||
// End of fix the horizontal scrollbar
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.fragment-identifier{
|
||||
&:after{
|
||||
top: 5px;
|
||||
left: auto;
|
||||
right: 55px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:before{
|
||||
margin: 0;
|
||||
left: auto;
|
||||
right: 53px;
|
||||
top: 20px;
|
||||
.transform(rotate(-45deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small) {
|
||||
.category-info { padding: 48px 0 20px 0; }
|
||||
.category-title{ .fz(38); }
|
||||
.category-description{ .fz(17); }
|
||||
|
||||
.fragment-identifier{
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
font-size: 15px;
|
||||
top: 5px;
|
||||
|
||||
&:after{
|
||||
top: 1px;
|
||||
left: auto;
|
||||
right: 45px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:before{
|
||||
margin: 0;
|
||||
left: auto;
|
||||
right: 43px;
|
||||
top: 16px;
|
||||
.transform(rotate(-45deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.category-info { padding: 38px 0 20px 0; }
|
||||
.category-title{ .fz(30); }
|
||||
.category-description{ .fz(14); }
|
||||
|
||||
.fragment-identifier{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 35px;
|
||||
font-size: 14px;
|
||||
top: -1px;
|
||||
line-height: 30px;
|
||||
// border: none;
|
||||
|
||||
&:after{
|
||||
top: 0px;
|
||||
left: auto;
|
||||
right: 38px;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
width: 150px;
|
||||
color: @color_black;
|
||||
}
|
||||
|
||||
&:before{
|
||||
margin: 0;
|
||||
left: auto;
|
||||
right: 36px;
|
||||
top: 13px;
|
||||
.transform(rotate(-45deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
.category-list{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.category-list-title{
|
||||
.fz(20);
|
||||
color: @color_black;
|
||||
line-height: 1.4;
|
||||
background-color: @color_grey-lighter;
|
||||
padding: 16px 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.category-list-content{
|
||||
padding: 20px 30px;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
}
|
||||
.category-list-content-item{
|
||||
padding: 5px 0;
|
||||
position: relative;
|
||||
&:before{
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: @color_grey-light;
|
||||
content: '';
|
||||
display: block;
|
||||
left: -18px;
|
||||
top: 16px;
|
||||
}
|
||||
}
|
||||
.category-list-content-item-text{
|
||||
.fz(18);
|
||||
font-weight: @font_light;
|
||||
line-height: 1.2;
|
||||
}
|
||||
518
application/view/mockup/template/less/modules/_changelog.less
Normal file
518
application/view/mockup/template/less/modules/_changelog.less
Normal file
@@ -0,0 +1,518 @@
|
||||
.changelog-wrapper{
|
||||
width: 700px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.changelog-state-new { color: #98C74E; }
|
||||
.changelog-state-updated { color: #ff4f26; }
|
||||
.changelog-state-removed { color: red; }
|
||||
|
||||
.changelog-filters{
|
||||
|
||||
background-color: lighten(@color_grey-lighter, 2%);
|
||||
padding: 20px 0 17px 20px;
|
||||
text-align: left;
|
||||
font-weight: @font_light;
|
||||
border: 1px solid @color_grey-light;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
|
||||
.changelog-link{
|
||||
height: 30px;
|
||||
bottom: -30px;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
label{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1; /* Fix for IE7 */
|
||||
*display: inline; /* Fix for IE7 */
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
input{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.changelog-checkbox {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.changelog-checkbox, .changelog-checkbox-label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.changelog-checkbox-label {
|
||||
position: relative;
|
||||
color: darken(@color_grey-dark, 10%);
|
||||
}
|
||||
|
||||
.changelog-checkbox + .changelog-checkbox-label:before {
|
||||
content: '';
|
||||
background: #fff;
|
||||
border: 1px solid @color_grey-light;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 2px;
|
||||
margin-right: 13px;
|
||||
text-align: center;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.changelog-checkbox:checked + .changelog-checkbox-label:before {
|
||||
content: "\f00c";
|
||||
font-family: @icons;
|
||||
background: #98C74E;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.changelog-item{
|
||||
border: 1px solid @color_grey-light;
|
||||
padding: 30px 40px;
|
||||
margin-bottom: 100px;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
|
||||
&.changelog-view-files{
|
||||
.changelog-update-descriptions{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.changelog-files-changed{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.changelog-switch:before{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.changelog-switch:after{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&:before, &:after{
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 50%;
|
||||
left: 50%;
|
||||
background-color: white;
|
||||
margin-left: -4px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:first-child{
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
&:first-child:before, &:last-child:after, &:last-child .changelog-link{
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:after{
|
||||
bottom: -4px;
|
||||
}
|
||||
|
||||
&:before{
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.changelog-link{
|
||||
position: absolute;
|
||||
bottom: -101px;
|
||||
left: 50%;
|
||||
width: 1px;
|
||||
height: 100px;
|
||||
background-color: @color_grey-light;
|
||||
}
|
||||
|
||||
.changelog-header{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.changelog-version{
|
||||
margin: 0;
|
||||
|
||||
a{
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover:after{
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:after{
|
||||
content: '\f0c1';
|
||||
.transition(opacity);
|
||||
font-family: @icons;
|
||||
font-size: 18px;
|
||||
vertical-align: 1px;
|
||||
color: @color_grey-dark;
|
||||
margin-left: 10px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.changelog-date{
|
||||
margin: 5px 0 0 0;
|
||||
.fz(14);
|
||||
color: @color_grey-dark;
|
||||
}
|
||||
|
||||
.changelog-switch{
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 0;
|
||||
font-size: 15px;
|
||||
color: @color_grey-dark;
|
||||
font-weight: 300;
|
||||
border: 1px solid #C5C5C5;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
width: 190px;
|
||||
text-align: center;
|
||||
|
||||
&:before{
|
||||
content: 'veiw updated files';
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:after{
|
||||
content: 'view updated features';
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.changelog-update-description{
|
||||
line-height: 25px;
|
||||
position: relative;
|
||||
padding-left: 115px;
|
||||
margin-top: 20px;
|
||||
border-top: 1px solid @color_grey-light;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.changelog-files-changed{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.changelog-update-description.changelog-improvement .changelog-type{
|
||||
background-color: #4AA3BA;
|
||||
}
|
||||
|
||||
.changelog-update-description.changelog-bug-fix .changelog-type{
|
||||
background-color: #DA5C53;
|
||||
}
|
||||
|
||||
.changelog-type{
|
||||
background-color: #98C74E;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1; /* Fix for IE7 */
|
||||
*display: inline; /* Fix for IE7 */
|
||||
padding: 0 10px;
|
||||
margin-right: 5px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
border:1px solid rgba(0, 0, 0, 0.1);
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 19px;
|
||||
}
|
||||
|
||||
.changelog-files-changed-toolbar{
|
||||
background-color: @color_grey-lighter;
|
||||
margin: 30px 0 35px 0;
|
||||
z-index: 2;
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.changelog-files-changed-filters{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
color: darken(@color_grey-dark, 5%);
|
||||
position: relative;
|
||||
|
||||
li{
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:after{
|
||||
display: block;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.changelog-files-changed-filter{
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
text-indent: -10px;
|
||||
.transition-custom(opacity 0.3s ease, background-color 0.3s ease);
|
||||
|
||||
&.inactive{
|
||||
opacity: 0.4;
|
||||
|
||||
i{
|
||||
color: @color_grey-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: darken(@color_grey-lighter, 5%);
|
||||
}
|
||||
|
||||
i{
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
.transition(color);
|
||||
}
|
||||
}
|
||||
|
||||
.changelog-file-changed{
|
||||
padding-bottom: 20px;
|
||||
border-top: 1px solid #cbd3dd;
|
||||
padding-top: 20px;
|
||||
line-height: 25px;
|
||||
font-weight: @font_light;
|
||||
position: relative;
|
||||
|
||||
&:before{
|
||||
content: '\f016';
|
||||
font-family: @icons;
|
||||
color: #98C74E;
|
||||
margin-right: 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
&:after{
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
right: 0px;
|
||||
top: 20px;
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
padding: 0px 5px;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
-webkit-transition: opacity .25s ease;
|
||||
-moz-transition: opacity .25s ease;
|
||||
-ms-transition: opacity .25s ease;
|
||||
-o-transition: opacity .25s ease;
|
||||
transition: opacity .25s ease;
|
||||
}
|
||||
|
||||
&.changelog-file-updated{
|
||||
&:before{
|
||||
content: '\f021';
|
||||
color: #ff4f26;
|
||||
}
|
||||
|
||||
&:hover:after{
|
||||
opacity: 1;
|
||||
color: #ff4f26;
|
||||
border: 1px solid #ff4f26;
|
||||
content: 'updated';
|
||||
}
|
||||
}
|
||||
|
||||
&.changelog-file-new{
|
||||
&:before{
|
||||
content: '\f067'
|
||||
}
|
||||
|
||||
&:hover:after{
|
||||
opacity: 1;
|
||||
color: #98C74E;
|
||||
border: 1px solid #98C74E;
|
||||
content: 'new';
|
||||
}
|
||||
}
|
||||
|
||||
&.changelog-file-removed{
|
||||
&:before{
|
||||
content: '\f00d';
|
||||
color: red;
|
||||
}
|
||||
|
||||
&:hover:after{
|
||||
opacity: 1;
|
||||
color: red;
|
||||
border: 1px solid red;
|
||||
content: 'removed';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input.changelog-input{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.changelog-scroll-to{
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
line-height: 73px;
|
||||
height: 100%;
|
||||
padding: 0px 10px 0px 25px;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
border-left: 1px solid lighten(@color_grey-light, 5%);
|
||||
.transition(background-color);
|
||||
color: darken(@color_grey-dark, 10%);
|
||||
|
||||
&:hover {
|
||||
|
||||
background-color: lighten(@color_grey-lighter, 2%);
|
||||
|
||||
.changelog-scroll-to-list{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
color: @color_black;
|
||||
}
|
||||
}
|
||||
|
||||
.changelog-scroll-to-list{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
background-color: white;
|
||||
z-index: 5;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-height: 225px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
border: 1px solid @color_grey-light;
|
||||
text-align: center;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.changelog-scroll-to-list-item{
|
||||
border-bottom: 1px solid lighten(@color_grey-light, 10%);
|
||||
|
||||
&:last-child{
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
padding: 8px 15px;
|
||||
color: inherit;
|
||||
display: block;
|
||||
.transition(color);
|
||||
|
||||
&:hover{
|
||||
color: @color_blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small) {
|
||||
.changelog-filters{
|
||||
text-align: left;
|
||||
padding: 20px 0 17px 15px;
|
||||
}
|
||||
|
||||
.changelog-filters .changelog-checkbox-label{
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.changelog-scroll-to{
|
||||
position: relative;
|
||||
|
||||
border: 1px solid @color_grey-light;
|
||||
margin: 15px 30px 15px 15px;
|
||||
line-height: 50px;
|
||||
padding: 0 15px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.changelog-scroll-to-list{
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.changelog-update-description {
|
||||
position: relative;
|
||||
padding-left: 0px;
|
||||
padding-top: 55px;
|
||||
}
|
||||
|
||||
.changelog-type{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.changelog-switch{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.changelog-files-changed, .changelog-item.changelog-view-files .changelog-update-descriptions{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.changelog-files-changed-toolbar:before{
|
||||
content: 'File filter';
|
||||
display: block;
|
||||
background-color: white;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.changelog-files-changed-filters li{
|
||||
float: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-top: 1px solid @color_grey-light;
|
||||
}
|
||||
|
||||
.changelog-files-changed-filter{
|
||||
text-indent: 0;
|
||||
padding: 5px 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
// Prism.js
|
||||
@import (less) '../libs/prism.css';
|
||||
|
||||
.code-highlight{
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&.code-highlight-with-label:after{
|
||||
content: attr(data-label);
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 4px;
|
||||
right: 71px;
|
||||
.fz(14);
|
||||
color: @color_grey-dark;
|
||||
border-radius: 3px;
|
||||
font-weight: @font_light;
|
||||
padding: 0px 14px;
|
||||
line-height: 35px;
|
||||
height: 35px;
|
||||
background-color: #fdfdfd;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:not(pre)>code[class*=language-], pre[class*=language-]{
|
||||
background-color: #fdfdfd;
|
||||
border: 1px solid lighten(@color_grey-light, 5%);
|
||||
}
|
||||
|
||||
.copy-code{
|
||||
.fz(14);
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-weight: @font_light;
|
||||
position: absolute;
|
||||
border: 1px solid lighten(@color_grey-light, 5%);
|
||||
padding: 9px 10px;
|
||||
border-radius: 0 3px 0 3px;
|
||||
z-index: 2;
|
||||
color: darken(@color_grey-dark, 20%);
|
||||
background-color: @color_grey-lighter;
|
||||
-webkit-transition: color .25s ease;
|
||||
-moz-transition: color .25s ease;
|
||||
-ms-transition: color .25s ease;
|
||||
-o-transition: color .25s ease;
|
||||
transition: color .25s ease;
|
||||
|
||||
&:before{
|
||||
content: '\e665';
|
||||
font-family: @icons-stroke;
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&.copy-code-error, &.copy-code-error:hover{
|
||||
color: @color_orange;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
color: @color_green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-highlight-attached{
|
||||
margin-bottom: 30px;
|
||||
|
||||
.code-highlight{
|
||||
margin-bottom: 0;
|
||||
|
||||
&:first-child pre[class*=language-]{
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
&:last-child pre[class*=language-]{
|
||||
border-radius: 0 0 3px 3px;
|
||||
border-bottom: 1px solid lighten(@color_grey-light, 7%);
|
||||
}
|
||||
|
||||
pre[class*=language-]{
|
||||
border-bottom: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-highlight-tabs.tabs{
|
||||
.content{
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.code-highlight-tabs-center{
|
||||
.content{
|
||||
padding: 35px 0;
|
||||
}
|
||||
|
||||
pre{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.steps {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
li{
|
||||
border: 1px solid transparent;
|
||||
|
||||
a{
|
||||
display: block;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
li.current{
|
||||
border: 1px solid @color_grey-light;
|
||||
background-color: @color_grey-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steps ul>li{
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
& a{
|
||||
color: @color_grey-dark;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
&.current a{
|
||||
color: @color_blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.code-highlight{
|
||||
.fz(14);
|
||||
}
|
||||
|
||||
.code-highlight-tabs.tabs .steps ul>li{
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.column-fill{
|
||||
background-color: @color_grey-light;
|
||||
border-radius: 3px;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
border: 1px solid @color_grey-lighter;
|
||||
cursor: default;
|
||||
-webkit-transition: color .25s ease, background-color .25s ease;
|
||||
-moz-transition: color .25s ease, background-color .25s ease;
|
||||
-ms-transition: color .25s ease, background-color .25s ease;
|
||||
-o-transition: color .25s ease, background-color .25s ease;
|
||||
transition: color .25s ease, background-color .25s ease;
|
||||
|
||||
&:hover{
|
||||
color: white;
|
||||
background-color: @color_grey-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.row-fill{
|
||||
margin: 0 0 30px 0;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
.contacts-info{
|
||||
padding: 60px;
|
||||
background-color: @color_grey-lighter;
|
||||
}
|
||||
|
||||
.contacts-info-title{
|
||||
text-transform: uppercase;
|
||||
.fz(15);
|
||||
color: @color_grey-dark;
|
||||
font-weight: @font_normal;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.contacts-info-description{
|
||||
.fz(13);
|
||||
color: @color_grey;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.contacts-info-data{
|
||||
margin-bottom: 20px;
|
||||
.fz(13);
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.contacts-info { padding: 30px; }
|
||||
}
|
||||
94
application/view/mockup/template/less/modules/_contacts.less
Normal file
94
application/view/mockup/template/less/modules/_contacts.less
Normal file
@@ -0,0 +1,94 @@
|
||||
.contacts{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.contacts-inputs{
|
||||
padding: 0 0 15px 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.contacts-item{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.contacts-title{
|
||||
.fz(32);
|
||||
margin-bottom: 40px;
|
||||
color: @color_blue;
|
||||
}
|
||||
|
||||
.contacts-label{
|
||||
.fz(14);
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-weight: @font_normal;
|
||||
color: @color_grey-dark;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.contacts-radio, .contacts-checkbox{
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
font-weight: @font_light;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.contacts-input{
|
||||
font-size: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
box-shadow: none;
|
||||
padding-left: 0;
|
||||
padding-top: 0;
|
||||
line-height: 1;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:focus{
|
||||
border-color: @color_green;
|
||||
}
|
||||
|
||||
&:-webkit-autofill,
|
||||
&:-webkit-autofill:hover,
|
||||
&:-webkit-autofill:focus,
|
||||
&:-webkit-autofill:active {
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
textarea.contacts-input{
|
||||
height: 142px;
|
||||
}
|
||||
|
||||
.contacts-success{
|
||||
display: none;
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
.fz(20);
|
||||
font-weight: @font_light;
|
||||
border: 1px solid @color_green;
|
||||
padding: 30px 30px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 99;
|
||||
border-radius: 3px;
|
||||
line-height: 1.6;
|
||||
.transform(translateX(-50%) translateY(-50%));
|
||||
padding-left: 100px;
|
||||
|
||||
i{
|
||||
display: block;
|
||||
font-size: 45px;
|
||||
color: @color_green;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 50%;
|
||||
margin-top: -22px;
|
||||
}
|
||||
}
|
||||
56
application/view/mockup/template/less/modules/_donate.less
Normal file
56
application/view/mockup/template/less/modules/_donate.less
Normal file
@@ -0,0 +1,56 @@
|
||||
.donate-money-list{
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&:after{
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.donate-money{
|
||||
float: left;
|
||||
margin-right: 40px;
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
width: 140px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.donate-summ{
|
||||
display: block;
|
||||
background-color: @color_grey-lighter;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 54px;
|
||||
font-weight: 100;
|
||||
color: @color_black;
|
||||
|
||||
.currency{
|
||||
font-size: 31px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.custom-plus{
|
||||
font-size: 35px;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.donate-button{
|
||||
display: block;
|
||||
line-height: 37px;
|
||||
font-size: 15px;
|
||||
text-transform: uppercase;
|
||||
color: @color_blue;
|
||||
font-weight: 300;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
.faq-article{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.faq-category-title{
|
||||
.fz(34);
|
||||
position: relative;
|
||||
padding: 20px 30px 20px 0;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
|
||||
&:before{
|
||||
content: attr(data-icon);
|
||||
color: @color_grey-dark;
|
||||
font-family: @icons-stroke;
|
||||
display: block;
|
||||
right: 0px;
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
speak: none;
|
||||
top: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-article-title{
|
||||
padding: 15px 0;
|
||||
color: @color_blue;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
.fz(23);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
.faq-table-of-contents{
|
||||
border-radius: 3px;
|
||||
margin-bottom: 30px;
|
||||
border: 1px solid @color_grey-light;
|
||||
padding: 30px;
|
||||
background-color: @color_grey-lighter;
|
||||
position: relative;
|
||||
|
||||
&:before{
|
||||
content: attr(data-icon);
|
||||
color: @color_grey-dark;
|
||||
font-family: @icons-stroke;
|
||||
display: block;
|
||||
right: 30px;
|
||||
font-size: 35px;
|
||||
position: absolute;
|
||||
speak: none;
|
||||
top: 30px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-table-of-contents-title{
|
||||
.fz(22);
|
||||
line-height: 1.4;
|
||||
font-weight: @font_light;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
.faq-table-of-contents-list{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
line-height: 2;
|
||||
font-weight: @font_light;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.faq-table-of-contents{
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.faq-table-of-contents:before{
|
||||
font-size: 25px;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
133
application/view/mockup/template/less/modules/_faq.less
Normal file
133
application/view/mockup/template/less/modules/_faq.less
Normal file
@@ -0,0 +1,133 @@
|
||||
// FAQ
|
||||
.faq{
|
||||
margin: 0 0 30px 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.faq-item{
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child{
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-question{
|
||||
.fz(20);
|
||||
line-height: 1.4;
|
||||
padding: 10px 30px 10px 0;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&:before{
|
||||
display: block;
|
||||
content: '\f107';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-top: -16px;
|
||||
top: 50%;
|
||||
font-family: @icons;
|
||||
}
|
||||
|
||||
&.active:before{
|
||||
content: '\f106';
|
||||
}
|
||||
}
|
||||
|
||||
.faq-answer{
|
||||
padding: 0 0 30px 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.faq-keyword{
|
||||
color: @color_blue;
|
||||
}
|
||||
|
||||
.faq-filter{
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
|
||||
&:before{
|
||||
position: absolute;
|
||||
content: "\f002";
|
||||
display: block;
|
||||
font-family: @icons;
|
||||
left: 0px;
|
||||
top: 2px;
|
||||
color: #A9A9B1;
|
||||
font-size: 16px;
|
||||
line-height: 49px;
|
||||
padding: 0 1px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
||||
input{
|
||||
width: 100%;
|
||||
border: none;
|
||||
display: block;
|
||||
line-height: 33px;
|
||||
padding: 10px 0;
|
||||
outline: none;
|
||||
font-weight: @font_light;
|
||||
.fz(20);
|
||||
|
||||
.placeholder({
|
||||
font-weight: @font_light;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FAQ-GRID
|
||||
.faq-grid{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.faq-grid-question{
|
||||
margin-bottom: 15px;
|
||||
.fz(20);
|
||||
}
|
||||
|
||||
.faq-grid-answer{
|
||||
color: @color_grey-dark;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.faq-grid-show-more{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
color: @color_blue;
|
||||
border: 1px solid @color_blue;
|
||||
padding: 0 20px;
|
||||
border-radius: 25px;
|
||||
line-height: 40px;
|
||||
font-weight: @font_normal;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin: 30px 0;
|
||||
|
||||
i{
|
||||
font-size: 14px;
|
||||
margin-left: 6px;
|
||||
margin-right: -2px;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small) {
|
||||
.faq-grid{
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
.featured-boxes{
|
||||
border: 1px solid #e9eaec;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
margin-bottom: 100px;
|
||||
|
||||
&:after{
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-boxes-item{
|
||||
float: left;
|
||||
border-right: 1px solid #e9eaec;
|
||||
border-bottom: 1px solid #e9eaec;
|
||||
width: 33.33%;
|
||||
display: block;
|
||||
padding: 70px 50px 55px;
|
||||
text-align: center;
|
||||
|
||||
|
||||
&:nth-child(3n+3){
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-boxes-item-ico{
|
||||
max-height: 150px;
|
||||
max-width: 100%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.featured-boxes-item-pretitle{
|
||||
font-size: 18px;
|
||||
font-weight: @font_light;
|
||||
color: @color_grey-light;
|
||||
line-height: 23px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.featured-boxes-item-title{
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
font-weight: @font_light;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.featured-boxes-item-description{
|
||||
font-size: 16px;
|
||||
color: lighten(@color_black, 30%);
|
||||
line-height: 24px;
|
||||
font-weight: @font_light;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.featured-boxes-item-button{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media all and (max-width: @break-medium){
|
||||
.featured-boxes-item{
|
||||
padding: 50px 20px 50px;
|
||||
}
|
||||
|
||||
.featured-boxes-item-ico{
|
||||
max-height: 110px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media all and (max-width: @break-small){
|
||||
.featured-boxes{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.featured-boxes-item-ico{
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
.featured-boxes-item{
|
||||
float: none;
|
||||
border: 1px solid #e9eaec;
|
||||
width: 380px;
|
||||
max-width: 95%;
|
||||
margin: 0 auto 40px;
|
||||
|
||||
&:nth-child(3n+3){
|
||||
border-right: 1px solid #e9eaec;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin: 0 auto 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
.file-tree-text{
|
||||
list-style-type: none;
|
||||
font-size: 14px;
|
||||
padding: 25px 30px;
|
||||
margin: 0 0 30px 0;
|
||||
background-color: @color_grey-lighter;
|
||||
border-radius: 3px;
|
||||
border: 1px solid @color_grey-light;
|
||||
font-family: Menlo, Monaco, Consolas, 'Courier New', monos;
|
||||
overflow: auto;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
|
||||
ul{
|
||||
list-style-type: none;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.file-tree-text-comment{
|
||||
color: @color_grey-dark;
|
||||
}
|
||||
109
application/view/mockup/template/less/modules/_file-tree.less
Normal file
109
application/view/mockup/template/less/modules/_file-tree.less
Normal file
@@ -0,0 +1,109 @@
|
||||
.file-tree-title{
|
||||
background-color: @color_grey-lighter;
|
||||
margin: 0;
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid @color_grey-light;
|
||||
border-left: 1px solid @color_grey-light;
|
||||
border-right: 1px solid @color_grey-light;
|
||||
border-radius: 3px 3px 0 0;
|
||||
position: relative;
|
||||
padding-right: 300px;
|
||||
line-height: 1.4;
|
||||
|
||||
&:after{
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.file-tree-description{
|
||||
.fz(13);
|
||||
vertical-align: middle;
|
||||
color: @color_grey-dark;
|
||||
}
|
||||
|
||||
.file-tree-buttons{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 300px;
|
||||
padding: 0 20px;
|
||||
line-height: 1.4;
|
||||
text-align: right;
|
||||
.fz(14);
|
||||
|
||||
li{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
cursor: pointer;
|
||||
padding: 15px 0;
|
||||
|
||||
&:first-child{
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 12px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-tree-list, .file-tree-list ul {
|
||||
list-style-type: none;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.file-tree-list{
|
||||
.fz(16);
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 0 0 3px 3px;
|
||||
padding: 20px 25px 25px;
|
||||
font-weight: @font_light;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.file-tree-list ul {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.file-tree-list li{
|
||||
line-height: 1.8;
|
||||
&:before{
|
||||
font: normal normal normal 14px/1 @icons;
|
||||
margin-right: 8px;
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
transform: translate(0,0);
|
||||
display: inline-block;
|
||||
vertical-align: 0px;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
webkit-backface-visibility: hidden;
|
||||
-webkit-transform: translateZ(0) scale(1.0, 1.0);
|
||||
}
|
||||
|
||||
&.is-folder:before{ width: 16px;content: "\f114"; color: @color_blue;}
|
||||
&.is-folder.items-expanded:before{ width: 16px;content: "\f115"; color: @color_blue;}
|
||||
&.is-file:before{ width: 16px;content: "\f016"; color: @color_green; font-size: 15px; text-indent: 1px; }
|
||||
}
|
||||
|
||||
.file-tree-list li.contains-items {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-tree-list li.items-expanded {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.file-tree-title{ padding: 15px 0 15px 20px; }
|
||||
.file-tree-buttons{ display: none; }
|
||||
}
|
||||
234
application/view/mockup/template/less/modules/_footer.less
Normal file
234
application/view/mockup/template/less/modules/_footer.less
Normal file
@@ -0,0 +1,234 @@
|
||||
.footer{
|
||||
padding: 40px 0;
|
||||
background-color: @color_grey-lighter;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.footer-is-fixed{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.copyright{
|
||||
margin: 0;
|
||||
color: @color_grey-dark;
|
||||
.fz(12);
|
||||
|
||||
a{
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.slogan{
|
||||
.fz(12);
|
||||
line-height: 1.1;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
margin: 0;
|
||||
color: @color_grey-dark;
|
||||
}
|
||||
|
||||
.footer-wrapper{
|
||||
position: relative;
|
||||
padding-right: 100px;
|
||||
}
|
||||
|
||||
.scroll-top{
|
||||
position: absolute;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid @color_grey-light;
|
||||
color: darken(@color_grey-dark, 10%);
|
||||
right: 0;
|
||||
top: 2px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 38px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.footer-menu{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
.fz(12);
|
||||
margin-bottom: 5px;
|
||||
font-weight: @font_light;
|
||||
|
||||
li{
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
margin-right: 5px;
|
||||
padding-right: 5px;
|
||||
position: relative;
|
||||
|
||||
&:after{
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 9px;
|
||||
width: 1px;
|
||||
display: block;
|
||||
right: -2px;
|
||||
top: 7px;
|
||||
background-color: @color_grey-dark;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a{
|
||||
color: @color_grey-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DOCS VERSION
|
||||
.docs-version{
|
||||
position: absolute;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid @color_grey-light;
|
||||
color: darken(@color_grey-dark, 10%);
|
||||
right: 45px;
|
||||
top: 2px;
|
||||
text-align: center;
|
||||
line-height: 38px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
|
||||
ul{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
width: 40px;
|
||||
left: -1px;
|
||||
display: none;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-right: 1px solid @color_grey-light;
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
bottom: -3px;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
left: 17px;
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
.transform(rotate(45deg));
|
||||
}
|
||||
|
||||
li{
|
||||
line-height: 38px;
|
||||
height: 40px;
|
||||
border-left: 1px solid @color_grey-light;
|
||||
border-top: 1px solid @color_grey-light;
|
||||
border-right: 1px solid @color_grey-light;
|
||||
background-color: white;
|
||||
|
||||
&:first-child{
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
border-radius: 0 0 3px 3px;
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.docs-current-version{
|
||||
display: block;
|
||||
}
|
||||
|
||||
// FOOTER EXTENDED
|
||||
.footer-extended{
|
||||
background-color: @color_grey-lighter;
|
||||
.fz(12);
|
||||
border-top: 1px solid lighten(@color_grey-light, 8%);
|
||||
}
|
||||
|
||||
.footer-extended-container{
|
||||
border-bottom: 1px solid lighten(@color_grey-light, 2%);
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.footer-extended-menu-title{
|
||||
color: @color_blue;
|
||||
font-size: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer-extended-menu-list{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
li a{
|
||||
// color: @color_grey-dark;
|
||||
color: lighten(@color_black, 20%);
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.text-footer{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small) {
|
||||
.footer-logo-wrapper{
|
||||
text-align: center;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.footer-menu, .copyright {
|
||||
text-align: center !important;
|
||||
}
|
||||
.footer-wrapper{
|
||||
padding-right: 0;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.docs-version{
|
||||
right: auto;
|
||||
left: 50%;
|
||||
margin-left: -50px;
|
||||
}
|
||||
|
||||
.scroll-top{
|
||||
right: auto;
|
||||
left: 50%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.footer-extended-menu{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.footer-extended-container{
|
||||
padding: 40px 0 0;
|
||||
}
|
||||
}
|
||||
683
application/view/mockup/template/less/modules/_forms.less
Normal file
683
application/view/mockup/template/less/modules/_forms.less
Normal file
@@ -0,0 +1,683 @@
|
||||
hr {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
border: 0;
|
||||
border-top: 1px solid @color_grey-lighter;
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
.sr-only-focusable:active,
|
||||
.sr-only-focusable:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
font-size: 21px;
|
||||
line-height: inherit;
|
||||
color: #333333;
|
||||
border: 0;
|
||||
border-bottom: 1px solid @color_grey-lighter;
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
font-weight: @font_light;
|
||||
}
|
||||
input[type="search"] {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin: 4px 0 0;
|
||||
margin-top: 1px \9;
|
||||
line-height: normal;
|
||||
outline: none !important;
|
||||
}
|
||||
input[type="file"] {
|
||||
display: block;
|
||||
}
|
||||
input[type="range"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
select[multiple],
|
||||
select[size] {
|
||||
height: auto;
|
||||
}
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
outline: thin dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
output {
|
||||
display: block;
|
||||
padding-top: 7px;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: @color_grey-dark;
|
||||
}
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #555555;
|
||||
background-color: #ffffff;
|
||||
background-image: none;
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
||||
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
font-weight: @font_light;
|
||||
}
|
||||
.form-control:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.form-control{
|
||||
.placeholder({
|
||||
color: #999999;
|
||||
opacity: 1;
|
||||
});
|
||||
}
|
||||
.form-control[disabled],
|
||||
.form-control[readonly],
|
||||
fieldset[disabled] .form-control {
|
||||
background-color: @color_grey-lighter;
|
||||
opacity: 1;
|
||||
}
|
||||
.form-control[disabled],
|
||||
fieldset[disabled] .form-control {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
textarea.form-control {
|
||||
height: auto;
|
||||
}
|
||||
input[type="search"] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
line-height: 34px;
|
||||
}
|
||||
input[type="date"].input-sm,
|
||||
input[type="time"].input-sm,
|
||||
input[type="datetime-local"].input-sm,
|
||||
input[type="month"].input-sm,
|
||||
.input-group-sm input[type="date"],
|
||||
.input-group-sm input[type="time"],
|
||||
.input-group-sm input[type="datetime-local"],
|
||||
.input-group-sm input[type="month"] {
|
||||
line-height: 30px;
|
||||
}
|
||||
input[type="date"].input-lg,
|
||||
input[type="time"].input-lg,
|
||||
input[type="datetime-local"].input-lg,
|
||||
input[type="month"].input-lg,
|
||||
.input-group-lg input[type="date"],
|
||||
.input-group-lg input[type="time"],
|
||||
.input-group-lg input[type="datetime-local"],
|
||||
.input-group-lg input[type="month"] {
|
||||
line-height: 46px;
|
||||
}
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.radio,
|
||||
.checkbox {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.radio label,
|
||||
.checkbox label {
|
||||
min-height: 20px;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
font-weight: @font_light;
|
||||
cursor: pointer;
|
||||
}
|
||||
.radio input[type="radio"],
|
||||
.radio-inline input[type="radio"],
|
||||
.checkbox input[type="checkbox"],
|
||||
.checkbox-inline input[type="checkbox"] {
|
||||
position: absolute;
|
||||
margin-left: -20px;
|
||||
margin-top: 4px \9;
|
||||
}
|
||||
.radio + .radio,
|
||||
.checkbox + .checkbox {
|
||||
margin-top: -5px;
|
||||
}
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
.radio-inline + .radio-inline,
|
||||
.checkbox-inline + .checkbox-inline {
|
||||
margin-top: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
input[type="radio"][disabled],
|
||||
input[type="checkbox"][disabled],
|
||||
input[type="radio"].disabled,
|
||||
input[type="checkbox"].disabled,
|
||||
fieldset[disabled] input[type="radio"],
|
||||
fieldset[disabled] input[type="checkbox"] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.radio-inline.disabled,
|
||||
.checkbox-inline.disabled,
|
||||
fieldset[disabled] .radio-inline,
|
||||
fieldset[disabled] .checkbox-inline {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.radio.disabled label,
|
||||
.checkbox.disabled label,
|
||||
fieldset[disabled] .radio label,
|
||||
fieldset[disabled] .checkbox label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.form-control-static {
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
margin-bottom: 0;
|
||||
min-height: 34px;
|
||||
}
|
||||
.form-control-static.input-lg,
|
||||
.form-control-static.input-sm {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.input-sm {
|
||||
height: 30px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
select.input-sm {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
textarea.input-sm,
|
||||
select[multiple].input-sm {
|
||||
height: auto;
|
||||
}
|
||||
.form-group-sm .form-control {
|
||||
height: 30px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
select.form-group-sm .form-control {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
textarea.form-group-sm .form-control,
|
||||
select[multiple].form-group-sm .form-control {
|
||||
height: auto;
|
||||
}
|
||||
.form-group-sm .form-control-static {
|
||||
height: 30px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
min-height: 32px;
|
||||
}
|
||||
.input-lg {
|
||||
height: 46px;
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
border-radius: 3px;
|
||||
}
|
||||
select.input-lg {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
}
|
||||
textarea.input-lg,
|
||||
select[multiple].input-lg {
|
||||
height: auto;
|
||||
}
|
||||
.form-group-lg .form-control {
|
||||
height: 46px;
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
border-radius: 3px;
|
||||
}
|
||||
select.form-group-lg .form-control {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
}
|
||||
textarea.form-group-lg .form-control,
|
||||
select[multiple].form-group-lg .form-control {
|
||||
height: auto;
|
||||
}
|
||||
.form-group-lg .form-control-static {
|
||||
height: 46px;
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
min-height: 38px;
|
||||
}
|
||||
.has-feedback {
|
||||
position: relative;
|
||||
}
|
||||
.has-feedback .form-control {
|
||||
padding-right: 42.5px;
|
||||
}
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.input-lg + .form-control-feedback {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
}
|
||||
.input-sm + .form-control-feedback {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.has-success .help-block,
|
||||
.has-success .control-label,
|
||||
.has-success .radio,
|
||||
.has-success .checkbox,
|
||||
.has-success .radio-inline,
|
||||
.has-success .checkbox-inline,
|
||||
.has-success.radio label,
|
||||
.has-success.checkbox label,
|
||||
.has-success.radio-inline label,
|
||||
.has-success.checkbox-inline label {
|
||||
color: @color_green;
|
||||
}
|
||||
.has-success .form-control {
|
||||
border-color: @color_green;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.has-success .input-group-addon {
|
||||
color: @color_green;
|
||||
border-color: @color_green;
|
||||
background-color: #dff0d8;
|
||||
}
|
||||
.has-success .form-control-feedback {
|
||||
color: @color_green;
|
||||
}
|
||||
.has-warning .help-block,
|
||||
.has-warning .control-label,
|
||||
.has-warning .radio,
|
||||
.has-warning .checkbox,
|
||||
.has-warning .radio-inline,
|
||||
.has-warning .checkbox-inline,
|
||||
.has-warning.radio label,
|
||||
.has-warning.checkbox label,
|
||||
.has-warning.radio-inline label,
|
||||
.has-warning.checkbox-inline label {
|
||||
color: @color_orange;
|
||||
}
|
||||
.has-warning .form-control {
|
||||
border-color: @color_orange;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.has-warning .input-group-addon {
|
||||
color: @color_orange;
|
||||
border-color: @color_orange;
|
||||
background-color: #fcf8e3;
|
||||
}
|
||||
.has-warning .form-control-feedback {
|
||||
color: @color_orange;
|
||||
}
|
||||
.has-error .help-block,
|
||||
.has-error .control-label,
|
||||
.has-error .radio,
|
||||
.has-error .checkbox,
|
||||
.has-error .radio-inline,
|
||||
.has-error .checkbox-inline,
|
||||
.has-error.radio label,
|
||||
.has-error.checkbox label,
|
||||
.has-error.radio-inline label,
|
||||
.has-error.checkbox-inline label {
|
||||
color: @color_red;
|
||||
}
|
||||
.has-error .form-control {
|
||||
border-color: @color_red;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.has-error .form-control:focus {
|
||||
border-color: #843534;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
|
||||
}
|
||||
.has-error .input-group-addon {
|
||||
color: @color_red;
|
||||
border-color: @color_red;
|
||||
background-color: #f2dede;
|
||||
}
|
||||
.has-error .form-control-feedback {
|
||||
color: @color_red;
|
||||
}
|
||||
.has-feedback label ~ .form-control-feedback {
|
||||
top: 25px;
|
||||
}
|
||||
.has-feedback label.sr-only ~ .form-control-feedback {
|
||||
top: 0;
|
||||
}
|
||||
.help-block {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
color: #737373;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.form-inline .form-group {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-inline .form-control {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-inline .form-control-static {
|
||||
display: inline-block;
|
||||
}
|
||||
.form-inline .input-group {
|
||||
display: inline-table;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-inline .input-group .input-group-addon,
|
||||
.form-inline .input-group .input-group-btn,
|
||||
.form-inline .input-group .form-control {
|
||||
width: auto;
|
||||
}
|
||||
.form-inline .input-group > .form-control {
|
||||
width: 100%;
|
||||
}
|
||||
.form-inline .control-label {
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-inline .radio,
|
||||
.form-inline .checkbox {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form-inline .radio label,
|
||||
.form-inline .checkbox label {
|
||||
padding-left: 0;
|
||||
}
|
||||
.form-inline .radio input[type="radio"],
|
||||
.form-inline .checkbox input[type="checkbox"] {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
}
|
||||
.form-inline .has-feedback .form-control-feedback {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.form-horizontal .radio,
|
||||
.form-horizontal .checkbox,
|
||||
.form-horizontal .radio-inline,
|
||||
.form-horizontal .checkbox-inline {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 7px;
|
||||
}
|
||||
.form-horizontal .radio,
|
||||
.form-horizontal .checkbox {
|
||||
min-height: 27px;
|
||||
}
|
||||
.form-horizontal .form-group {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.form-horizontal .control-label {
|
||||
text-align: right;
|
||||
margin-bottom: 0;
|
||||
padding-top: 7px;
|
||||
}
|
||||
}
|
||||
.form-horizontal .has-feedback .form-control-feedback {
|
||||
right: 15px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.form-horizontal .form-group-lg .control-label {
|
||||
padding-top: 14.333333px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.form-horizontal .form-group-sm .control-label {
|
||||
padding-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
position: relative;
|
||||
display: table;
|
||||
border-collapse: separate;
|
||||
}
|
||||
.input-group[class*="col-"] {
|
||||
float: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.input-group .form-control {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.input-group-lg > .form-control,
|
||||
.input-group-lg > .input-group-addon,
|
||||
.input-group-lg > .input-group-btn > .btn {
|
||||
height: 46px;
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
border-radius: 6px;
|
||||
}
|
||||
select.input-group-lg > .form-control,
|
||||
select.input-group-lg > .input-group-addon,
|
||||
select.input-group-lg > .input-group-btn > .btn {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
}
|
||||
textarea.input-group-lg > .form-control,
|
||||
textarea.input-group-lg > .input-group-addon,
|
||||
textarea.input-group-lg > .input-group-btn > .btn,
|
||||
select[multiple].input-group-lg > .form-control,
|
||||
select[multiple].input-group-lg > .input-group-addon,
|
||||
select[multiple].input-group-lg > .input-group-btn > .btn {
|
||||
height: auto;
|
||||
}
|
||||
.input-group-sm > .form-control,
|
||||
.input-group-sm > .input-group-addon,
|
||||
.input-group-sm > .input-group-btn > .btn {
|
||||
height: 30px;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
select.input-group-sm > .form-control,
|
||||
select.input-group-sm > .input-group-addon,
|
||||
select.input-group-sm > .input-group-btn > .btn {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
textarea.input-group-sm > .form-control,
|
||||
textarea.input-group-sm > .input-group-addon,
|
||||
textarea.input-group-sm > .input-group-btn > .btn,
|
||||
select[multiple].input-group-sm > .form-control,
|
||||
select[multiple].input-group-sm > .input-group-addon,
|
||||
select[multiple].input-group-sm > .input-group-btn > .btn {
|
||||
height: auto;
|
||||
}
|
||||
.input-group-addon,
|
||||
.input-group-btn,
|
||||
.input-group .form-control {
|
||||
display: table-cell;
|
||||
}
|
||||
.input-group-addon:not(:first-child):not(:last-child),
|
||||
.input-group-btn:not(:first-child):not(:last-child),
|
||||
.input-group .form-control:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
.input-group-addon,
|
||||
.input-group-btn {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.input-group-addon {
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: #555555;
|
||||
text-align: center;
|
||||
background-color: @color_grey-lighter;
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.input-group-addon.input-sm {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.input-group-addon.input-lg {
|
||||
padding: 10px 16px;
|
||||
font-size: 18px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.input-group-addon input[type="radio"],
|
||||
.input-group-addon input[type="checkbox"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
.input-group .form-control:first-child,
|
||||
.input-group-addon:first-child,
|
||||
.input-group-btn:first-child > .btn,
|
||||
.input-group-btn:first-child > .btn-group > .btn,
|
||||
.input-group-btn:first-child > .dropdown-toggle,
|
||||
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
|
||||
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.input-group-addon:first-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.input-group .form-control:last-child,
|
||||
.input-group-addon:last-child,
|
||||
.input-group-btn:last-child > .btn,
|
||||
.input-group-btn:last-child > .btn-group > .btn,
|
||||
.input-group-btn:last-child > .dropdown-toggle,
|
||||
.input-group-btn:first-child > .btn:not(:first-child),
|
||||
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.input-group-addon:last-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.input-group-btn {
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.input-group-btn > .btn {
|
||||
position: relative;
|
||||
}
|
||||
.input-group-btn > .btn + .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.input-group-btn > .btn:hover,
|
||||
.input-group-btn > .btn:focus,
|
||||
.input-group-btn > .btn:active {
|
||||
z-index: 2;
|
||||
}
|
||||
.input-group-btn:first-child > .btn,
|
||||
.input-group-btn:first-child > .btn-group {
|
||||
margin-right: -1px;
|
||||
}
|
||||
.input-group-btn:last-child > .btn,
|
||||
.input-group-btn:last-child > .btn-group {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after,
|
||||
.form-horizontal .form-group:before,
|
||||
.form-horizontal .form-group:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after,
|
||||
.form-horizontal .form-group:after {
|
||||
clear: both;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
// SlickNav
|
||||
@import (less) '../libs/gifplayer.css';
|
||||
|
||||
.gif-player{
|
||||
border: 1px solid @color_grey-light;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
margin-bottom: 30px;
|
||||
max-width: 100%;
|
||||
|
||||
.gifplayer-wrapper{
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
width: auto !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gp-gif-element{
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
ins.play-gif{
|
||||
font-family: @icons;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: 24px;
|
||||
padding-left: 5px;
|
||||
line-height: 70px;
|
||||
position: absolute;
|
||||
left: 50% !important;
|
||||
top: 50% !important;
|
||||
margin-left: -40px;
|
||||
margin-top: -40px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
.grid-view{
|
||||
|
||||
}
|
||||
|
||||
.grid-view-elem{
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
background-color: @color_grey-lighter;
|
||||
}
|
||||
|
||||
.grid-view-elem-title{
|
||||
.fz(16);
|
||||
margin-bottom: 10px;
|
||||
font-weight: @font_normal;
|
||||
}
|
||||
|
||||
.grid-view-title-descr{
|
||||
.fz(14);
|
||||
margin-left: 10px;
|
||||
vertical-align: top;
|
||||
font-weight: @font_light;
|
||||
}
|
||||
|
||||
.grid-view-elem-description{
|
||||
.fz(14);
|
||||
line-height: 1.5;
|
||||
font-weight: @font_light;
|
||||
margin: 0;
|
||||
}
|
||||
181
application/view/mockup/template/less/modules/_header-back.less
Normal file
181
application/view/mockup/template/less/modules/_header-back.less
Normal file
@@ -0,0 +1,181 @@
|
||||
.header-back{
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
padding: 200px 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-back-large{
|
||||
padding: 250px 0 270px 0;
|
||||
}
|
||||
|
||||
.header-back-small{
|
||||
padding: 140px 0 70px 0;
|
||||
}
|
||||
|
||||
.header-back-light{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-back-full-page{
|
||||
display: table;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
min-height: 600px;
|
||||
position: relative;
|
||||
|
||||
.header-back-container{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-back-default{
|
||||
background-image: url(../img/backgrounds/6.jpg);
|
||||
background-position: bottom;
|
||||
}
|
||||
|
||||
.header-back-simple{
|
||||
background-image: url(../img/backgrounds/2.jpg);
|
||||
}
|
||||
|
||||
.header-back-bg{
|
||||
background-image: url(../img/backgrounds/1.jpg);
|
||||
}
|
||||
|
||||
.header-back-bg-2{
|
||||
background-image: url(../img/backgrounds/3.jpg);
|
||||
}
|
||||
|
||||
.header-back-bg-3{
|
||||
background-image: url(../img/backgrounds/5.jpg);
|
||||
}
|
||||
|
||||
.header-back-bg-web{
|
||||
background-image: url(../img/backgrounds/8.jpg);
|
||||
}
|
||||
|
||||
.header-back-bg-app{
|
||||
background-image: url(../img/backgrounds/9.jpg);
|
||||
}
|
||||
|
||||
.header-back-bg-soft{
|
||||
background-image: url(../img/backgrounds/10.png);
|
||||
background-position: center bottom;
|
||||
}
|
||||
.header-back-video-trigger-bg {
|
||||
background-image: url(../img/backgrounds/11.jpg);
|
||||
background-position: center bottom;
|
||||
}
|
||||
.header-back-bg-subscribe {
|
||||
background-image: url(../img/backgrounds/12.jpg);
|
||||
}
|
||||
|
||||
.header-back-buttons{
|
||||
.button{
|
||||
margin-right: 20px;
|
||||
min-width: 180px;
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.next-section{
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
cursor: pointer;
|
||||
font-size: 26px;
|
||||
line-height: 38px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
|
||||
.animation(next-section 3s Ease-in-out infinite);
|
||||
}
|
||||
|
||||
.next-section-light{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-back-video{
|
||||
|
||||
.header-back-container{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background-color: fade(darken(@color_black, 10%),60%);
|
||||
}
|
||||
|
||||
.video-js{
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.header-back-web{
|
||||
padding: 170px 0 0;
|
||||
margin-bottom: 200px;
|
||||
}
|
||||
|
||||
.header-back-app{
|
||||
padding: 190px 0 100px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.header-back-soft{
|
||||
padding: 200px 0 100px;
|
||||
margin-bottom: 200px;
|
||||
}
|
||||
|
||||
.keyframes(next-section; {
|
||||
0%{
|
||||
.transform(translateY(-10px));
|
||||
}
|
||||
|
||||
50%{
|
||||
.transform(translateY(10px));
|
||||
}
|
||||
|
||||
100%{
|
||||
.transform(translateY(-10px));
|
||||
}
|
||||
});
|
||||
|
||||
.media-mixin(@break) when (@break = @break-large-x){
|
||||
.header-back-soft {
|
||||
margin-bottom: 150px;
|
||||
}
|
||||
}
|
||||
.media-mixin(@break) when (@break = @break-medium){
|
||||
.header-back-soft {
|
||||
margin-bottom: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small){
|
||||
.header-back-soft {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.header-back-large{
|
||||
padding: 150px 0;
|
||||
}
|
||||
|
||||
.header-back-buttons{
|
||||
.button{
|
||||
width: 80%;
|
||||
margin: 0 auto 20px auto;
|
||||
}
|
||||
}
|
||||
.header-back-soft {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
44
application/view/mockup/template/less/modules/_header.less
Normal file
44
application/view/mockup/template/less/modules/_header.less
Normal file
@@ -0,0 +1,44 @@
|
||||
// HEADER
|
||||
.header{
|
||||
padding: 20px 0;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
border-top: 1px solid @color_grey-light;
|
||||
z-index: 5;
|
||||
background-size: cover;
|
||||
.transition(background-color);
|
||||
|
||||
// HEADER HELPERS
|
||||
&.small{ padding: 10px 0; }
|
||||
&.large{ padding: 30px 0; }
|
||||
}
|
||||
|
||||
.header-one-page{
|
||||
border-top: 0;
|
||||
border-bottom-color: lighten(@color_grey-light, 10%);
|
||||
background-color: @color_grey-lighter;
|
||||
|
||||
&.header-fixed{
|
||||
z-index: 5;
|
||||
left: 0;
|
||||
border-bottom-color: lighten(@color_grey-light, 10%);
|
||||
background-color: @color_grey-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
.header-over{
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.header-fixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1) !important;
|
||||
|
||||
&.header-fixed-light{
|
||||
background-color: #263952;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
.info-demiliter{
|
||||
padding: 30px 0;
|
||||
border-bottom: 1px solid lighten(@color_grey-light, 5%);
|
||||
border-top: 1px solid lighten(@color_grey-light, 5%);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.info-delimiter-title{
|
||||
line-height: 42px;
|
||||
font-size: 26px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.info-delimiter-button{
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
|
||||
.button{
|
||||
margin-right: 15px;
|
||||
|
||||
&:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
49
application/view/mockup/template/less/modules/_info.less
Normal file
49
application/view/mockup/template/less/modules/_info.less
Normal file
@@ -0,0 +1,49 @@
|
||||
.info{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.info-content{
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
.info-title{
|
||||
.fz(24);
|
||||
line-height: 1.4;
|
||||
color: white;
|
||||
background-color: @color_blue;
|
||||
padding: 16px 50px 16px 30px;
|
||||
margin: 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.info-close{
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
top: 50%;
|
||||
margin-top: -14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.info-content-item{
|
||||
padding: 20px 30px;
|
||||
|
||||
&:nth-child(odd){
|
||||
background-color: @color_grey-lighter;
|
||||
}
|
||||
&:nth-child(even){
|
||||
background-color: darken(@color_grey-lighter, 5%);
|
||||
}
|
||||
}
|
||||
.info-content-item-title{
|
||||
.fz(14);
|
||||
font-weight: @font_bold;
|
||||
color: @color_black;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.info-content-item-text{
|
||||
.fz(14);
|
||||
color: @color_black;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
|
||||
.languages{
|
||||
font-weight: @font_light;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.language-active{
|
||||
line-height: 40px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
|
||||
.fa{
|
||||
font-size: 12px;
|
||||
margin-left: 3px;
|
||||
top: -1px;
|
||||
position: relative;
|
||||
color: @color_grey;
|
||||
}
|
||||
}
|
||||
|
||||
.languages-light{
|
||||
color: white;
|
||||
|
||||
.fa{
|
||||
color: @color_grey-light;
|
||||
}
|
||||
}
|
||||
|
||||
.languages-list{
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
top: 47px;
|
||||
left: 50%;
|
||||
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1);
|
||||
.transform(translateX(-50%));
|
||||
|
||||
.header.header-fixed &{
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
&:after{
|
||||
content: '\f0d8';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
font-family: @icons;
|
||||
top: -14px;
|
||||
left: 50%;
|
||||
margin-left: -4px;
|
||||
color: white;
|
||||
text-shadow: 0px 0px 1px #bbb;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
li {
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
|
||||
&:first-child{
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
&:last-child{
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
a{
|
||||
color: @color_black;
|
||||
display: block;
|
||||
border-bottom: 1px solid lighten(@color_grey-light, 8%);
|
||||
padding: 15px 25px;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
.transition-color();
|
||||
|
||||
&:hover{
|
||||
color: @color_blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.languages{ position: absolute; right: 0; }
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
.list-view{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.list-item{
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item-header{
|
||||
margin-bottom: 10px;
|
||||
&:after{
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item-title{
|
||||
.fz(20);
|
||||
line-height: 1.4;
|
||||
width: 75%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item-meta{
|
||||
display: block;
|
||||
width: 25%;
|
||||
float: right;
|
||||
line-height: 1.6;
|
||||
text-align: right;
|
||||
max-width: 250px;
|
||||
font-weight: @font_light;
|
||||
.fz(14);
|
||||
|
||||
a{
|
||||
color: @color_grey-dark;
|
||||
padding: 5px 10px;
|
||||
background-color: @color_grey-lighter;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.list-item-content{
|
||||
line-height: 1.4;
|
||||
font-weight: @font_light;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.list-item-title { float: none; width: 100%; }
|
||||
.list-item-meta{ display: block; float: none; width: 100%; text-align: left; margin-top: 10px; }
|
||||
}
|
||||
74
application/view/mockup/template/less/modules/_login.less
Normal file
74
application/view/mockup/template/less/modules/_login.less
Normal file
@@ -0,0 +1,74 @@
|
||||
.page.login-page, .page.register-page{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.login, .register{
|
||||
position: relative;
|
||||
display: table;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #404448;
|
||||
}
|
||||
|
||||
.login-content, .register-content{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.login-wrapper, .register-wrapper{
|
||||
padding: 45px 60px;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
border-radius: 3px;
|
||||
background-color: @color_grey-lighter;
|
||||
}
|
||||
|
||||
.login-inputs, .register-inputs{
|
||||
margin: 50px 0 30px 0;
|
||||
|
||||
input{
|
||||
padding: 13px 20px;
|
||||
height: 50px;
|
||||
border-radius: 0;
|
||||
border-bottom: 0;
|
||||
line-height: 18px;
|
||||
|
||||
&:first-child{
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
border-radius: 0 0 3px 3px;
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-inputs{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
input.login-checkbox, input.register-checkbox{
|
||||
margin-right: 5px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.login-form, .register-form{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.login-helpers, .register-helpers{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
.login-helper-item, .register-helper-item{
|
||||
text-align: center;
|
||||
.fz(14);
|
||||
color: @color_grey-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.login-wrapper, .register-wrapper{ padding: 35px 30px }
|
||||
}
|
||||
62
application/view/mockup/template/less/modules/_logo.less
Normal file
62
application/view/mockup/template/less/modules/_logo.less
Normal file
@@ -0,0 +1,62 @@
|
||||
// Logo image
|
||||
.logo-image{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
||||
img{
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.footer &{
|
||||
opacity: 0.8;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.one-page-logo & img{
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.login & img, .register & img{
|
||||
opacity: 0.8;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-animated{
|
||||
.animation(logo-anim 12s Ease-in-out infinite);
|
||||
}
|
||||
|
||||
.keyframes(logo-anim; {
|
||||
0%, 50%{
|
||||
.transform(rotate(0));
|
||||
}
|
||||
|
||||
100%{
|
||||
.transform(rotate(360deg));
|
||||
}
|
||||
});
|
||||
|
||||
// Logo text
|
||||
.logo-text{
|
||||
font-size: 2em;
|
||||
line-height: 40px;
|
||||
color: @color_grey-dark;
|
||||
text-decoration: none;
|
||||
font-weight: 300;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
// Sidr
|
||||
@import (less) '../libs/sidr.css';
|
||||
|
||||
.menu-side-trigger{
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
height: 20px;
|
||||
width: 27px;
|
||||
border-bottom: 2px solid @color_grey-dark;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
|
||||
&:before, &:after{
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 27px;
|
||||
height: 2px;
|
||||
background-color: @color_grey-dark;
|
||||
display: block;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:before{
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
&:after{
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-side-trigger-right{
|
||||
float: right;
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.menu-side-trigger-light{
|
||||
border-color: white;
|
||||
|
||||
&:before, &:after{
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.sidr{
|
||||
box-sizing: content-box;
|
||||
|
||||
a{
|
||||
-webkit-transition: box-shadow .25s ease;
|
||||
-moz-transition: box-shadow .25s ease;
|
||||
-ms-transition: box-shadow .25s ease;
|
||||
-o-transition: box-shadow .25s ease;
|
||||
transition: box-shadow .25s ease;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
// Vertical Menu
|
||||
.menu-vertical-wrapper{
|
||||
|
||||
&.menu-fixed{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.menu-bottom{
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-vertical{
|
||||
line-height: 40px;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
color: @color_black;
|
||||
font-weight: 300;
|
||||
margin-bottom: 30px;
|
||||
background-color: @color_grey-lighter;
|
||||
|
||||
li{
|
||||
&.has-children > a{
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
&.has-children > a:before{
|
||||
content: '+';
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
color: @color_grey-dark;
|
||||
}
|
||||
|
||||
&.has-children.selected > a:before{
|
||||
color: @color_blue;
|
||||
content: '—';
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
ul{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
line-height: 40px;
|
||||
|
||||
li.selected > a {
|
||||
color: @color_blue;
|
||||
}
|
||||
|
||||
a { padding-left: 40px;}
|
||||
ul a { padding-left: 55px; }
|
||||
ul ul a { padding-left: 70px; }
|
||||
}
|
||||
|
||||
& > li{
|
||||
position: relative;
|
||||
|
||||
&.selected{
|
||||
|
||||
|
||||
& > a{
|
||||
color: @color_blue;
|
||||
|
||||
&:hover{
|
||||
// background-color: darken(@color_blue, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0 15px 0 20px;
|
||||
display: block;
|
||||
position: relative;
|
||||
color: inherit;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
line-height: inherit;
|
||||
border-radius: 3px;
|
||||
border-bottom: 1px solid lighten(@color_grey-light, 10%);
|
||||
|
||||
.transition-background();
|
||||
|
||||
&:hover{
|
||||
background-color: @color_grey-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-menu-select{
|
||||
position: relative;
|
||||
padding:0;
|
||||
border: 1px solid @color_grey-light;
|
||||
margin-bottom: 40px;
|
||||
|
||||
|
||||
select {
|
||||
cursor: pointer;
|
||||
width:100%;
|
||||
margin:0;
|
||||
background:none;
|
||||
border: 1px solid transparent;
|
||||
outline: none;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
font-size:1em;
|
||||
font-weight: @font_light;
|
||||
color: #444;
|
||||
padding: .6em 1.9em 0.6em .8em;
|
||||
line-height:1.3;
|
||||
|
||||
&:focus{
|
||||
outline:none;
|
||||
background-color:transparent;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:after{
|
||||
content: "\e688";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
right: 5px;
|
||||
top: 7px;
|
||||
color: @color_grey;
|
||||
font-family: @icons-stroke;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
border:1px solid #888;
|
||||
}
|
||||
|
||||
}
|
||||
400
application/view/mockup/template/less/modules/_menu.less
Normal file
400
application/view/mockup/template/less/modules/_menu.less
Normal file
@@ -0,0 +1,400 @@
|
||||
// SlickNav
|
||||
@import (less) '../libs/slicknav.css';
|
||||
|
||||
// Menu
|
||||
.menu{
|
||||
line-height: 40px;
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
color: @color_black;
|
||||
font-weight: 300;
|
||||
|
||||
.header.header-one-page & > li > ul,
|
||||
.header.header-one-page.header-fixed & > li > ul{
|
||||
top: 67px;
|
||||
}
|
||||
|
||||
.header.header-fixed & > li > ul{
|
||||
top: 58px;
|
||||
}
|
||||
|
||||
.sf-with-ul {
|
||||
padding-right: 25px;
|
||||
|
||||
&:after{
|
||||
position: absolute;
|
||||
content: '\f107';
|
||||
display: block;
|
||||
top: 12px;
|
||||
right: 10px;
|
||||
font-size: 12px;
|
||||
color: @color_grey;
|
||||
font-family: 'FontAwesome';
|
||||
}
|
||||
}
|
||||
|
||||
// All menus
|
||||
ul{
|
||||
font-size: 14px;
|
||||
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1) !important;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
display: none;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
box-shadow: 1px 1px 2px rgba(0,0,0,.05);
|
||||
border: 1px solid lighten(@color_grey-light, 8%);
|
||||
|
||||
.sf-with-ul {
|
||||
padding-right: 25px;
|
||||
text-indent: 15px;
|
||||
|
||||
&:after{
|
||||
content: '+';
|
||||
top: 13px;
|
||||
right: 14px;
|
||||
color: @color_grey-dark;
|
||||
border-radius: 0px;
|
||||
width: 18px;
|
||||
text-indent: 0;
|
||||
height: 18px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
font-size: 14px;
|
||||
.transition(color);
|
||||
}
|
||||
|
||||
&:before{
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover:after{
|
||||
color: @color_blue;
|
||||
border-color: lighten(@color_grey-light, 10%);
|
||||
content: '\f105';
|
||||
font-family: @icons;
|
||||
}
|
||||
}
|
||||
|
||||
.header-over &{
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
ul{
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// All menu items
|
||||
li{
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
*white-space: normal;
|
||||
text-align: center;
|
||||
|
||||
&:hover > ul, &.sfHover > ul{
|
||||
display: block;
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
// All links from the menu
|
||||
a{
|
||||
display: block;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
padding: 10px 15px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// First level
|
||||
& > li{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Second level
|
||||
& > li > ul {
|
||||
top: 57px;
|
||||
left: 50%;
|
||||
margin-top: -1px;
|
||||
.translateX(-50%);
|
||||
|
||||
.header-over &{
|
||||
top: 47px;
|
||||
}
|
||||
|
||||
&:before{
|
||||
content: '\f0d8';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
font-family: @icons;
|
||||
top: -14px;
|
||||
left: 50%;
|
||||
margin-left: -4px;
|
||||
color: white;
|
||||
text-shadow: 0px 0px 1px #bbb;
|
||||
}
|
||||
|
||||
li{
|
||||
background-color: white;
|
||||
border-bottom: 1px solid lighten(@color_grey-light, 8%);
|
||||
|
||||
&:first-child{
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
a{
|
||||
|
||||
position: relative;
|
||||
.transition-color();
|
||||
&:hover{
|
||||
color: @color_blue;
|
||||
|
||||
&:before{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:not(.sf-with-ul):after{
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
padding: 15px 25px;
|
||||
|
||||
&.sf-with-ul{
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
&:not(.sf-with-ul):after{
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
left: 50%;
|
||||
bottom: -1px;
|
||||
background-color: lighten(@color_blue, 10%);
|
||||
|
||||
.transform(translateX(-50%));
|
||||
.transition(width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Menu Helpers
|
||||
&.upper{ text-transform: uppercase; }
|
||||
}
|
||||
|
||||
.menu-label{
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
left: 50%;
|
||||
.transform(translateX(-50%));
|
||||
font-size: 9px;
|
||||
padding: 0px 8px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
background-color: @color_blue;
|
||||
line-height: 18px;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: @color_blue;
|
||||
z-index: -1;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
.transform(rotate(45deg));
|
||||
bottom: -1px;
|
||||
left: 50%;
|
||||
margin-left: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-light{
|
||||
&>li>a{
|
||||
color: white;
|
||||
}
|
||||
|
||||
&>li>.sf-with-ul:after{
|
||||
color: @color_grey-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Sidr
|
||||
.sidr ul li a, .sidr ul li span{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidr .sidr-class-menu-label{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
right: 10px;
|
||||
font-size: 12px;
|
||||
padding: 0 12px;
|
||||
background-color: @color_blue;
|
||||
line-height: 22px;
|
||||
top: 0;
|
||||
color: white;
|
||||
top: 50%;
|
||||
margin-top: -11px;
|
||||
}
|
||||
|
||||
// Menu Mobile
|
||||
.slicknav_menu{
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.slicknav_btn{
|
||||
float: none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
|
||||
.slicknav_menu .slicknav_menutxt, .slicknav_menu .slicknav_icon{
|
||||
float: none;
|
||||
}
|
||||
|
||||
.slicknav_menu .slicknav_icon-bar{
|
||||
box-shadow: none;
|
||||
background-color: @color_grey-dark;
|
||||
height: 3px;
|
||||
width: 28px;
|
||||
margin-bottom: 6px;
|
||||
float: none;
|
||||
|
||||
&:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slicknav_menu.menu-light .slicknav_icon-bar{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.slicknav_nav{
|
||||
color: @color_black;
|
||||
margin-top: 15px;
|
||||
background-color: white;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
box-shadow: 1px 1px 6px 0px rgba(0,0,0,0.1);
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
width: 280px;
|
||||
right: 14px;
|
||||
font-weight: @font_light;
|
||||
|
||||
&:after{
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: white;
|
||||
.transform(rotate(45deg));
|
||||
right: 20px;
|
||||
top: -5px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
ul{
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.slicknav_row{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a, .slicknav_row {
|
||||
color: inherit;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
text-align: left;
|
||||
padding: 7px 15px;
|
||||
|
||||
.menu-label{
|
||||
top: 10px;
|
||||
right: -8px;
|
||||
left: auto;
|
||||
line-height: 17px;
|
||||
height: auto;
|
||||
bottom: auto;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
padding: 2px 13px;
|
||||
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover{
|
||||
color: inherit;
|
||||
background-color: @color_grey-lighter;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.slicknav_arrow{
|
||||
font-family: @icons;
|
||||
font-size: 10px;
|
||||
vertical-align: middle;
|
||||
color: @color_grey-dark;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-large-x) {
|
||||
.menu{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.slicknav_menu{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.menu-label{ display: none; }
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
.mobile-app-features{
|
||||
position: relative;
|
||||
}
|
||||
.mobile-app-features-image{
|
||||
left: 50%;
|
||||
.transform(translateX(-50%));
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-app-feature{
|
||||
margin-bottom: 30px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.mobile-app-feature-icon{
|
||||
width: 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
margin: 0 auto 20px;
|
||||
|
||||
i{
|
||||
font-size: 47px;
|
||||
color: @color_blue;
|
||||
bottom: -9px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-app-feature-title{
|
||||
font-size: 25px;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.mobile-app-feature-description{
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: @color_grey-dark;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-large-x){
|
||||
.mobile-app-features-image{
|
||||
max-width: 200%;
|
||||
}
|
||||
.mobile-app-feature{
|
||||
padding-top: 0;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-medium){
|
||||
.mobile-app-features-image{
|
||||
max-width: 300%;
|
||||
}
|
||||
.mobile-app-features-image-block{
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small){
|
||||
.mobile-app-features-image-block{
|
||||
position: relative;
|
||||
padding-top: 0;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.mobile-app-features-image{
|
||||
max-width: 160%;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x){
|
||||
.mobile-app-features-image{
|
||||
max-width: 250%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
.header-back-app-block{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-back-app-img{
|
||||
display: block;
|
||||
margin: -30px auto -178px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-large-x) {
|
||||
.header-back-app {
|
||||
padding: 140px 0 100px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.media-mixin(@break) when (@break = @break-medium) {
|
||||
.header-back-app{
|
||||
margin-bottom: 80px;
|
||||
|
||||
.page-info, .header-back-buttons{
|
||||
text-align: center;
|
||||
}
|
||||
.header-back-buttons{
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.header-back-app-img{
|
||||
margin: 0 auto -190px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.media-mixin(@break) when (@break = @break-small-x){
|
||||
.header-back-app{
|
||||
.header-back-buttons{
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
.modal-alt{
|
||||
display: none;
|
||||
width: 500px;
|
||||
max-width: 90%;
|
||||
border-radius: 3px;
|
||||
padding: 25px 60px 20px 60px;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.modal-alt-header{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.modal-alt-header-ico{
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
background-color: #fff;
|
||||
width: 36px;
|
||||
margin: 0 auto 20px;
|
||||
|
||||
i{
|
||||
font-size: 23px;
|
||||
color: fade(@color_black, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-alt-header-line{
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 1px;
|
||||
background-color: fade(@color_black, 30%);
|
||||
top: 50%;
|
||||
.transform(translateY(-50%));
|
||||
|
||||
&:after{
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background-color: fade(@color_black, 30%);
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
&.line-right{
|
||||
right: -15px;
|
||||
|
||||
&:after{
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.line-left{
|
||||
left: -15px;
|
||||
|
||||
&:after{
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-alt-title{
|
||||
font-size: 34px;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-alt-description{
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.modal-alt-button{
|
||||
margin-bottom: -50px;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small){
|
||||
.modal-alt{
|
||||
padding: 25px 40px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x){
|
||||
.modal-alt{
|
||||
padding: 25px 20px 20px;
|
||||
}
|
||||
.modal-alt-title{
|
||||
font-size: 25px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.modal-alt-description{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
52
application/view/mockup/template/less/modules/_modal.less
Normal file
52
application/view/mockup/template/less/modules/_modal.less
Normal file
@@ -0,0 +1,52 @@
|
||||
.modal{
|
||||
display: none;
|
||||
width: 600px;
|
||||
background-color: @color_grey-lighter;
|
||||
border-radius: 3px;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.modal-header{
|
||||
background-color: @color_grey-light;
|
||||
padding: 20px 25px;
|
||||
position: relative;
|
||||
|
||||
.fa.fa-times{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
right: 15px;
|
||||
margin-top: -10px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-content{
|
||||
padding: 25px;
|
||||
line-height: 1.4;
|
||||
font-weight: @font_light;
|
||||
}
|
||||
|
||||
.modal-footer{
|
||||
border-top: 1px solid @color_grey-light;
|
||||
padding: 20px 25px;
|
||||
|
||||
&.center{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button{
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
.navigation{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:after{
|
||||
clear: both;
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-next, .navigation-previous{
|
||||
a{
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
padding: 10px 20px;
|
||||
display: block;
|
||||
background-color: @color_green;
|
||||
font-weight: @font_light;
|
||||
.transition-background();
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
background-color: darken(@color_green, 5%)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-next{
|
||||
float: right;
|
||||
}
|
||||
|
||||
.navigation-previous{
|
||||
float: left;
|
||||
|
||||
|
||||
}
|
||||
82
application/view/mockup/template/less/modules/_note.less
Normal file
82
application/view/mockup/template/less/modules/_note.less
Normal file
@@ -0,0 +1,82 @@
|
||||
.note{
|
||||
padding: 20px 20px 20px 25px;
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 5px 0px 0px 0px @color_orange;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
|
||||
&.green{
|
||||
box-shadow: inset 5px 0px 0px 0px @color_green;
|
||||
.note-title{ color: @color_green}
|
||||
}
|
||||
&.blue{
|
||||
box-shadow: inset 5px 0px 0px 0px @color_blue;
|
||||
.note-title{ color: @color_blue}
|
||||
}
|
||||
&.blue-light{
|
||||
box-shadow: inset 5px 0px 0px 0px @color_blue-light;
|
||||
.note-title{ color: @color_blue-light}
|
||||
}
|
||||
&.red{
|
||||
box-shadow: inset 5px 0px 0px 0px @color_red;
|
||||
.note-title{ color: @color_red}
|
||||
}
|
||||
&.purple{
|
||||
box-shadow: inset 5px 0px 0px 0px @color_purple;
|
||||
.note-title{ color: @color_purple}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.note-bounce{
|
||||
.animation(note-bounce 3s Ease-in-out infinite);
|
||||
}
|
||||
|
||||
.note-pulse{
|
||||
.animation(note-pulse 3s Ease-in-out infinite);
|
||||
}
|
||||
|
||||
.keyframes(note-pulse; {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.03, 1.03, 1.03);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
});
|
||||
|
||||
.keyframes(note-bounce; {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
.transform(translateY(0));
|
||||
}
|
||||
40% {
|
||||
.transform(translateY(-25px));
|
||||
}
|
||||
60% {
|
||||
.transform(translateY(-10px));
|
||||
}
|
||||
});
|
||||
|
||||
.note-close{
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
color: @color_grey-dark;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.note-title{
|
||||
.fz(22);
|
||||
color: @color_orange;
|
||||
}
|
||||
|
||||
.note-description{
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
.notification{
|
||||
padding: 150px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.notification-icon{
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.notification-close{
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
&:before, &:after{
|
||||
width: 2px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
background-color: @color_grey-dark;
|
||||
top: 0;
|
||||
left: 13px;
|
||||
}
|
||||
|
||||
&:before{
|
||||
.transform(rotate(45deg));
|
||||
}
|
||||
|
||||
&:after{
|
||||
.transform(rotate(-45deg));
|
||||
}
|
||||
}
|
||||
|
||||
.notification-title{
|
||||
.fz(38);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.notification-description{
|
||||
.fz(20);
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.notification-buttons{
|
||||
text-align: center;
|
||||
|
||||
.button{
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.notification{ padding: 70px 0; }
|
||||
}
|
||||
71
application/view/mockup/template/less/modules/_number.less
Normal file
71
application/view/mockup/template/less/modules/_number.less
Normal file
@@ -0,0 +1,71 @@
|
||||
.number-box{
|
||||
margin-bottom: 30px;
|
||||
padding-left: 60px;
|
||||
position: relative;
|
||||
|
||||
.numbers > .row > div:last-child &{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.number-icon{
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: 2px;
|
||||
.fz(55);
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
color: @color_grey;
|
||||
}
|
||||
|
||||
.number-wrapper{
|
||||
.fz(35);
|
||||
display: block;
|
||||
line-height: 40px;
|
||||
font-weight: @font_light;
|
||||
}
|
||||
|
||||
.number-description{
|
||||
.fz(13);
|
||||
display: block;
|
||||
margin-left: 3px;
|
||||
line-height: 1.4;
|
||||
color: @color_blue;
|
||||
}
|
||||
|
||||
|
||||
.media-mixin(@break) when (@break = @break-large-x) {
|
||||
.number-description { margin-left: 5px; }
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-medium) {
|
||||
.number-box {
|
||||
border: none;
|
||||
padding-left: 100px;
|
||||
}
|
||||
|
||||
.number-icon{ width: 100px; }
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.number-description {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
max-width: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.number-wrapper {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.number-box{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.number-icon{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
113
application/view/mockup/template/less/modules/_one-page-nav.less
Normal file
113
application/view/mockup/template/less/modules/_one-page-nav.less
Normal file
@@ -0,0 +1,113 @@
|
||||
.one-page-nav-wrapper{
|
||||
border-top: 1px solid lighten(@color_grey-light, 5%);
|
||||
border-bottom: 1px solid lighten(@color_grey-light, 5%);
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
bottom: 60px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
|
||||
.jspVerticalBar{
|
||||
background: transparent;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.jspPane{
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.jspTrack{
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:hover .jspDrag{
|
||||
background-color: @color_grey;
|
||||
|
||||
}
|
||||
|
||||
.jspDrag{
|
||||
.transition(background-color);
|
||||
background-color: @color_grey-light;
|
||||
}
|
||||
}
|
||||
|
||||
.one-page-nav{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
font-weight: @font_light;
|
||||
|
||||
li{
|
||||
&.is-active > a{
|
||||
color: @color_blue;
|
||||
|
||||
&:after{
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
a{
|
||||
display: block;
|
||||
padding: 7px 15px;
|
||||
color: darken(@color_grey-dark, 20%);
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
.fz(14);
|
||||
.transition(color);
|
||||
|
||||
&:after{
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background-color: @color_blue;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.transition(width);
|
||||
}
|
||||
|
||||
&:hover{
|
||||
color: @color_blue;
|
||||
|
||||
&:after{
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
border-bottom: 1px solid lighten(@color_grey-light, 5%);
|
||||
}
|
||||
|
||||
ul{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
a{
|
||||
padding: 7px 15px 7px 30px;
|
||||
}
|
||||
|
||||
li:first-child{
|
||||
border-top: 1px solid lighten(@color_grey-light, 5%);
|
||||
}
|
||||
|
||||
li:last-child{
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.one-page-nav-icon{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
width: 12px;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
89
application/view/mockup/template/less/modules/_one-page.less
Normal file
89
application/view/mockup/template/less/modules/_one-page.less
Normal file
@@ -0,0 +1,89 @@
|
||||
.one-page-sidebar{
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
width: 250px;
|
||||
background-color: @color_grey-lighter;
|
||||
box-shadow: 0 0 4px 1px #ECECEC;
|
||||
}
|
||||
|
||||
.one-page-content{
|
||||
padding-left: 250px;
|
||||
|
||||
.container{
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.one-page-sidebar-header{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.one-page-logo{
|
||||
text-align: center;
|
||||
padding: 30px 20px;
|
||||
font-size: 35px;
|
||||
line-height: 39px;
|
||||
font-weight: 300;
|
||||
|
||||
.logo-image{
|
||||
vertical-align: middle;
|
||||
|
||||
img{
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.one-page-meta{
|
||||
padding: 15px 0;
|
||||
border-top: 1px solid lighten(@color_grey-light, 10%);
|
||||
}
|
||||
|
||||
.one-page-meta-list{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
.fz(12);
|
||||
text-align: center;
|
||||
|
||||
li{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
line-height: 20px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.one-page-meta-list-icon{
|
||||
color: @color_grey;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.one-page-sidebar-footer{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 12px;
|
||||
color: @color_grey-dark;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-medium) {
|
||||
.one-page-sidebar{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.one-page-content{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
.page-title{
|
||||
.fz(80);
|
||||
color: darken(@color_black, 10%);
|
||||
font-weight: @font_thin;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.page-info-simple &{
|
||||
font-weight: @font_light;
|
||||
color: @color_black;
|
||||
.fz(72);
|
||||
}
|
||||
|
||||
.header-back-light &{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.page-description{
|
||||
color: darken(@color_black, 10%);
|
||||
text-transform: uppercase;
|
||||
.fz(20);
|
||||
letter-spacing: 2px;
|
||||
line-height: 1.5;
|
||||
font-weight: @font_light;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.page-info-simple &{
|
||||
text-transform: none;
|
||||
.fz(24);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.header-back-light &{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.header-back-app{
|
||||
.page-title{
|
||||
margin-bottom: 50px;
|
||||
font-weight: @font_thin;
|
||||
}
|
||||
.page-description{
|
||||
margin-bottom: 70px;
|
||||
font-weight: @font_thin;
|
||||
}
|
||||
}
|
||||
.media-mixin(@break) when (@break = @break-large){
|
||||
.header-back-app{
|
||||
.page-title{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.page-description{
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small) {
|
||||
.page-title { .fz(50); }
|
||||
.page-description { .fz(16); }
|
||||
}
|
||||
41
application/view/mockup/template/less/modules/_panels.less
Normal file
41
application/view/mockup/template/less/modules/_panels.less
Normal file
@@ -0,0 +1,41 @@
|
||||
#content.panels{
|
||||
padding: 100px 0;
|
||||
background-color: @color_grey-lighter;
|
||||
}
|
||||
|
||||
.panel{
|
||||
background-color: white;
|
||||
padding: 50px;
|
||||
box-shadow: 0 0 6px rgba(153, 153, 153, 0.29);
|
||||
margin-bottom: 50px;
|
||||
|
||||
img{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-image{
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.panel-header{
|
||||
.fz(30);
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
font-weight: @font_light;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small) {
|
||||
#content.panels{
|
||||
padding: 50px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.panel{ padding: 30px; }
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
|
||||
@preloader-size: 30px;
|
||||
@preloader-wieght: 1px;
|
||||
@preloader-satelit-size: 8px;
|
||||
@preloader-orbit-size: (@preloader-size * 1.1);
|
||||
|
||||
.preloader{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.preloader-animation{
|
||||
width: @preloader-size;
|
||||
height: @preloader-size;
|
||||
border: @preloader-wieght solid @color_blue;
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-top: -@preloader-size / 2;
|
||||
margin-left: -@preloader-size / 2;
|
||||
background-color: lighten(@color_blue, 40%);
|
||||
box-shadow: 0 0 0 @preloader-orbit-size white, 0 0 0 @preloader-orbit-size + @preloader-wieght lighten(@color_blue, 30%);
|
||||
backface-visibility: hidden;
|
||||
|
||||
&:after, &:before{
|
||||
content: '';
|
||||
display: block;
|
||||
width: @preloader-satelit-size;
|
||||
height: @preloader-satelit-size;
|
||||
border-radius: 50%;
|
||||
background-color: @color_blue;
|
||||
border: @preloader-wieght solid @color_blue;
|
||||
left: 50%;
|
||||
.transform(translateX(-50%));
|
||||
position: absolute;
|
||||
background-color: lighten(@color_blue, 40%);
|
||||
}
|
||||
|
||||
&:after{
|
||||
top: -@preloader-orbit-size - (@preloader-satelit-size / 2) - @preloader-wieght;
|
||||
-webkit-transform-origin: 0 (@preloader-size / 2) + (@preloader-satelit-size / 2) + @preloader-orbit-size;
|
||||
-moz-transform-origin: 0 (@preloader-size / 2) + (@preloader-satelit-size / 2) + @preloader-orbit-size;
|
||||
-ms-transform-origin: 0 (@preloader-size / 2) + (@preloader-satelit-size / 2) + @preloader-orbit-size;
|
||||
-o-transform-origin: 0 (@preloader-size / 2) + (@preloader-satelit-size / 2) + @preloader-orbit-size;
|
||||
transform-origin: 0 (@preloader-size / 2) + (@preloader-satelit-size / 2) + @preloader-orbit-size;
|
||||
.animation(preloader-anim 1.5s linear infinite);
|
||||
}
|
||||
|
||||
&:before{
|
||||
bottom: -@preloader-orbit-size - (@preloader-satelit-size / 2) - @preloader-wieght;
|
||||
-webkit-transform-origin: 0 -(@preloader-size / 2) + (@preloader-satelit-size / 2) - @preloader-orbit-size;
|
||||
-moz-transform-origin: 0 -(@preloader-size / 2) + (@preloader-satelit-size / 2) - @preloader-orbit-size;
|
||||
-ms-transform-origin: 0 -(@preloader-size / 2) + (@preloader-satelit-size / 2) - @preloader-orbit-size;
|
||||
-o-transform-origin: 0 -(@preloader-size / 2) + (@preloader-satelit-size / 2) - @preloader-orbit-size;
|
||||
transform-origin: 0 -(@preloader-size / 2) + (@preloader-satelit-size / 2) - @preloader-orbit-size;
|
||||
.animation(preloader-anim 1.3s linear infinite);
|
||||
}
|
||||
}
|
||||
|
||||
.keyframes(preloader-anim; {
|
||||
0%{
|
||||
.transform(rotate(-180deg) translateX(-50%));
|
||||
}
|
||||
|
||||
100%{
|
||||
.transform(rotate(180deg) translateX(-50%));
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,75 @@
|
||||
.price-list{
|
||||
position: relative;
|
||||
padding: 40px 50px;
|
||||
margin: 0 15px 50px 15px;
|
||||
border-radius: 10px;
|
||||
min-height: 100px;
|
||||
box-shadow: 2px 7px 29px 0 rgba(38, 38, 38, 0.1);
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 65%, rgba(0, 0, 0, 0.03) 100%);
|
||||
|
||||
&:hover .feature-is-disabled{
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.price-list-title{
|
||||
text-align: center;
|
||||
color: @color_grey-dark;
|
||||
}
|
||||
|
||||
.price-list-price{
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.price-list-price-units{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.price-list-features{
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.price-list-feature-item{
|
||||
padding: 5px 0;
|
||||
font-weight: @font_light;
|
||||
|
||||
&.feature-is-disabled{
|
||||
text-decoration: line-through;
|
||||
color: lighten(@color_black, 50%);
|
||||
.transition(opacity);
|
||||
-webkit-backface-visibility: hidden;
|
||||
height: 38px;
|
||||
position: relative;
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
height: 1px;
|
||||
background-color: lighten(@color_grey, 10%);
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price-list-button{
|
||||
margin-top: 30px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
font-weight: @font_light;
|
||||
border: 1px solid @color_blue;
|
||||
border-radius: 26px;
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
.promo-title-wrapper{
|
||||
margin-bottom: 70px;
|
||||
padding-top: 140px;
|
||||
}
|
||||
|
||||
.give-it-try{
|
||||
.promo-title-wrapper{
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.promo-title-less-space{
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.promo-title-no-icon{
|
||||
padding-top: 80px;
|
||||
|
||||
.promo-title:before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.promo-title{
|
||||
text-align: center;
|
||||
.fz(52);
|
||||
font-weight: @font_thin;
|
||||
color: darken(@color_black, 10%);
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
|
||||
&:before{
|
||||
position: absolute;
|
||||
content: attr(data-icon);
|
||||
display: block;
|
||||
font-family: @icons-stroke;
|
||||
font-size: 29px;
|
||||
opacity: 0.3;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
top: -60px;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
speak: none;
|
||||
}
|
||||
}
|
||||
|
||||
.promo-description{
|
||||
text-align: center;
|
||||
.fz(20);
|
||||
color: @color_grey-dark;
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.promo-title{
|
||||
.fz(38);
|
||||
}
|
||||
|
||||
.promo-description{
|
||||
.fz(17);
|
||||
}
|
||||
}
|
||||
113
application/view/mockup/template/less/modules/_rate.less
Normal file
113
application/view/mockup/template/less/modules/_rate.less
Normal file
@@ -0,0 +1,113 @@
|
||||
.rate-wrapper{
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
padding: 22px 25px 20px 25px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid lighten(@color_grey-light, 10%);
|
||||
|
||||
&:after{
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.rate-symbol{
|
||||
font-size: 43px;
|
||||
cursor: pointer;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.rate-symbol-filled{
|
||||
color: @color_blue;
|
||||
}
|
||||
|
||||
.rate-symbol-empty{
|
||||
color: #eaeaea;
|
||||
}
|
||||
|
||||
.rate-results{
|
||||
float: right;
|
||||
line-height: 43px;
|
||||
|
||||
}
|
||||
|
||||
.rate-current, .rate-total{
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.rate-current{
|
||||
font-size: 36px;
|
||||
font-weight: @font_thin;
|
||||
vertical-align: middle;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.rate-total{
|
||||
line-height: 16px;
|
||||
vertical-align: -8px;
|
||||
}
|
||||
|
||||
.review-input{
|
||||
width: 100%;
|
||||
height: 47px;
|
||||
line-height: 19px;
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 3px;
|
||||
padding: 14px 15px 14px 15px;
|
||||
outline: none;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.placeholder({
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
font-weight: 300;
|
||||
});
|
||||
}
|
||||
.review-textarea{
|
||||
width: 100%;
|
||||
height: 105px;
|
||||
line-height: 19px;
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 3px;
|
||||
padding: 14px 15px 14px 15px;
|
||||
outline: none;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
margin-bottom: 35px;
|
||||
resize: none;
|
||||
|
||||
.placeholder({
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
font-weight: 300;
|
||||
});
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small){
|
||||
.rate-wrapper{
|
||||
padding: 22px 15px 20px;
|
||||
}
|
||||
.rate-symbol{
|
||||
font-size: 37px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
.media-mixin(@break) when (@break = @break-small-x){
|
||||
.rate-results{
|
||||
float: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.rate-wrapper{
|
||||
text-align: center;
|
||||
}
|
||||
.rate-symbol{
|
||||
font-size: 35px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
33
application/view/mockup/template/less/modules/_rotator.less
Normal file
33
application/view/mockup/template/less/modules/_rotator.less
Normal file
@@ -0,0 +1,33 @@
|
||||
.morphext > .animated {
|
||||
display: inline-block;
|
||||
color: @color_blue;
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rotator{
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.rotator-light{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rotator-text{
|
||||
.fz(66);
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
font-weight: @font_thin;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.media-mixin(@break) when (@break = @break-large) {
|
||||
.rotator-text{
|
||||
.fz(50);
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.rotator-text{ .fz(40); }
|
||||
}
|
||||
78
application/view/mockup/template/less/modules/_search.less
Normal file
78
application/view/mockup/template/less/modules/_search.less
Normal file
@@ -0,0 +1,78 @@
|
||||
.search{
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.widget{
|
||||
.search{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
color: @color_grey;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.search-input{
|
||||
padding-right: 30px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.search-minimal{
|
||||
text-align: right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-minimal-icon{
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
color: @color_grey-dark;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.search-minimal-input{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 42px;
|
||||
width: 180px;
|
||||
height: 30px;
|
||||
background-color: @color_grey-lighter;
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 3px;
|
||||
max-width: 80%;
|
||||
|
||||
&:after{
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
right: -4px;
|
||||
top: 11px;
|
||||
border-top: 1px solid @color_grey-light;
|
||||
border-right: 1px solid @color_grey-light;
|
||||
background-color: @color_grey-lighter;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
input{
|
||||
border: 0;
|
||||
outline: none;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
padding: 0 10px;
|
||||
line-height: 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
52
application/view/mockup/template/less/modules/_skill.less
Normal file
52
application/view/mockup/template/less/modules/_skill.less
Normal file
@@ -0,0 +1,52 @@
|
||||
.skill{
|
||||
margin-bottom: 30px;
|
||||
|
||||
&.inline{
|
||||
.skill-title, .skill-level{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
line-height: 50px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.skill-title{
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
&.small .skill-title{
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.large{
|
||||
.skill-title{ .fz(35) }
|
||||
.skill-level{ .fz(20) }
|
||||
}
|
||||
|
||||
&.small{
|
||||
.skill-title{ .fz(16) }
|
||||
.skill-level{ .fz(10) }
|
||||
}
|
||||
}
|
||||
|
||||
.skill-title{
|
||||
|
||||
}
|
||||
|
||||
.skill-level{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
& > li{
|
||||
color: @color_yellow;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
.fz(20);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
@import (less) '../libs/social-likes_birman.css';
|
||||
|
||||
// Social Share
|
||||
.social-share{
|
||||
margin: 0 0 20px 0;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.social-likes__widget{
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.social-likes__button{
|
||||
padding: 1px 6px 1px 30px;
|
||||
}
|
||||
|
||||
.social-likes__widget{
|
||||
margin: 0 5px 14px 5px;
|
||||
border: 1px solid @color_grey-light;
|
||||
|
||||
&:first-child{
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.social-likes__counter{
|
||||
margin-left: 5px;
|
||||
padding-left: 11px;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small) {
|
||||
.social-share{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
57
application/view/mockup/template/less/modules/_social.less
Normal file
57
application/view/mockup/template/less/modules/_social.less
Normal file
@@ -0,0 +1,57 @@
|
||||
.social{
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
&.small{
|
||||
a {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
.fz(12);
|
||||
}
|
||||
}
|
||||
|
||||
&.large{
|
||||
a {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
.fz(20);
|
||||
}
|
||||
}
|
||||
|
||||
li{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a{
|
||||
.fz(16);
|
||||
line-height: 40px;
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
color: @color_grey-dark;
|
||||
background-color: @color_grey-lighter;
|
||||
border: 1px solid lighten(@color_grey-light, 8%);
|
||||
.transition-color();
|
||||
|
||||
&:hover{
|
||||
color: @color_blue;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
.socials-footer{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
list-style-type: none;
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.socials-footer-link{
|
||||
color: @color_black;
|
||||
}
|
||||
|
||||
li{
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
33
application/view/mockup/template/less/modules/_soft-mac.less
Normal file
33
application/view/mockup/template/less/modules/_soft-mac.less
Normal file
@@ -0,0 +1,33 @@
|
||||
.header-soft-mac{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-soft-mac-img{
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 150px auto -400px;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-large-x){
|
||||
.header-soft-mac-img {
|
||||
margin: 100px auto -350px;
|
||||
}
|
||||
}
|
||||
.media-mixin(@break) when (@break = @break-medium){
|
||||
.header-soft-mac-img {
|
||||
margin: 100px auto -300px;
|
||||
}
|
||||
}
|
||||
.media-mixin(@break) when (@break = @break-small){
|
||||
.header-soft-mac-img {
|
||||
margin: 100px auto -250px;
|
||||
}
|
||||
}
|
||||
.media-mixin(@break) when (@break = @break-small-x){
|
||||
.header-soft-mac {
|
||||
display: none;
|
||||
}
|
||||
.header-back-soft {
|
||||
padding: 150px 0 100px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
.steps-interactive{
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
display: block;
|
||||
|
||||
.content{
|
||||
border-radius: 3px;
|
||||
padding: 30px 30px 60px 30px;
|
||||
border: 1px solid @color_grey-light;
|
||||
|
||||
p:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.actions{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
& > ul{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 35px;
|
||||
list-style-type: none;
|
||||
|
||||
&:after{
|
||||
display: block;
|
||||
clear: both;
|
||||
content: '';
|
||||
}
|
||||
|
||||
& > li{
|
||||
|
||||
display: block;
|
||||
|
||||
a{
|
||||
background-color: @color_grey-lighter;
|
||||
border-radius: 3px;
|
||||
padding: 10px 15px;
|
||||
color: @color_black;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
font-weight: @font_light;
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child{
|
||||
float: left;
|
||||
}
|
||||
|
||||
&:last-child, &:nth-child(2){
|
||||
float: right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.steps{
|
||||
margin: 0;
|
||||
display: block;
|
||||
|
||||
ul{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
& > li{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
background-color: @color_grey-lighter;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 3px;
|
||||
.transition-color-background();
|
||||
|
||||
&.current{
|
||||
background-color: @color_blue;
|
||||
outline: none;
|
||||
|
||||
a, a:hover{
|
||||
color: white;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
a{
|
||||
.fz(14);
|
||||
color: @color_black;
|
||||
padding: 10px 15px;
|
||||
display: block;
|
||||
|
||||
&:hover{
|
||||
color: @color_black;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-interactive-title{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.steps-interactive .steps{ display: none; }
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// SlickNav
|
||||
@import (less) '../libs/owl.carousel.css';
|
||||
|
||||
.steps-slider{
|
||||
margin-bottom: 30px;
|
||||
|
||||
.owl-nav{
|
||||
font-family: @icons;
|
||||
}
|
||||
|
||||
.owl-item{
|
||||
backface-visibility: visible;
|
||||
}
|
||||
|
||||
.owl-prev, .owl-next{
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid @color_blue;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
color: @color_blue;
|
||||
line-height: 38px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.owl-prev{
|
||||
right: 130px;
|
||||
}
|
||||
|
||||
.owl-next{
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.steps-slider-item{
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.steps-slider-step{
|
||||
position: absolute;
|
||||
right: 80px;
|
||||
bottom: 30px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid @color_blue;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
color: @color_blue;
|
||||
line-height: 38px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.steps-slider .owl-next, .steps-slider .owl-prev, .steps-slider-step{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
bottom: 20px;
|
||||
}
|
||||
.steps-slider .owl-next { right: 20px; }
|
||||
.steps-slider .owl-prev { right: 100px; }
|
||||
.steps-slider-step { right: 60px; }
|
||||
}
|
||||
44
application/view/mockup/template/less/modules/_steps.less
Normal file
44
application/view/mockup/template/less/modules/_steps.less
Normal file
@@ -0,0 +1,44 @@
|
||||
.steps{
|
||||
margin: 0 0 30px 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.step{
|
||||
padding-left: 55px;
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid lighten(@color_grey-light, 5%);
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.step-title{
|
||||
.fz(18);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.step-content{
|
||||
.fz(16);
|
||||
color: @color_grey-dark;
|
||||
font-weight: @font_light;
|
||||
}
|
||||
|
||||
.step-number{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -9px;
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid @color_grey-light;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-indent: 1px;
|
||||
line-height: 41px;
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
.subscribe-form-block-footer{
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
width: 270px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.subscribe-input-footer{
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
line-height: 15px;
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
padding: 10px 50px 10px 10px;
|
||||
outline: none;
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
color: lighten(@color_black, 35%);
|
||||
|
||||
.placeholder({
|
||||
font-size: 12px;
|
||||
color: lighten(@color_black, 35%);
|
||||
font-weight: 300;
|
||||
});
|
||||
}
|
||||
|
||||
.subscribe-button-footer{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 33px;
|
||||
height: 34px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
border-radius: 0 3px 3px 0;
|
||||
border: 1px solid @color_grey-light;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
background-color: @color_grey-lighter;
|
||||
|
||||
i{
|
||||
font-size: 12px;
|
||||
color: @color_black;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
.header-subscribe-form{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 590px;
|
||||
margin: 0 auto 0;
|
||||
padding-right: 130px;
|
||||
}
|
||||
|
||||
.subscribe-input{
|
||||
width: 100%;
|
||||
height: 53px;
|
||||
line-height: 21px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 30px;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 15px 80px 15px 30px;
|
||||
outline: none;
|
||||
font-weight: 300;
|
||||
font-size: 19px;
|
||||
|
||||
.placeholder({
|
||||
font-size: 19px;
|
||||
color: #fff;
|
||||
font-weight: 300;
|
||||
});
|
||||
}
|
||||
|
||||
.subscribe-button{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
margin-left: -54px;
|
||||
padding: 16px 30px 16px 18px;
|
||||
border-radius: 27px;
|
||||
font-weight: 300;
|
||||
background-color: #28C;
|
||||
font-size: 1.125em;
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
color: #fff;
|
||||
border: 1px solid rgba(0,0,0,.2);
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
-o-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-transition: opacity .25s ease,background-color .25s ease;
|
||||
-moz-transition: opacity .25s ease,background-color .25s ease;
|
||||
-ms-transition: opacity .25s ease,background-color .25s ease;
|
||||
-o-transition: opacity .25s ease,background-color .25s ease;
|
||||
transition: opacity .25s ease,background-color .25s ease;
|
||||
outline: none;
|
||||
|
||||
&:hover{
|
||||
background-color: #1e79b6;
|
||||
}
|
||||
&:active {
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
i{
|
||||
margin-right: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x){
|
||||
.subscribe-text{
|
||||
display: none;
|
||||
}
|
||||
.subscribe-button{
|
||||
padding: 18px 18px 17px 18px;
|
||||
z-index: 3;
|
||||
|
||||
i{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.header-subscribe-form{
|
||||
padding-right: 0;
|
||||
}
|
||||
.subscribe-input{
|
||||
font-size: 16px;
|
||||
|
||||
.placeholder({
|
||||
font-size: 16px;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
.table-of-contents{
|
||||
background-color: @color_grey-lighter;
|
||||
padding: 20px 30px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
ol{
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
&>ol{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-left: 25px;
|
||||
border-left: 1px solid lighten(@color_grey-light, 5%);
|
||||
position: relative;
|
||||
counter-reset: b;
|
||||
|
||||
&:after{
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 3px;
|
||||
height: 13px;
|
||||
background-color: @color_grey-lighter;
|
||||
top: 0;
|
||||
left: -2px;
|
||||
}
|
||||
|
||||
&:before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 3px;
|
||||
height: 13px;
|
||||
background-color: @color_grey-lighter;
|
||||
bottom: 0;
|
||||
left: -2px;
|
||||
}
|
||||
|
||||
&>li{
|
||||
position: relative;
|
||||
|
||||
&:after{
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid @color_blue;
|
||||
background-color: @color_grey-lighter;
|
||||
top: 13px;
|
||||
left: -28px;
|
||||
}
|
||||
|
||||
&:before{
|
||||
content: "";
|
||||
counter-increment: b;
|
||||
font-weight: 300;
|
||||
color: @color_black;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
ol{
|
||||
margin: 0;
|
||||
padding: 5px 0 5px 15px;
|
||||
}
|
||||
a{
|
||||
font-weight: 300;
|
||||
color: @color_black;
|
||||
font-size: 18px;
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
color: @color_blue;
|
||||
.transition(color);
|
||||
}
|
||||
}
|
||||
|
||||
&>ol{
|
||||
counter-reset: c;
|
||||
|
||||
a{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&>li{
|
||||
|
||||
&:before{
|
||||
content: counter(b) "." counter(c) ". ";
|
||||
counter-increment: c;
|
||||
font-weight: 300;
|
||||
color: @color_black;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&>ol{
|
||||
counter-reset: d;
|
||||
&>li{
|
||||
|
||||
&:before{
|
||||
content: counter(b) "." counter(c) ". " counter(d) ". ";
|
||||
counter-increment: d;
|
||||
font-weight: 300;
|
||||
color: @color_black;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: @break-small-x){
|
||||
.table-of-content{
|
||||
padding: 20px;
|
||||
|
||||
&>ol{
|
||||
padding-left: 20px;
|
||||
|
||||
&>li{
|
||||
&:after{
|
||||
left: -23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
243
application/view/mockup/template/less/modules/_table.less
Normal file
243
application/view/mockup/template/less/modules/_table.less
Normal file
@@ -0,0 +1,243 @@
|
||||
table {
|
||||
background-color: transparent;
|
||||
}
|
||||
caption {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
color: #777777;
|
||||
text-align: left;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.table > thead > tr > th,
|
||||
.table > tbody > tr > th,
|
||||
.table > tfoot > tr > th,
|
||||
.table > thead > tr > td,
|
||||
.table > tbody > tr > td,
|
||||
.table > tfoot > tr > td {
|
||||
padding: 12px;
|
||||
font-weight: @font_light;
|
||||
line-height: 1.42857143;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid @color_grey-light;
|
||||
}
|
||||
.table > thead > tr > th {
|
||||
vertical-align: bottom;
|
||||
font-weight: @font_light;
|
||||
.fz(18);
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
}
|
||||
.table > caption + thead > tr:first-child > th,
|
||||
.table > colgroup + thead > tr:first-child > th,
|
||||
.table > thead:first-child > tr:first-child > th,
|
||||
.table > caption + thead > tr:first-child > td,
|
||||
.table > colgroup + thead > tr:first-child > td,
|
||||
.table > thead:first-child > tr:first-child > td {
|
||||
border-top: 0;
|
||||
}
|
||||
.table > tbody + tbody {
|
||||
border-top: 2px solid @color_grey-light;
|
||||
}
|
||||
.table .table {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.table-condensed > thead > tr > th,
|
||||
.table-condensed > tbody > tr > th,
|
||||
.table-condensed > tfoot > tr > th,
|
||||
.table-condensed > thead > tr > td,
|
||||
.table-condensed > tbody > tr > td,
|
||||
.table-condensed > tfoot > tr > td {
|
||||
padding: 5px;
|
||||
}
|
||||
.table-bordered {
|
||||
border: 1px solid @color_grey-light;
|
||||
}
|
||||
.table-bordered > thead > tr > th,
|
||||
.table-bordered > tbody > tr > th,
|
||||
.table-bordered > tfoot > tr > th,
|
||||
.table-bordered > thead > tr > td,
|
||||
.table-bordered > tbody > tr > td,
|
||||
.table-bordered > tfoot > tr > td {
|
||||
border: 1px solid @color_grey-light;
|
||||
}
|
||||
.table-bordered > thead > tr > th,
|
||||
.table-bordered > thead > tr > td {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
.table-striped > tbody > tr:nth-of-type(odd) {
|
||||
background-color: @color_grey-lighter;
|
||||
}
|
||||
.table-hover > tbody > tr:hover {
|
||||
background-color: lighten(@color_grey-light, 10%);
|
||||
}
|
||||
table col[class*="col-"] {
|
||||
position: static;
|
||||
float: none;
|
||||
display: table-column;
|
||||
}
|
||||
table td[class*="col-"],
|
||||
table th[class*="col-"] {
|
||||
position: static;
|
||||
float: none;
|
||||
display: table-cell;
|
||||
}
|
||||
.table > thead > tr > td.active,
|
||||
.table > tbody > tr > td.active,
|
||||
.table > tfoot > tr > td.active,
|
||||
.table > thead > tr > th.active,
|
||||
.table > tbody > tr > th.active,
|
||||
.table > tfoot > tr > th.active,
|
||||
.table > thead > tr.active > td,
|
||||
.table > tbody > tr.active > td,
|
||||
.table > tfoot > tr.active > td,
|
||||
.table > thead > tr.active > th,
|
||||
.table > tbody > tr.active > th,
|
||||
.table > tfoot > tr.active > th {
|
||||
background-color: lighten(@color_grey-light, 10%);
|
||||
}
|
||||
.table-hover > tbody > tr > td.active:hover,
|
||||
.table-hover > tbody > tr > th.active:hover,
|
||||
.table-hover > tbody > tr.active:hover > td,
|
||||
.table-hover > tbody > tr:hover > .active,
|
||||
.table-hover > tbody > tr.active:hover > th {
|
||||
background-color: @color_grey-light;
|
||||
}
|
||||
.table > thead > tr > td.success,
|
||||
.table > tbody > tr > td.success,
|
||||
.table > tfoot > tr > td.success,
|
||||
.table > thead > tr > th.success,
|
||||
.table > tbody > tr > th.success,
|
||||
.table > tfoot > tr > th.success,
|
||||
.table > thead > tr.success > td,
|
||||
.table > tbody > tr.success > td,
|
||||
.table > tfoot > tr.success > td,
|
||||
.table > thead > tr.success > th,
|
||||
.table > tbody > tr.success > th,
|
||||
.table > tfoot > tr.success > th {
|
||||
background-color: lighten(@color_green, 35%);
|
||||
}
|
||||
.table-hover > tbody > tr > td.success:hover,
|
||||
.table-hover > tbody > tr > th.success:hover,
|
||||
.table-hover > tbody > tr.success:hover > td,
|
||||
.table-hover > tbody > tr:hover > .success,
|
||||
.table-hover > tbody > tr.success:hover > th {
|
||||
background-color: lighten(@color_green, 25%);
|
||||
}
|
||||
.table > thead > tr > td.info,
|
||||
.table > tbody > tr > td.info,
|
||||
.table > tfoot > tr > td.info,
|
||||
.table > thead > tr > th.info,
|
||||
.table > tbody > tr > th.info,
|
||||
.table > tfoot > tr > th.info,
|
||||
.table > thead > tr.info > td,
|
||||
.table > tbody > tr.info > td,
|
||||
.table > tfoot > tr.info > td,
|
||||
.table > thead > tr.info > th,
|
||||
.table > tbody > tr.info > th,
|
||||
.table > tfoot > tr.info > th {
|
||||
background-color: lighten(@color_blue, 40%);
|
||||
}
|
||||
.table-hover > tbody > tr > td.info:hover,
|
||||
.table-hover > tbody > tr > th.info:hover,
|
||||
.table-hover > tbody > tr.info:hover > td,
|
||||
.table-hover > tbody > tr:hover > .info,
|
||||
.table-hover > tbody > tr.info:hover > th {
|
||||
background-color: lighten(@color_blue, 30%);
|
||||
}
|
||||
.table > thead > tr > td.warning,
|
||||
.table > tbody > tr > td.warning,
|
||||
.table > tfoot > tr > td.warning,
|
||||
.table > thead > tr > th.warning,
|
||||
.table > tbody > tr > th.warning,
|
||||
.table > tfoot > tr > th.warning,
|
||||
.table > thead > tr.warning > td,
|
||||
.table > tbody > tr.warning > td,
|
||||
.table > tfoot > tr.warning > td,
|
||||
.table > thead > tr.warning > th,
|
||||
.table > tbody > tr.warning > th,
|
||||
.table > tfoot > tr.warning > th {
|
||||
background-color: lighten(@color_orange, 40%);
|
||||
}
|
||||
.table-hover > tbody > tr > td.warning:hover,
|
||||
.table-hover > tbody > tr > th.warning:hover,
|
||||
.table-hover > tbody > tr.warning:hover > td,
|
||||
.table-hover > tbody > tr:hover > .warning,
|
||||
.table-hover > tbody > tr.warning:hover > th {
|
||||
background-color: lighten(@color_orange, 30%);
|
||||
}
|
||||
.table > thead > tr > td.danger,
|
||||
.table > tbody > tr > td.danger,
|
||||
.table > tfoot > tr > td.danger,
|
||||
.table > thead > tr > th.danger,
|
||||
.table > tbody > tr > th.danger,
|
||||
.table > tfoot > tr > th.danger,
|
||||
.table > thead > tr.danger > td,
|
||||
.table > tbody > tr.danger > td,
|
||||
.table > tfoot > tr.danger > td,
|
||||
.table > thead > tr.danger > th,
|
||||
.table > tbody > tr.danger > th,
|
||||
.table > tfoot > tr.danger > th {
|
||||
background-color: lighten(@color_red, 35%);
|
||||
}
|
||||
.table-hover > tbody > tr > td.danger:hover,
|
||||
.table-hover > tbody > tr > th.danger:hover,
|
||||
.table-hover > tbody > tr.danger:hover > td,
|
||||
.table-hover > tbody > tr:hover > .danger,
|
||||
.table-hover > tbody > tr.danger:hover > th {
|
||||
background-color: lighten(@color_red, 25%);
|
||||
}
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
min-height: 0.01%;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.table-responsive {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
overflow-y: hidden;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
border: 1px solid @color_grey-light;
|
||||
}
|
||||
.table-responsive > .table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.table-responsive > .table > thead > tr > th,
|
||||
.table-responsive > .table > tbody > tr > th,
|
||||
.table-responsive > .table > tfoot > tr > th,
|
||||
.table-responsive > .table > thead > tr > td,
|
||||
.table-responsive > .table > tbody > tr > td,
|
||||
.table-responsive > .table > tfoot > tr > td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-responsive > .table-bordered {
|
||||
border: 0;
|
||||
}
|
||||
.table-responsive > .table-bordered > thead > tr > th:first-child,
|
||||
.table-responsive > .table-bordered > tbody > tr > th:first-child,
|
||||
.table-responsive > .table-bordered > tfoot > tr > th:first-child,
|
||||
.table-responsive > .table-bordered > thead > tr > td:first-child,
|
||||
.table-responsive > .table-bordered > tbody > tr > td:first-child,
|
||||
.table-responsive > .table-bordered > tfoot > tr > td:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.table-responsive > .table-bordered > thead > tr > th:last-child,
|
||||
.table-responsive > .table-bordered > tbody > tr > th:last-child,
|
||||
.table-responsive > .table-bordered > tfoot > tr > th:last-child,
|
||||
.table-responsive > .table-bordered > thead > tr > td:last-child,
|
||||
.table-responsive > .table-bordered > tbody > tr > td:last-child,
|
||||
.table-responsive > .table-bordered > tfoot > tr > td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.table-responsive > .table-bordered > tbody > tr:last-child > th,
|
||||
.table-responsive > .table-bordered > tfoot > tr:last-child > th,
|
||||
.table-responsive > .table-bordered > tbody > tr:last-child > td,
|
||||
.table-responsive > .table-bordered > tfoot > tr:last-child > td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
75
application/view/mockup/template/less/modules/_tabs.less
Normal file
75
application/view/mockup/template/less/modules/_tabs.less
Normal file
@@ -0,0 +1,75 @@
|
||||
.tabs{
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: block;
|
||||
|
||||
.content{
|
||||
border-radius: 3px;
|
||||
padding: 30px;
|
||||
border: 1px solid @color_grey-light;
|
||||
|
||||
p:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.steps{
|
||||
margin: 0;
|
||||
|
||||
ul{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
& > li{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
background-color: @color_grey-lighter;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
margin-right: 10px;
|
||||
margin-bottom: -1px;
|
||||
border-radius: 3px;
|
||||
|
||||
i{
|
||||
margin-left: 2px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&.current{
|
||||
background-color: white;
|
||||
border-bottom: 1px solid white;
|
||||
outline: none;
|
||||
|
||||
a, a:hover{
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
a{
|
||||
.fz(14);
|
||||
color: @color_black;
|
||||
padding: 10px 15px;
|
||||
display: block;
|
||||
|
||||
&:hover{
|
||||
color: @color_black;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tab-title{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.tabs .steps { display: block; }
|
||||
.tabs .steps ul > li { display: block; width: 100%; }
|
||||
}
|
||||
53
application/view/mockup/template/less/modules/_tags.less
Normal file
53
application/view/mockup/template/less/modules/_tags.less
Normal file
@@ -0,0 +1,53 @@
|
||||
.tags{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
.fz(12);
|
||||
}
|
||||
|
||||
.tag-item{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
|
||||
a{
|
||||
display: block;
|
||||
color: @color_black;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 9px;
|
||||
padding: 2px 12px 2px 11px;
|
||||
border: 1px solid @color_grey-light;
|
||||
border-right: 0;
|
||||
position: relative;
|
||||
border-radius: 3px 0 0 3px;
|
||||
|
||||
&:before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 19px;
|
||||
top: 3px;
|
||||
right: -9px;
|
||||
background-color: white;
|
||||
border-radius: 0 5px 0 0;
|
||||
border-top: 1px solid @color_grey-light;
|
||||
border-right: 1px solid @color_grey-light;
|
||||
.transform(rotate(45deg));
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:after{
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: 1px solid @color_grey-light;
|
||||
top: 11px;
|
||||
right: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
.testimonial{
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testimonial-photo-wrapper{
|
||||
width: 90px;
|
||||
padding: 3px;
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 50%;
|
||||
line-height: 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
margin-bottom: 15px;
|
||||
background-color: white;
|
||||
position: relative;
|
||||
|
||||
&:after{
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 120px;
|
||||
height: 1px;
|
||||
background-color: @color_grey-light;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
.transform(rotate(-45deg));
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.testimonial-photo{
|
||||
max-width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.testimonial-name{
|
||||
margin-bottom: 15px;
|
||||
.fz(18);
|
||||
}
|
||||
|
||||
.testimonial-text{
|
||||
.fz(15);
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
// Youtube TV
|
||||
@import (less) '../libs/ytv.css';
|
||||
|
||||
.ytv-canvas{
|
||||
height: 420px;
|
||||
margin-bottom: 30px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.ytv-video{
|
||||
border-left: 1px solid @color_grey-light;
|
||||
border-top: 1px solid @color_grey-light;
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
}
|
||||
|
||||
.ytv-playlist-open .ytv-playlists{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.ytv-canvas ::-webkit-scrollbar{
|
||||
border-left: none;
|
||||
width: 6px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.ytv-list .ytv-arrow{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ytv-canvas ::-webkit-scrollbar-thumb{
|
||||
background: @color_grey-light !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ytv-canvas ::-webkit-scrollbar{
|
||||
border-left: 1px solid @color_grey-light !important;
|
||||
}
|
||||
|
||||
.ytv-list-header{
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
}
|
||||
|
||||
.ytv-list{
|
||||
border: 1px solid @color_grey-light;
|
||||
}
|
||||
|
||||
.ytv-list a{
|
||||
color: @color_black;
|
||||
border-bottom: none;
|
||||
padding: 10px 10px 0 10px;
|
||||
|
||||
li:last-child &{
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.ytv-list .ytv-content{
|
||||
padding-left: 130px;
|
||||
}
|
||||
|
||||
.ytv-list .ytv-thumb{
|
||||
outline: none;
|
||||
border: 1px solid @color_grey-light;
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small) {
|
||||
.ytv-list-header{ display: none; }
|
||||
.ytv-list-inner { top: 0; }
|
||||
.ytv-content { display: none; }
|
||||
.ytv-list { width: 150px; }
|
||||
.ytv-video { width: 100%; padding-right: 150px; }
|
||||
}
|
||||
|
||||
.media-mixin(@break) when (@break = @break-small-x) {
|
||||
.ytv-canvas { height: 300px; }
|
||||
.ytv-list { display: none; }
|
||||
.ytv-video { width: 100%; padding-right: 0; }
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
// Video custom
|
||||
@import (less) '../libs/videojs.css';
|
||||
|
||||
.video-js {
|
||||
width: 100%!important;
|
||||
height: auto!important;
|
||||
text-shadow: .8px .8px #fff
|
||||
}
|
||||
|
||||
.video-js:after {
|
||||
content: '.';
|
||||
display: block;
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
margin: 0 0 0 -100%;
|
||||
padding: 40.1% 0 0
|
||||
}
|
||||
|
||||
.vjs-default-skin {
|
||||
color: #000
|
||||
}
|
||||
|
||||
.vjs-default-skin .vjs-play-progress,
|
||||
.vjs-default-skin .vjs-volume-level {
|
||||
background-color: #4f4f4f
|
||||
}
|
||||
|
||||
.vjs-default-skin .vjs-big-play-button,
|
||||
.vjs-default-skin .vjs-control-bar {
|
||||
background: rgba(255, 255, 255, 1)
|
||||
}
|
||||
|
||||
.vjs-default-skin .vjs-slider {
|
||||
background: rgba(255, 255, 255, .3333333333333333)
|
||||
}
|
||||
.vjs-default-skin .vjs-control-bar {
|
||||
font-size: 80%
|
||||
|
||||
}
|
||||
|
||||
.vjs-big-play-button {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto
|
||||
}
|
||||
|
||||
.video-js-responsive-container {
|
||||
width: 70%;
|
||||
box-shadow: 0 0 80px 20px rgba(255, 255, 255, .2333333333333333);
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.video-js {
|
||||
&:hover button.vjs-big-play-button{
|
||||
color: @color_blue;
|
||||
border-color: @color_blue;
|
||||
}
|
||||
|
||||
button.vjs-big-play-button{
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
border-color: white;
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
line-height: 95px;
|
||||
background-color: #73859f;
|
||||
background-color: rgba(115,133,159,.5);
|
||||
transition: color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.vjs-control-bar{
|
||||
background-color: rgb(34, 136, 204)!important;
|
||||
background-color: rgba(34, 136, 204, .7)!important;
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-poster{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.video-js, .vjs-control-bar{
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.video-js{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
@import (less) '../libs/videojs-playlist.css';
|
||||
|
||||
.vjs-playlist{
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vjs-playlist ul{
|
||||
margin: 0;
|
||||
max-height: 236px;
|
||||
overflow-y: scroll;
|
||||
border: 1px solid @color_grey-light;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vjs-playlist ul li{
|
||||
background-color: white;
|
||||
background-color: @color_grey-lighter;
|
||||
border-bottom: 1px solid @color_grey-light;
|
||||
position: relative;
|
||||
|
||||
&:last-child{
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-playlist ul li a.vjs-track{
|
||||
color: @color_black;
|
||||
padding-left: 45px;
|
||||
position: relative;
|
||||
padding-right: 100px;
|
||||
|
||||
padding-left: 60px;
|
||||
color: darken(@color_grey-dark, 15%);
|
||||
|
||||
&:before{
|
||||
content: '\f04b';
|
||||
font-family: @icons;
|
||||
position: absolute;
|
||||
display: block;
|
||||
color: @color_grey-dark;
|
||||
font-size: 13px;
|
||||
top: 13px;
|
||||
left: 15px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 1px solid @color_grey-light;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
text-indent: 4px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
&.currentTrack:before{
|
||||
content: '\f028';
|
||||
color: @color_blue;
|
||||
font-size: 14px;
|
||||
text-indent: 3px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.transition(color);
|
||||
|
||||
&.currentTrack{
|
||||
background-color: white;
|
||||
color: @color_blue;
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-playlist ul li:hover{
|
||||
background-color: white;
|
||||
|
||||
a.vjs-track{
|
||||
color: @color_blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-playlist ul li a.video-playlist-item-download{
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
right: 10px;
|
||||
padding: 10px;
|
||||
top: 5px;
|
||||
z-index: 2;
|
||||
.transition(color);
|
||||
color: @color_grey-dark;
|
||||
|
||||
&:hover{
|
||||
color: @color_blue;
|
||||
}
|
||||
}
|
||||
|
||||
.video-playlist-item-duration{
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.video-playlist-custom.video-js{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.video-js .vjs-control.vjs-prev-button,
|
||||
.video-js .vjs-control.vjs-next-button{
|
||||
&:focus:before, &:focus{
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
&:before{
|
||||
line-height: 30px;
|
||||
font-family: @icons;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.video-js .vjs-control.vjs-prev-button:before{
|
||||
content: '\f049';
|
||||
}
|
||||
|
||||
.video-js .vjs-control.vjs-next-button:before{
|
||||
content: '\f050';
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
.video-section{
|
||||
border-top: 1px solid #e9eaec;
|
||||
border-bottom: 1px solid #e9eaec;
|
||||
background-image: url(../img/backgrounds/13.jpg);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
padding: 20% 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-section-fullwidth{
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
.video-section-button-img{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
.transform (translateX(-50%) translateY(-50%));
|
||||
display: block;
|
||||
max-height: 50%;
|
||||
max-width: 100%;
|
||||
cursor: pointer;
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
@media all and (max-width: @break-small-x){
|
||||
.video-section-button-img{
|
||||
max-height: 70%;
|
||||
}
|
||||
|
||||
.video-section{
|
||||
padding: 30% 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
.video-trigger-play-button{
|
||||
font-size: 25px;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
.video-trigger-button{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.header-back-soft{
|
||||
.video-trigger-button-img{
|
||||
top: 40%;
|
||||
}
|
||||
}
|
||||
.video-trigger-button-img{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
.transform(translateX(-50%) translateY(-50%));
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.video-trigger-modal{
|
||||
background-color: #fff;
|
||||
display: none;
|
||||
min-width: 300px;
|
||||
width: 900px;
|
||||
line-height: 0;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.video-trigger-modal-content{
|
||||
|
||||
iframe{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.video{
|
||||
max-width: 100%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.fluid-width-video-wrapper{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
.visual-guide-steps{
|
||||
padding: 0;
|
||||
padding-top: 90px;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.visual-guide-step{
|
||||
padding-left: 60px;
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.visual-guide-step-number{
|
||||
position: absolute;
|
||||
display: block;
|
||||
font-size: 52px;
|
||||
line-height: 37px;
|
||||
font-weight: bold;
|
||||
color: lighten(@color_grey-light, 9%);
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding-right: 15px;
|
||||
|
||||
&:after{
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-color: lighten(@color_grey-light, 9%);
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.visual-guide-step-title{
|
||||
font-size: 22px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 10px;
|
||||
color: @color_blue;
|
||||
}
|
||||
|
||||
.visual-guide-step-description{
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
@media all and (max-width: @break-medium){
|
||||
.visual-guide-steps{
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.visual-guide-img{
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: @break-small-x){
|
||||
.visual-guide-step-number{
|
||||
font-size: 40px;
|
||||
line-height: 30px;
|
||||
padding-right: 10px;
|
||||
|
||||
&:after{
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
}
|
||||
.visual-guide-step{
|
||||
padding-left: 50px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
.widget-recommended-products{
|
||||
margin: 0;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
&:after{
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-recommended-product{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-right: 20px;
|
||||
display: block;
|
||||
float: left;
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover .widget-recommended-product-link{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-recommended-product-img{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.widget-recommended-product-link{
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: @color_grey-lighter;
|
||||
border-radius: 3px;
|
||||
border: 1px solid lighten(@color_grey-light, 5%);
|
||||
padding: 10px 10px 7px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-recommended-product-link-title{
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 7px;
|
||||
color: @color_blue;
|
||||
|
||||
i{
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-recommended-product-link-description{
|
||||
font-size: 14px;
|
||||
font-weight: @font_light;
|
||||
color: @color_grey-dark;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media all and (max-width: @break-large-x){
|
||||
.widget-recommended-product{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.widget-recommended-product-img{
|
||||
width: 57px;
|
||||
}
|
||||
.widget-recommended-product-link{
|
||||
top: 50%;
|
||||
.transform(translateY(-50%));
|
||||
}
|
||||
.widget-title{
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
10
application/view/mockup/template/less/modules/_widget.less
Normal file
10
application/view/mockup/template/less/modules/_widget.less
Normal file
@@ -0,0 +1,10 @@
|
||||
.widget{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.widget-title{
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
font-weight: 300;
|
||||
color: @color_grey;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
Reference in New Issue
Block a user