File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// CSS3 PROPERTIES
// --------------------------------------------------
// Border Radius
.border-radius(@radius: 5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.border-radius-bottom(@radius: 5px){
-webkit-border-bottom-left-radius:@radius;
-moz-border-bottom-left-radius:@radius;
border-bottom-left-radius:@radius;
-webkit-border-bottom-right-radius:@radius;
-moz-border-bottom-right-radius:@radius;
border-bottom-right-radius:@radius;
}
// Drop shadows
.box-shadow(@shadow: 0 1px 2px rgba(0, 0, 0, .25)){
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
// Transitions
.transition(@transition){
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
// Transformations
.rotate(@degrees){
-webkit-transform: rotate(@degrees);
-moz-transform: rotate(@degrees);
-ms-transform: rotate(@degrees);
-o-transform: rotate(@degrees);
transform: rotate(@degrees);
}
.scale(@ratio){
-webkit-transform: scale(@ratio);
-moz-transform: scale(@ratio);
-ms-transform: scale(@ratio);
-o-transform: scale(@ratio);
transform: scale(@ratio);
}
.translate(@x: 0, @y: 0){
-webkit-transform: translate(@x, @y);
-moz-transform: translate(@x, @y);
-ms-transform: translate(@x, @y);
-o-transform: translate(@x, @y);
transform: translate(@x, @y);
}
.skew(@x: 0, @y: 0){
-webkit-transform: skew(@x, @y);
-moz-transform: skew(@x, @y);
-ms-transform: skew(@x, @y);
-o-transform: skew(@x, @y);
transform: skew(@x, @y);
}
.translate3d(@x: 0, @y: 0, @z: 0){
-webkit-transform: translate(@x, @y, @z);
-moz-transform: translate(@x, @y, @z);
-ms-transform: translate(@x, @y, @z);
-o-transform: translate(@x, @y, @z);
transform: translate(@x, @y, @z);
}
// Opacity
.opacity(@opacity: 100){
opacity: @opacity / 100;
}
// Gradient
.linear-gradient(@startColor:'#f9fcf7', @endColor:'#f5f9f0'){
background: @startColor; /* Old browsers */
background: -moz-linear-gradient(top, @startColor 0%, @endColor 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@startColor), color-stop(100%,@endColor)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, @startColor 0%, @endColor 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, @startColor 0%, @endColor 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, @startColor 0%, @endColor 100%); /* IE10+ */
background: linear-gradient(to bottom, @startColor 0%, @endColor 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{startColor}', endColorstr='@{endColor}',GradientType=0 ); /* IE6-9 */
}
// BackgroundSize
.background-size(@param:cover){
-webkit-background-size: @param;
-moz-background-size: @param;
-o-background-size: @param;
background-size: @param;
}
// Text overflow
// -------------------------
// Requires inline-block or block for proper styling
.text-overflow(){
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// UTILITY MIXINS
// --------------------------------------------------
// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
.user-select-none {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
// Center-align a block level element
// ----------------------------------
.center-block(){
display: block;
margin-left: auto;
margin-right: auto;
}
.inline-block(@important: ""){
display: ~"inline-block @{important}";
}
.dotum {
font-family: '돋움',dotum;
}
.gulim {
font-family: '굴림',Gulim;
}
.thoma {
font-family: Tahoma;
}
.helvetic-light {
font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "Helvetica";
font-weight:200;
font-stretch:normal;
}
// user-select
.user-select(@param:none) {
-webkit-user-select:@param;
-moz-user-select:@param;
-ms-user-select:@param;
-o-user-select:@param;
user-select: @param;
}
.box-sizing(@param:border-box) {
-webkit-box-sizing:@param;
-moz-box-sizing:@param;
-ms-sbox-izing:@param;
-o-box-sizing:@param;
box-sizing: @param;
}