less 较少计算插值
将值插值为cc3 calc函数
less-calc-interpolcation.less
@my-var: 100%;
.class {
// '~' is Less for CSS escaping (http://lesscss.org/functions/#string-functions-e).
// It allows the variable interpolation to work for Less.
height: ~"calc(@{my-var} - 50px)"
}less D6横幅调整大小
调整横幅以调整D6主题的移动响应速度
shift
//
// Variables
// --------------------------------------------------
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
// @brand-primary: #0d79b7;
// @brand-secondary: #25292c;
/****************************
background Images
Uncomment and change the following for your first three images.
*****************************/
// @banner-img-1: '/sites/default/files/users/shiftnew/banners/shift-bg2.jpg';
// @banner-img-2: '/sites/default/files/users/shiftnew/banners/shift-bg3.jpg';
// @banner-img-3: '/sites/default/files/users/shiftnew/banners/shift-bg4.jpg';
// .responsive-slider {
// .head-caption {
// .text-center();
// }
// .slide {
// .add-psych (@color, @fade, @dark, @light);
// to have more photos create more banner variables and
// add uncomment/add the list below
// &:nth-of-type(4) {
// background-image: url(@banner-img-4);
// }
// &:nth-of-type(5) {
// background-image: url(@banner-img-5);
// }
// &:nth-of-type(6) {
// background-image: url(@banner-img-6);
// }
// }
// }
//Uncomment the following if you want to change the cta background
//@cta-section-bg: '/sites/default/files/users/shiftnew/banners/shift-bg1.jpg';
/****************************
The following are default colours from bootsrap
Uncomment if you want to change them.
*****************************/
// @gray-base: #000;
// @gray-darker: #25292c; //
// @gray-dark: lighten(@gray-base, 20%); // #333
// @gray: lighten(@gray-base, 33.5%); // #555
// @gray-light: lighten(@gray-base, 46.7%); // #777
// @gray-lighter: lighten(@gray-base, 93.5%); // #eee
// @white: white;
// @black: black;
// @white-haze: #F7F7F7;
/**************************
This is how they set the background colour based on the primary colour
Uncomment and change if you want to have a different background colour
***************************/
// @body-bg: contrast(@brand-primary, @gray-darker, @white-haze);
// @text-color: contrast(@body-bg, @gray-dark, @white);
/***************************
Default link Colours
****************************/
// @link-color: @brand-primary;
// @link-hover-color: darken(@link-color, 15%);
// @link-hover-decoration: underline;
/***************************
Typography - font Variables
****************************/
// @font-family-sans-serif: 'Lato', sans-serif;
// @font-family-serif: Georgia, "Times New Roman", Times, serif;
// @font-family-base: @font-family-sans-serif;
// @font-weight-base: 300;
// @font-size-base: 14px;
// @font-size-large: ceil((@font-size-base * 1.25)); // ~18px
// @font-size-small: ceil((@font-size-base * 0.85)); // ~12px
// @font-size-h1: floor((@font-size-base * 2.6)); // ~36px
// @font-size-h2: floor((@font-size-base * 2.15)); // ~30px
// @font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
// @font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
// @font-size-h5: @font-size-base;
// @font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
/***************************
General Settings
****************************/
// images
.img-responsive {
display: inline-block;
height: auto!important;
}
.img-left, .img-right {
margin-bottom: 10px;
display: block;
float: none;
}
@media (min-width: @screen-sm-min) {
.img-left {
float:left;
margin-right: 15px;
margin-bottom: 0;
}
.img-right {
float:right;
margin-left: 15px;
margin-bottom: 0;
}
}
.content-middle{
& > .content{
img{
padding:0;
}
}
}
.section-title{
@media screen and (max-width:@screen-xs){
padding-top: 20px;
}
}
#copyright p,
.btn-powered-by-aw{
@media screen and (max-width:@screen-sm-max){
float: none!important;
.text-center!important;
}
}
.btn-powered-by-aw{
margin:10px 0!important;
}
span.ext{
display: none;
}
// iframe responsive
.iframeWrapper {
position:relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
}
/****************************
Carousel Caption fonts
****************************/
// @font-size-base-slider: 80px;
// @font-size-h1-slider: @font-size-base-slider;
// @font-size-h2-slider: ceil((@font-size-base-slider * 0.90));
// @font-size-h3-slider: ceil((@font-size-base-slider * 0.60));
// @font-size-h4-slider: ceil((@font-size-base-slider * 0.50));
// @font-size-h5-slider: ceil((@font-size-base-slider * 0.40));
// @font-size-h6-slider: ceil((@font-size-base-slider * 0.30));
// @font-weight-slider: 300;
/****************************
Navigation
*****************************/
// @component-active-color: #fff;
// @component-active-bg: @brand-primary;
// Basics of a navbar
// @navbar-height: 80px;
// @navbar-margin-bottom: 0;
// @navbar-border-radius: @border-radius-base;
// @navbar-padding-horizontal: floor((@grid-gutter-width / 2));
// @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
// @navbar-collapse-max-height: 340px;
// @navbar-unstuck-box-shadow-height: 12px;
// @navbar-default-color: contrast(@body-bg, #777, lighten(@gray-light, 15%));
// @navbar-default-bg: contrast(@brand-primary, @gray-darker, #f8f8f8);
// @navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links
// @navbar-default-link-color: contrast(@navbar-default-bg, #777, lighten(@gray-light, 15%));
// @navbar-default-link-hover-color: contrast(@navbar-default-bg, #777, #fff);
// @navbar-default-link-hover-bg: transparent;
// @navbar-default-link-active-color: contrast(@navbar-default-bg, #555, #fff);
// @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
// @navbar-default-link-disabled-color: #ccc;
// @navbar-default-link-disabled-bg: transparent;
// Navbar brand label
// @navbar-default-brand-color: @navbar-default-link-color;
// @navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
// @navbar-default-brand-hover-bg: transparent;
// Navbar toggle
// @navbar-default-toggle-hover-bg: contrast(@navbar-default-bg, #ddd, #333 );
// @navbar-default-toggle-icon-bar-bg: contrast(@navbar-default-bg, #888, #fff);
// @navbar-default-toggle-border-color: contrast(@navbar-default-bg, #ddd, #333);
//Dropdown
// @dropdown-bg: contrast(@brand-primary, #222, #f8f8f8);
// @dropdown-border: rgba(0,0,0,.15);
// @dropdown-fallback-border: #ccc;
// @dropdown-divider-bg: #e5e5e5;
// @dropdown-link-color: contrast(@body-bg, #777, lighten(@gray-light, 15%));
// @dropdown-link-hover-color: contrast(@component-active-bg, #777, #fff);
// @dropdown-link-hover-bg: @component-active-bg;
// @dropdown-link-active-color: @component-active-color;
// @dropdown-link-active-bg: @component-active-bg;
// @dropdown-header-color: @gray-light;
// @dropdown-caret-color: #000;
/********************************
Line-height is not really used properly
this will fix that, if you change the
navbar-height variable now, this will work
********************************/
.user-navbar{
.navbar-nav{
a{
line-height: @navbar-height;
}
}
}
//it uses the same variable
#dashboard-menu{
& > .navbar {
@media screen and (min-width:@screen-sm-max){
min-height:80px;
}
}
}
/********************************
Dropdown list is too tall
********************************/
.dropdown-menu{
padding: 0;
background:transparent;
& > li{
background: @navbar-default-bg;
& > a{
@media screen and (min-width:@screen-sm){
line-height: 50px!important;
}
}
}
}
/****************************
Buttons
*****************************/
// @btn-font-weight: normal;
// @btn-default-color: #333;
// @btn-default-bg: #fff;
// @btn-default-border: #ccc;
// @btn-primary-color: #fff;
// @btn-primary-bg: @brand-primary;
// @btn-primary-border: darken(@btn-primary-bg, 5%);
// @btn-border-radius-base: @border-radius-base;
// @btn-border-radius-large: @border-radius-large;
// @btn-border-radius-small: @border-radius-small;
@backgroundColor: transparent;
.btn-primary {
.button-variant(@brand-primary, @backgroundColor, @brand-primary);
}
/**************************
Change the following variable if you like the 12 column grid
***************************/
// @grid-columns: 24;
/**************************
Change the following variable if don't like to any padding
inside your columns
***************************/
// @grid-gutter-width: 30px;
// Navbar collapse
/**************************
Change the following variable need to have different breakpoint
***************************/
// @grid-float-breakpoint: @screen-sm-min;
/***************************
Calculator Modal
****************************/
.bootstrapcalc {
.panel-default{
& > .panel-heading {
background: @brand-primary;
}
.panel-collapse{
padding: 10px 0;
}
}
.panel-title {
& > a{
display: block;
color: contrast(@brand-primary, @black, @white);
}
}
}
/**************************
You can change Modals colour / padding / size / etc.
***************************/
// @modal-inner-padding: 15px;
// @modal-title-padding: 15px;
// @modal-title-line-height: @line-height-base;
// @modal-content-bg: #fff;
// @modal-content-border-color: rgba(0,0,0,.2);
// //** Modal content border color **for IE8**
// @modal-content-fallback-border-color: #999;
// @modal-backdrop-bg: #000;
// @modal-backdrop-opacity: .5;
// @modal-header-border-color: #e5e5e5;
// @modal-footer-border-color: @modal-header-border-color;
// @modal-lg: 900px;
// @modal-md: 600px;
// @modal-sm: 300px;
/**************************
Some MISC variables for breadcrumb, team and blog
***************************/
// @breadcrumb-padding-vertical: 8px;
// @breadcrumb-padding-horizontal: 15px;
// @breadcrumb-bg: contrast(@brand-primary, @brand-secondary, @white);
// @breadcrumb-color: contrast(@body-bg);
// @breadcrumb-active-color: @gray-light;
//** Textual separator for between breadcrumb elements
// @breadcrumb-separator: "/";
// @breadcrumb-border: solid 2px @navbar-default-border;
// @team-member-border: solid 2px @navbar-default-border;
// @team-member-background: contrast(@brand-primary, @brand-secondary, @white);
// @blog-item-border: @team-member-border;
// @blog-item-background: @team-member-background;
// Mixings / classes you could use
// .centered;
// .bg(@background);
/**************************
@color - Color to use as the overlay.
@fade - In %, how much the overlay will be faded. try 50%.
@dark - This automatically uses the contrast function. This is the dark color.
@light - This is the light color of the contrast function.
eg: add-psych(@brand-primary; 50%; @brand-primary; @white);
**************************/
// .add-psych (@color, @fade, @dark, @light);
// .dark-psych;
// .main-color
// .img-single; //img with:100%;
// .btn-default;
// .btn-primary;
// .button-variant(@color1, transparent, @color3);
/***************************
fix for team nav for in a 4 used in an inside page instead of front
****************************/
.not-front {
#block-views-ind_team_member-block_1 {
.field-field-team-member-photo, .views-field-field-team-member-photo-fid {
float: none!important;
margin: 0!important;
}
}
}
// captcha
@media (max-width: @screen-xs-max) {
.g-recaptcha {
transform:scale(0.80);
-webkit-transform:scale(0.80);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
}
acardia
// @brand-primary: #d5aa6d;
// @brand-secondary: #282828;
// @white: #fff;
// @black: #000;
// @off-white: darken(@white, 2%);
// @grey: lighten(@black, 59%);
// @light-grey: lighten(@black, 70%);
// @lighter-grey: lighten(@black, 95%);
// @logo-minheight:125px;
// @social-icon-size: 24px;
// Static Banner
// @static-banner:'/sites/default/files/shared/banners/sand-stones.jpg';
// @static-banner-position: no-repeat center center fixed;
// @static-banner-height: 150px;
// Banner Slides
// @slideOverlay: fade(@black,40%);
// @banner1: url('/sites/all/themes/aw_responsive/frameworks/acadia/banners/banner1.jpg') no-repeat center center;
// @banner2: url('/sites/all/themes/aw_responsive/frameworks/acadia/banners/banner2.jpg') no-repeat center center;
// @banner3: url('/sites/all/themes/aw_responsive/frameworks/acadia/banners/banner3.jpg') no-repeat center center;
// arrow icon
// @read-more-icon: '\2192';
// margin-top for view all .btn
// @view-all-btn-offset: 60px;
/***************************
Calculator Modal
****************************/
.bootstrapcalc {
.panel-default{
& > .panel-heading {
/*background: @brand-primary;*/
}
.panel-collapse{
padding: 10px 0;
}
}
.panel-title {
& > a{
display: block;
/*color: contrast(@brand-primary, @black, @white);*/
}
}
}
/* ===============
Fonts
=============== */
// @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700);
// @import url(https://fonts.googleapis.com/css?family=Lora:400,700,400italic);
// @import url(https://fonts.googleapis.com/css?family=Raleway:400,600,700);
//@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
// @text-color: @grey;
// @font-family-base: 'Open Sans', sans-serif;
// @headings-font-family: @font-family-base;
// @headings-color: @black;
// @headings-font-weight: 500;
// @secondary-font: 'Lora', serif;
// @tertiary-font: 'Raleway', sans-serif;
// @font-size-base: 15px;
// @slide-timer-speed: 9.50s;
// @carousel-background-color: @black;
/* ===============
General
=============== */
// images
.img-responsive {
display: inline-block;
height: auto!important;
}
.img-left, .img-right {
margin-bottom: 10px;
display: block;
float: none;
}
@media (min-width: @screen-sm-min) {
.img-left {
float:left;
margin-right: 15px;
margin-bottom: 0;
}
.img-right {
float:right;
margin-left: 15px;
margin-bottom: 0;
}
}
a, a:visited{
// fix ios
cursor: pointer;
&:hover, &.active{
}
}
.btn{
border:0;
&.btn-primary{
font-weight: normal;
&:hover,
&:focus,
&:active,
&.active{
}
}
}
span.ext{
display: none;
}
// iframe responsive
.iframeWrapper {
position:relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
}
/* ===============
Navigation
=============== */
.pre-header-wrapper{
position: relative;
z-index: 99;
.logo-block{
}
.acadia-top-links-block{
}
}
#block-aw_custom-0{
.navbar{
.navbar-collapse{
.navbar-nav{
li{
a, a:visited{
font-weight: normal;
text-transform: none;
}
}
& > li{
&.dropdown, &.has-dropdown{
&.open{
& > a, & > a:hover{
//fixing the background white issue
background: @brand-primary;
color:@white;
}
}
}
}
}
}
}
}
/* ===============
Home - Metrics
=============== */
.acadia-metrics-block{
.metric-item-wrapper{
.metric-info{
.num-counter{
}
}
}
}
/* ===============
Home - About
=============== */
.acadia-about-block{
.about-item{
h3{
&:after{
}
}
}
}
/* ===============
Home - Services
=============== */
.acadia-services-block{
.service-item{
.icon-title-wrap{
h2{
&:after{
}
}
}
&:hover{
a{
}
}
}
}
/* ===============
Footer
=============== */
// .footer-wrapper{
// .acadia-footer-contact,
// .footer-links{
// .make-sm-column(12);
// }
// }
.footer-wrapper{
background:@brand-primary;
.footer-links{
ul{
li{
&:before, a, a:visited{
}
}
}
}
}
// captcha
@media (max-width: @screen-xs-max) {
.g-recaptcha {
transform:scale(0.80);
-webkit-transform:scale(0.80);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
}
jericho
#carousel-frontpage.carousel {
.item {
height: 300px; //300px height on mobile
}
.carousel-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 10px;
width: 100%;
font-size: 16px;
//Base font size
h1 {
color: @white;
font-size: 2em;
}
h2 {
color: @white;
font-size: 1.5em;
}
}
@media (min-width: @screen-md-min){
.item {
height: 450px; //450px height on tablet
}
.carousel-caption {
font-size: 24px;
}
}
@media (min-width: @screen-lg-min){
.item {
height: 600px; //600px height on desktop
}
.carousel-caption {
font-size: 28px;
}
}
}
Locarno
//BANNER
#carousel-frontpage.carousel {
//Captions
.carousel-caption {
transition: all 300ms ease;
top: 0%;
text-align: center;
h2.slide-heading {
color: @white;
}
h2.slide-heading-sub {
font-size: 34px;
margin-bottom: 20px;
color: @white;
}
a.btn.btn-primary {
font-size: 14px;
}
}
//Arrow Controls
@media (max-width: @screen-sm-max){
.carousel-control .glyphicon {
background: none;
color: @brand-primary;
&:hover {
background: none;
}
}
.carousel-bottom-caption {
display: none;
}
}
//Banner Size
.item {
transition: height 300ms ease;
height: 300px;
}
//Mobile <
@media (min-width: @screen-sm-min){
.carousel-caption {
text-align: left;
a.btn.btn-primary {
font-size: 18px;
}
}
.item {
height: 400px;
}
}
//Tablet >
@media (min-width: @screen-md-min){
.carousel-caption {
top: 15%;
h2.slide-heading-sub {
font-size: 50px;
}
}
.item {
height: 500px;
}
}
//Desktop >
@media (min-width: @screen-lg-min){
.carousel-caption {
h2.slide-heading-sub {
font-size: 56px;
}
}
.item {
height: 600px;
}
}
}less 菜单按钮
菜单按钮，kterýsez hamburgeru skladadokřižkupřipřidáníclassactive
menu-button.less
/*Navigation element*/
.menuButton(@width: 48, @color: #fff, @lineHeight: 3px, @spaceHeight: 4px) {
display: inline-block;
width: @width;
@height: (3 * @lineHeight) + (3 * @spaceHeight);
height: @height;
@position: (((3 * @lineHeight) + (3 * @spaceHeight)) - (3 * @lineHeight)) / 3;
transform: translateZ(0);
will-change: transform;
.line,
&:before,
&:after {
background-color: @color;
content: '';
display: block;
height: @lineHeight;
margin-left: 20%;
.translate3d(0, @position + @spaceHeight, 0);
transition: all 300ms ease 0s;
width: 60%;
border-radius: 2px;
}
&:before {
.translate3d(0, @position, 0)
}
&:after {
.translate3d(0, @position + (2 * @spaceHeight), 0)
}
&.active {
&:before {
.transform( rotate(45deg) translate3d(@height/2, @height/2, 0) )
}
&:after {
.transform( rotate(-45deg) translate3d(-(@lineHeight + @spaceHeight) + 0.5, (@lineHeight + @spaceHeight) - 0.5, 0) )
}
.line {
.opacity(0)
}
}
}
.nav-button {
.menuButton(44px, @color-grey);
//float: left;
margin-bottom: -16px;
//padding: 18px 0 6px 0px;
cursor: pointer;
height: 34px;
box-sizing: content-box;
}less CSS / LESS助手
alignments
// Alignment
.text-center{
text-align: center;
}
.align-vertical{
position: absolute;
transform: translatey(-50%);
top: 50%;
}
.align-horizontal{
position: absolute;
transform: translatex(-50%);
left: 50%;
}
.align-center{
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
various-flex-classes
.flex {
-webkit-display: flex;
display: flex;
//PARENT classes
//.flex__desktop
&-desktop{
@media @breakpoint-sm{
-webkit-display: flex;
display: flex;
}
}
&-mobile {
@media @breakpoint-sm-down{
display: flex;
}
}
//.flex-1
&-1{
//display: -webkit-flex;
//display: flex;
> *{
flex: 1;
min-width: 1px;
}
}
//.flex-children > *
&-children > *{
-webkit-display: flex;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
//.flex-grow > *
&-grow > *{
flex-grow: 1;
}
//.flex-wrap
&-wrap{
flex-wrap: wrap;
}
//.flex-column
&-column{
flex-direction: column;
}
//.flex-column-tablet
&-column-tablet{
@media @breakpoint-md-down {
flex-direction: column;
}
}
//.flex-center
&-center{
justify-content: center;
}
//.flex-supercenter
&-supercenter{
justify-content: center;
align-items: center;
}
//.flex-space-between
&-space-between{
justify-content: space-between;
}
//.flex-space-around
&-space-around{
justify-content: space-between;
}
//.flex-end
&-end{
justify-content: flex-end;
}
//.flex-v-start
&-v-start{
align-items: flex-start;
}
//.flex-v-end
&-v-end{
align-items: flex-end;
}
//.flex-center
&-v-center{
align-items: center;
}
//.flex-v-stretch
&-v-stretch{
align-items: stretch;
}
//.flex-v-baseline
&-v-baseline{
align-items: baseline;
}
//CHILD classes
//.flex-c-grow
&-c-grow{
flex-grow: 1;
}
//.flex-c-center
&-c-center{
align-self: center;
}
//.flex-c-start
&-c-start{
align-self: flex-start;
}
//.flex-c-end
&-c-end{
align-self: flex-end;
}
//.flex-c-stretch
&-c-stretch{
align-self: stretch;
}
//.flex-c-baseline
&-c-baseline{
align-self: baseline; //who knows
}
//.flex-c-children
&-c-children{
align-items: center;
justify-content: center;
text-align: center;
}
&-row {
flex-flow: row wrap;
}
}
transitions-animations
.Transition( @property: all, @time:.5s ) {
transition: @property @time;
-webkit-transition: @property @time;
-moz-transition: @property @time;
-ms-transition: @property @time;
}
.TransitionEase( @property, @time ) {
transition: @property @time ease;
-webkit-transition: @property @time ease;
-moz-transition: @property @time ease;
-ms-transition: @property @time ease;
}
.TransformScale( @variable) {
transform: scale( @variable );
-ms-transform: scale( @variable );
-webkit-transform: scale( @variable );
}
.TransformRotate( @variable) {
transform: rotate( @variable );
-ms-transform: rotate( @variable );
-webkit-transform: rotate( @variable );
}
.ColorTransition(@color-1, @color-2){
.TransitionEase(all, 0.5s);
color: @color-2;
&:hover{
color: @color-1;
}
}
flex-grid
.flex-quarters__child {
flex: 1 1 24%;
max-width: 24%;
margin: 0 0.3% 1.5rem;
}
.flex-thirds__child {
flex: 1 1 32%;
max-width: 32%;
margin: 0 0.3% 1.5rem;
}
.flex-halves__child {
flex: 1 1 49%;
max-width: 49%;
margin: 0 0.3% 1.5rem;
}
.flex-none-full-width {
width: 100%;
flex: none;
max-width: 100%;
}
.flex-thirds {
.flex;
flex-wrap: wrap;
li,
article {
.flex-thirds__child;
@media @breakpoint-sm-down {
.flex-none-full-width;
}
}
}
.flex-thirds-and-quarters {
.flex;
flex-wrap: wrap;
li,
article {
@media @breakpoint-sm-down {
.flex-none-full-width;
}
@media @breakpoint-sm {
.flex-thirds__child;
}
@media @breakpoint-md {
.flex-quarters__child;
}
}
}
.flex-quarters {
.flex;
flex-wrap: wrap;
li,
article {
.flex-quarters__child;
@media @breakpoint-sm-down {
.flex-none-full-width;
}
}
}
.flex-halves {
.flex;
flex-wrap: wrap;
li,
article {
.flex-halves__child;
@media @breakpoint-sm-down {
.flex-none-full-width;
}
}
}
less 款式
styles.less
@import "variables.less";
@import "reset.less";
/*==========GENERAL STYLES==========*/
body {
overflow-x: hidden;
font-size: @main-font-size;
line-height: 1.5;
font-family: @font;
color: @text-color;
}
/*=TEXT=*/
h1 {
margin-bottom: 30px;
font-weight: 700;
font-size: 42px;
line-height: 1.4;
font-family: @font-accent;
text-align: center;
color: @accent-color;
}
h2 {
margin-bottom: 30px;
font-weight: 700;
font-size: 42px;
line-height: 1;
font-family: @font-accent;
color: @accent-color;
}
h3 {
margin-bottom: 20px;
font-weight: 700;
font-size: 24px;
line-height: 1.1;
font-family: @font;
color: @accent-color;
}
h4 {
margin-top: 30px;
margin-bottom: 15px;
font-weight: 700;
font-size: 18px;
line-height: 1.3;
font-family: @font;
text-transform: uppercase;
color: @text-color;
}
h5 {
margin-top: 20px;
margin-bottom: 15px;
font-weight: 700;
font-size: 16px;
line-height: 1.5;
font-family: @font;
text-transform: uppercase;
color: @text-color;
}
/*=LINKS&FORMS=*/
a, button {
text-decoration: none;
color: currentColor;
.transition();
}
a {
&:hover, &:active, &:focus {
outline: none;
text-decoration: none;
}
}
.btn {
display: block;
.box-sizing();
.border-radius(21px);
width: 166px;
height: 42px;
font-weight: 400;
font-size: 18px;
line-height: 1;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&:focus, &:active, &:hover {
outline: none;
text-decoration: none;
}
&-default {
color: #ffffff;
background-color: @accent-color-2;
&:focus, &:hover {
background-color: @accent-color-2-light;
}
&:active {
background-color: @accent-color-2;
}
}
}
a.btn {
line-height: 42px;
}
/*=HEADER=*/
@import (less) "slick.css";
less 变量
variables.less
@font: 'Roboto', sans-serif;
@font-accent: 'Merriweather', serif;
@accent-color: #62983a;//106,159,66
@text-color: #333333;
@bg-color: #ddecf6;
@main-font-size: 16px;
@trans: all ease 0.3s;less 引导模态
bootstrap_modal.html
<a href="#" class="btn btn-default home-btn" data-href="#request-call-popup" data-toggle="modal"
data-target="#request-call-popup">Contact Us</a>
<a href="#" class="btn btn-default home-btn" data-href="#status-popup" data-toggle="modal"
data-target="#status-popup">Contact Us</a>
<div id="request-call-popup" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
<span class="modal-close-item modal-close-item-1"></span>
<span class="modal-close-item modal-close-item-2"></span>
</button>
</div>
</div>
</div>
bootstrap_modal.less
/*=MODAL=*/
.modal-backdrop {
background-color: #ffffff;
&.in {
opacity: 0.70;
}
}
.modal-dialog {
margin-left: auto;
margin-right: auto;
.border-radius(23px);
border: none;
width: 98%;
max-width: 460px;
background-color: transparent;
.box-shadow(0, 0, 15px, 0, rgba(0,0,0,0.2));
}
.modal-content {
.border-radius(23px);
border: none;
background-color: #ffffff;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.modal-close {
position: absolute;
top: 15px;
right: 15px;
.border-radius(50%);
width: 32px;
height: 32px;
background-color: #ededed;
cursor: pointer;
.transition();
&:hover {
background-color: #d9d9d9;
}
&-item {
position: absolute;
left: 50%;
top: 50%;
display: block;
margin-top: -1px;
margin-left: -6px;
width: 12px;
height: 2px;
background-color: @accent-color;
&-1 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
&-2 {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
}less 重启
reset.less
/***************reset***************/
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, menu, nav, section, summary {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
}
b, strong {
font-weight: bold
}
dfn {
font-style: italic
}
small {
font-size: 80%
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -0.5em
}
sub {
bottom: -0.25em
}
mark {
background: #ffff00;
color: #000000
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th {
padding: 0
}
form {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
label[for] {
cursor: pointer;
}
button {
outline: none;
box-sizing: border-box;
border: 0;
padding: 0;
font-family: inherit;
font-size: inherit;
line-height: normal;
color: inherit;
background-color: transparent;
cursor: pointer;
}
select {
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: inherit;
font-size: inherit;
line-height: normal;
color: inherit;
text-overflow: ellipsis;
}
input {
outline: none;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: inherit;
font-size: inherit;
line-height: normal;
text-overflow: ellipsis;
color: inherit;
}
textarea {
overflow: auto;
resize: none;
outline: none;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: inherit;
font-size: inherit;
line-height: normal;
color: inherit;
}
hr {
border: none;
}
img {
border: 0
}
code, kbd, pre, samp {
font-family: monospace, monospace;
font-size: 1em
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}less 混入
mixins.less
.img-center() {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.user-select() {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.box-sizing() {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box-shadow(@x, @y, @blur, @size, @color) {
-webkit-box-shadow+: @x @y @blur @size @color;
-moz-box-shadow+: @x @y @blur @size @color;
box-shadow+: @x @y @blur @size @color;
}
.box-shadow-inset(@x, @y, @blur, @size, @color) {
-webkit-box-shadow+: inset @x @y @blur @size @color;
-moz-box-shadow+: inset @x @y @blur @size @color;
box-shadow+: inset @x @y @blur @size @color;
}
.box-shadow-none() {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.border-radius(@p) {
-webkit-border-radius: @p;
-moz-border-radius: @p;
border-radius: @p;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.border-radius-4(@a, @b, @c, @d) {
-webkit-border-radius: @a @b @c @d;
-moz-border-radius: @a @b @c @d;
border-radius: @a @b @c @d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.border-tr-radius(@radius) {
-webkit-border-top-right-radius: @radius;
border-top-right-radius: @radius;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.border-br-radius(@radius) {
-webkit-border-bottom-right-radius: @radius;
border-bottom-right-radius: @radius;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.border-bl-radius(@radius) {
-webkit-border-bottom-left-radius: @radius;
border-bottom-left-radius: @radius;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.border-tl-radius(@radius) {
-webkit-border-top-left-radius: @radius;
border-top-left-radius: @radius;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.transition(@speed: @trans) {
-webkit-transition: @speed;
-moz-transition: @speed;
-o-transition: @speed;
transition: @speed;
}
//transform
//.transform(@string){
// -webkit-transform+_: @string;
// -moz-transform+_: @string;
// -ms-transform+_: @string;
// -o-transform+_: @string;
// transform+_: @string;
//}
.translateY(@y) {
-webkit-transform: translateY(@y);
-moz-transform: translateY(@y);
-ms-transform: translateY(@y);
-o-transform: translateY(@y);
transform: translateY(@y);
}
.translateX(@x) {
-webkit-transform: translateX(@x);
-moz-transform: translateX(@x);
-ms-transform: translateX(@x);
-o-transform: translateX(@x);
transform: translateX(@x);
}
.translateYX(@x, @y) {
-webkit-transform: translate(@x,@y);
-moz-transform: translate(@x,@y);
-ms-transform: translate(@x,@y);
-o-transform: translate(@x,@y);
transform: translate(@x,@y);
}
.skewX(@deg) {
-webkit-transform: skewX(@deg);
-moz-transform: skewX(@deg);
-ms-transform: skewX(@deg);
-o-transform: skewX(@deg);
transform: skewX(@deg);
}
.skewY(@deg) {
-webkit-transform: skewY(@deg);
-moz-transform: skewY(@deg);
-ms-transform: skewY(@deg);
-o-transform: skewY(@deg);
transform: skewY(@deg);
}
.scale(@scale) {
-webkit-transform: scale(@scale);
-moz-transform: scale(@scale);
-ms-transform: scale(@scale);
-o-transform: scale(@scale);
transform: scale(@scale);
}
.rotate(@deg) {
-webkit-transform: rotate(@deg);
-moz-transform: rotate(@deg);
-ms-transform: rotate(@deg);
-o-transform: rotate(@deg);
transform: rotate(@deg);
}
.placeholder(@content) {
&::-webkit-input-placeholder{
@content();
}
&::-moz-placeholder {
@content();
}
&:-moz-placeholder {
@content();
}
&:-ms-input-placeholder {
@content();
}
}
/*css*/
.placeholder({
opacity: 0;
});less 手机菜单
移动菜单与汉堡
mobile_menu.html
<button class="header-nav-btn" type="button">
<span class="header-nav-btn-item header-nav-btn-item-1"></span>
<span class="header-nav-btn-item header-nav-btn-item-2"></span>
<span class="header-nav-btn-item header-nav-btn-item-3"></span>
</button>
<nav id="menu" class="header-menu-wrapper">
<ul class="header-menu">
<li class="header-menu-item">
<a class="header-menu-link" href=""></a>
</li>
<li class="header-menu-item">
<a class="header-menu-link" href=""></a>
</li>
</ul>
</nav>
<button class="header-nav-btn header-nav-btn-close" type="button">
<div class="header-nav-btn-close-item header-nav-btn-close-item-1"></div>
<div class="header-nav-btn-close-item header-nav-btn-close-item-2"></div>
</button>
mobile_menu.js
$('.header-nav-btn').click(function() {
$(this).toggleClass('open');
$('#menu').slideToggle();
$('body').toggleClass('noscroll');
});
$('.header-nav-btn-open').click(function() {
$('#menu').addClass('open');
$('body').addClass('noscroll');
});
$('.header-nav-btn-close').click(function() {
$('#menu').removeClass('open');
$('body').removeClass('noscroll');
});
mobile_menu.less
body.noscroll {
overflow-y: hidden;
}
.header-nav-btn-open {
display: none;
}
.header-nav-btn {
position: absolute;
top: 27px;
right: 15px;
display: block;
width: 26px;
height: 17px;
cursor: pointer;
&-item {
position: absolute;
left: 0;
width: 26px;
height: 3px;
background-color: @text-color-light;
.transition();
&-1 {
top: 0;
left: 0;
}
&-2 {
top: 7px;
}
&-3 {
top: 14px;
}
}
&:hover {
.header-nav-btn-item {
background-color: @accent-color;
}
}
}
.header-nav-btn.open {
.header-nav-btn-item {
top: 7px;
&-1 {
.rotate(45deg);
}
&-2 {
.rotate(-45deg);
}
&-3 {
.rotate(-45deg);
}
}
}
.header-nav-btn-open {
position: absolute;
top: 0;
right: 15px;
display: block;
width: 28px;
height: 20px;
cursor: pointer;
.transition();
&-item {
position: absolute;
width: 28px;
height: 3px;
background-color: #0068a1;
.transition();
&-1 {
top: 0;
left: 0;
}
&-2 {
top: 8px;
left: 0;
}
&-3 {
top: 17px;
left: 0;
}
}
}
.header-nav-btn-close {
display: block;
position: absolute;
top: 25px;
right: 25px;
width: 22px;
height: 22px;
cursor: pointer;
&-item {
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
width: 22px;
height: 2px;
&-1 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
&-2 {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
}