File: /home/slyfwmm/dallavitae/OLD_WP/wp-content/themes/skrollex/assets/css/src/decorations.less
/*** Decorations / .button, .line, .half-height, .full-height, .uppercase, .border, ... ***/
@content-padding-top: 75px;
@content-padding-bottom: 64px;
@content-padding-top-small: 40px;
@content-padding-bottom-small: 50px;
@content-padding-top-header: 60px;
@content-padding-bottom-header: 20px;
@content-padding-top-first: 55px;
@content-padding-bottom-first: 55px;
.lead{
font-size: 16px;
line-height: 24px;
letter-spacing: 1.2px;
.resp-prop(margin-top, 30px, 10px);
.resp-prop(margin-bottom, 40px, 13px);
}
.heading-page-title{
.resp-font-line(90px, 50px, 1.2);
font-weight: @fw-800;
}
.heading-section-title{
.resp-font-line(80px, 42px, 1.2);
font-weight: @fw-700;
}
.heading-col-title, .hover-overlay .overlay h4{
.resp-font-line(20px, 13px, 1.2);
font-weight: @fw-700;
}
.heading-subsection-title, .heading-subsection-col-title, .heading-subsection-title text-center{
.resp-font-line(30px, 25px, 1.2);
font-weight: @fw-700;
}
.heading-block-title{
.resp-font-line(16px, 13px, 1.2);
font-weight: @fw-700;
}
.photo-stream{
line-height: 0;
}
.header-details, .subsection-details{
.resp-font-line(13px, 11px, 1.7);
font-weight: @fw-700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 11px;
}
.col-details{
font-weight: @fw-500;
text-transform: uppercase;
font-size: 13px;
line-height: 22px;
letter-spacing: 1.2px;
}
.header-caption{
font-weight: @fw-500;
text-transform: uppercase;
font-size: 13px;
line-height: 22px;
letter-spacing: 1.2px;
}
.circle-icon{
margin-top: 20px;
}
.circle-caption{
margin-top: 28px;
&:after{
display: block;
content: "";
width: 80px;
height: 3px;
margin: 11px auto 11px;
}
}
.button, .list-group-item, .icon-bar, input[type=submit], .form-submit input[type=submit]{
.transition(~"color .3s, background-color .3s");
}
.button{
border-color: transparent;
}
.line-through{
text-decoration: line-through;
}
.col-left-marginalia{
float:left;
margin-right: 10px;
}
.col-right-marginalia{
float:right;
margin-left: 10px;
}
.col-left-marginalia, .col-right-marginalia{
font-size: 24px;
-webkit-text-stroke: 1px;
}
.col-content{
overflow: hidden;
}
a.button, input.button, input[type=submit], .form-submit input[type=submit]{
padding: 13px 24px;
font-size: 13px;
}
.position-relative{
position: relative;
}
.position-middle{
position: absolute;
top: 50%;
.transform(~"translateY(-50%)");
}
.position-center{
position: absolute;
left: 50%;
.transform(~"translateX(-50%)");
}
.position-middle-center{
position: absolute;
left: 50%;
top: 50%;
.transform(~"translate(-50%,-50%)");
}
.uppercase{
text-transform: uppercase;
}
.help-block{
margin-top: 0;
}
.scale-width{
width: 100%;
height: auto;
}
.scale-height{
width: auto;
height: 100%;
}
.col-icon{
font-size: 48px;
float: left;
padding: 0 10px;
text-align: left;
line-height: 1;
margin-top: 20px;
}
.col-content{
padding: 0 15px;
}
.border{
border: 1px solid;
}
.border-no{
border: none !important;
}
.border-top{
border-top: 1px solid;
}
.border-right{
border-right: 1px solid;
}
.border-bottom{
border-bottom: 1px solid;
}
.border-left{
border-left: 1px solid;
}
.no-border{
border: none !important;
border-top: none !important;
border-right: none !important;
border-bottom: none !important;
border-left: none !important;
border-width: 0px !important;
border-top-width: 0px !important;
border-right-width: 0px !important;
border-bottom-width: 0px !important;
border-left-width: 0px !important;
}
.button, input[type=submit], .form-submit input[type=submit]{
margin: 2px;
}
a.button, .btn, input.button, input[type=submit], .form-submit input[type=submit]{
border-style: solid;
border-width: 1px;
line-height: 22px;
padding: 8px 12px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
}
.image-hover{
.col-body{
.col-details{
font-size: 13px;
line-height: 1.2;
text-transform: none;
font-weight: @fw-500;
letter-spacing: 1.2px;
margin-top: 7px;
}
}
}
.underline-text, .underline-highlight, .underline-link, .underline-heading{
display: inline-block;
border-bottom-width: 3px;
padding-bottom: 7px;
}
.underline-text, .underline-highlight, .underline-link, .underline-heading{
border-bottom-style: solid;
}
.col-style-decorated{
&:before{
width: 100%;
height: 2px;
display: block;
content: '';
margin-top: 18px;
}
}
.uppercase{
text-transform: uppercase;
}
.non-uppercase{
text-transform: none !important;
}
.slogan{
text-transform: uppercase;
font-size: 40px;
.resp-font-line(40px, 16px, 67.7/40);
}
.half-height{
height: 50%;
}
.full-height{
height: 100%;
}
.map-overlay{
.transform(~"translateY(0%)");
}
@media (max-width: 767px) {
.hide-on-small-device{
display: none;
}
}
.mobile .hide-on-mobile{
display: none;
}
.alt-placeholder{
display: none;
.ie9 &{
display: block;
}
}
.banner-box{
text-align: center;
*{
text-align: inherit;
}
.banner-cell{
padding-top: 15px;
padding-bottom: 15px;
letter-spacing: 1.2px;
.banner-title{
font-size: 30px;
font-weight: @fw-300;
line-height: 36px;
margin-top: 28px;
text-transform: uppercase;
}
.banner-subtitle{
font-weight: @fw-700;
line-height: 36px;
margin-bottom: 11px;
text-transform: uppercase;
letter-spacing: 2px;
}
}
}
.pane{
padding: 0 !important;
}
.incut{
height: 400px;
&>div{
width: 50%;
h3{
margin-top: 0px;
}
@media (max-width: 1023px) {
width: 90%;
}
}
}
.text-uppercase{
text-transform: uppercase;
}
.label{
margin: 2px;
}
.control-group{
&.success, &.warning, &.info, &.error, &.primary, &.danger{
background-color: transparent;
}
}
.col-link{
text-transform: uppercase;
font-weight: @fw-500;
}
.narrow{
@media (min-width: 481px) {
width: 50%;
margin-left: auto;
margin-right: auto;
}
}
.height-100{
min-height: 100px;
}
.height-200{
min-height: 200px;
}
.height-300{
min-height: 300px;
}
.height-400{
min-height: 400px;
}
.height-500{
min-height: 500px;
}
.height-600{
min-height: 600px;
}
.height-700{
min-height: 700px;
}
.height-800{
min-height: 800px;
}
.height-900{
min-height: 900px;
}
.height-1000{
min-height: 1000px;
}
@media (max-width: 1023px) {
.hide-on-small-devices{
display: none;
}
}
.font-big{
font-size: 130%;
}
.float-text-left, .float-text-right{
font-size: 35px;
line-height: 39px;
text-align: center;
letter-spacing: 15px;
@media (max-width: 1023px) {
font-size: 20px;
line-height: 22px;
}
}
.float-text-top, .float-text-bottom{
text-align: center;
}
.float-text-left{
top: 50%;
left: 60px;
transform-origin: 50% 0 0;
.transform(~"translate(-50%, 0) rotate(-90deg)");
@media (max-width: 1460px) {
left: 50px;
}
@media (max-width: 1367px) {
display: none;
}
}
.float-text-right{
top: 50%;
right: 60px;
transform-origin: 50% 100% 0;
.transform(~"translate(50%, -100%) rotate(-90deg)");
@media (max-width: 1460px) {
right: 50px;
}
@media (max-width: 1367px) {
display: none;
}
}
.float-text-top{
top: 90px;
left: 50%;
.transform(~"translate(-50%, 0)");
@media (max-width: 769px) {
top: 70px;
}
}
.float-text-bottom{
bottom: 70px;
left: 50%;
.transform(~"translate(-50%, 0)");
@media (max-width: 1460px) {
bottom: 50px;
}
@media (max-width: 1249px) {
bottom: 25px;
}
@media (max-width: 769px) {
bottom: 10px;
}
}
.float-text-left-top{
left: 70px;
top: 90px;
text-align: left;
@media (max-width: 1460px) {
left: 50px;
}
@media (max-width: 1249px) {
left: 25px;
}
@media (max-width: 769px) {
left: 10px;
top: 70px;
}
}
.float-text-left-bottom{
left: 70px;
bottom: 70px;
text-align: left;
@media (max-width: 1460px) {
left: 50px;
bottom: 50px;
}
@media (max-width: 1249px) {
left: 25px;
bottom: 25px;
}
@media (max-width: 769px) {
left: 10px;
bottom: 10px;
}
}
.float-text-right-top{
right: 70px;
top: 90px;
text-align: right;
@media (max-width: 1460px) {
right: 50px;
}
@media (max-width: 1249px) {
right: 25px;
}
@media (max-width: 769px) {
right: 10px;
top: 70px;
}
}
.float-text-right-bottom{
right: 70px;
bottom: 70px;
text-align: right;
@media (max-width: 1460px) {
right: 50px;
bottom: 50px;
}
@media (max-width: 767px) {
right: 10px;
bottom: 10px;
}
}
.float-text-left, .float-text-right, .float-text-top, .float-text-bottom,
.float-text-left-top, .float-text-left-bottom, .float-text-right-top, .float-text-right-bottom{
z-index: 0;
position: fixed;
margin-bottom: 0;
.button{
margin-top: 11px;
}
}
.float-text-left, .float-text-right,
.float-text-left-top, .float-text-left-bottom, .float-text-right-top, .float-text-right-bottom{
@media (max-width: 1023px) {
display: none;
}
}
.float-text-top, .float-text-bottom,
.float-text-left-top, .float-text-left-bottom, .float-text-right-top, .float-text-right-bottom{
@media (max-height: 600px) {
display: none;
}
}
.normal-letter-spacing{
letter-spacing: normal !important;
}
.color-link-inherit a{
color: inherit !important;
}
[id*=svg-overlay-lamp-mask-light]{
fill: rgba(255, 255, 255, 0.3);
}