Simplify less functions

Author: zbynek

src/main/site/assets/less/functions.less

@@ -5,132 +5,12 @@
     More info at: http://lesselements.com
   ---------------------------------------------------
 
-  - Gradient background
-  - Drop shadow
-  - Inner shadow
-  - Rounded
-  - Border radius
-  - Opacity
   - Transition
-  - Transition duration
   - Rotation
-  - Scale
-  - Translate
   - Box sizing
 
  */
 
-/* - Gradient background
- *
- * First color is the background color to use for browsers 
- * that don't support gradients. The second two colors are 
- * the start and stop colors, going from bottom to top. 
- */
-
-.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
-  background: @color;
-  background: -webkit-gradient(linear,
-                               left bottom,
-                               left top,
-                               color-stop(0, @start),
-                               color-stop(1, @stop));
-  background: -ms-linear-gradient(bottom,
-                                  @start,
-                                  @stop);
-  background: -moz-linear-gradient(center bottom,
-                                   @start 0%,
-                                   @stop 100%);
-  background: -o-linear-gradient(@stop,
-                                 @start);
-  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
-}
-
-/* - Drop shadow
- *
- * Adds a box-shadow that is a semi-transparent black. The 
- * first two values control the x and y axis position, the 
- * third controls blur (how big the shadow is), and the final 
- * value is the opacity (0 is fully transparent, 1 is opaque).
- */
-
-.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
-  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
-  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
-  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
-}
-
-/* - Inner shadow
- *
- * Sets the inner shadow. The first two numbers are the x and y
- * coordinates, the third is the blur and the last one is the 
- * strength of the shadow.
- */
-
-.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
-  -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
-  -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
-  box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
-}
-
-/* - Box shadow
- */
-
-.box-shadow(@arguments) {
-  -webkit-box-shadow: @arguments;
-  -moz-box-shadow: @arguments;
-  box-shadow: @arguments;
-}
-
-/* - Rounded
- *
- * Sets a border-radius for all 4 corners. If you want to set 
- * border-radius for individual corners use: .border-radius
- */
-
-.rounded(@radius: 2px) {
-  -webkit-border-radius: @radius;
-  -moz-border-radius: @radius;
-  border-radius: @radius;
-}
-
-/* - Border radius
- *
- * Sets a border-radius for each of the 4 corners individually. 
- * The values go in a clockwise rotation: top right, bottom right, 
- * bottom left, top left.
- */
-
-.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
-  -webkit-border-top-right-radius: @topright;
-  -webkit-border-bottom-right-radius: @bottomright;
-  -webkit-border-bottom-left-radius: @bottomleft;
-  -webkit-border-top-left-radius: @topleft;
-  -moz-border-radius-topright: @topright;
-  -moz-border-radius-bottomright: @bottomright;
-  -moz-border-radius-bottomleft: @bottomleft;
-  -moz-border-radius-topleft: @topleft;
-  border-top-right-radius: @topright;
-  border-bottom-right-radius: @bottomright;
-  border-bottom-left-radius: @bottomleft;
-  border-top-left-radius: @topleft;
-  .background-clip(padding-box);
-}
-
-/* - Opacity
- *
- * Sets the opacity. 0 is fully transparent, 1 is opaque.
- */
-
-.opacity(@opacity: 0.5) {
-  -moz-opacity: @opacity;
-  -khtml-opacity: @opacity;
-  -webkit-opacity: @opacity;
-  opacity: @opacity;
-  @opperc: @opacity * 100;
-  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
-  filter: ~"alpha(opacity=@{opperc})";
-}
-
 /* - Transition
  *
  * Sets the transition duration and effect to use for any 
@@ -139,63 +19,16 @@
  */
 
 .transition(@duration:0.2s, @ease:ease-out) {
-  -webkit-transition: all @duration @ease;
-  -moz-transition: all @duration @ease;
-  -o-transition: all @duration @ease;
   transition: all @duration @ease;
 }
 
-/* - Transition duration
- *
- * Sets a transition-duration (time it takes to do things like 
- * hover effects). The value provides a time in seconds.
- */
-
-.transition-duration(@duration: 0.2s) {
-  -moz-transition-duration: @duration;
-  -webkit-transition-duration: @duration;
-  -o-transition-duration: @duration;
-  transition-duration: @duration;
-}
-
-/* - Transform
- */
-
-.transform(...) {
-  -webkit-transform: @arguments;
-  -moz-transform: @arguments;
-  -o-transform: @arguments;
-  -ms-transform: @arguments;
-  transform: @arguments;
-}
-
 /* - Rotation
  *
  * Rotates the item by a number of degrees clockwise.
  */
 
 .rotation(@deg:5deg){
-  .transform(rotate(@deg));
-}
-/* - Scale
- *
- * Scales the item by the ratio provided. The example makes the 
- * item 2 times larger.
- */
-
-.scale(@ratio:1.5){
-  .transform(scale(@ratio));
-}
-
-/* - Translate
- *
- * Translates an element using the given coordinates. The values 
- * are x and y offset coordinates, so the above example moves the
- * element right 10 pixels and up 20 pixels.
- */
-
-.translate(@x:0, @y:0) {
-  .transform(translate(@x, @y));
+  transform: rotate(@deg);
 }
 
 /* - Boox sizing
@@ -206,17 +39,5 @@
  */
 
 .box-sizing(@sizing: border-box) {
-  -ms-box-sizing: @sizing;
-  -moz-box-sizing: @sizing;
-  -webkit-box-sizing: @sizing;
   box-sizing: @sizing;
 }
-
-/* - Background clip
- */
-
-.background-clip(@argument: padding-box) {
-  -moz-background-clip: @argument;
-  -webkit-background-clip: @argument;
-  background-clip: @argument;
-}

src/main/site/assets/less/layout.less

@@ -83,7 +83,7 @@ h1 {
     left: -18px;
     bottom: -20px;
 
-    .rounded(10px);
+    border-radius: 10px;
   }
 
   a {
@@ -113,7 +113,7 @@ h2 {
     left: -18px;
     bottom: -11px;
 
-    .rounded(10px);
+    border-radius: 10px;
   }
 }
 

src/main/site/assets/less/style.less

@@ -119,7 +119,7 @@
         left: 5px;
 
         .transition();
-        .opacity(0);
+        opacity: 0;
       }
 
       span {
@@ -159,7 +159,7 @@
         font-size: 14px;
         font-size: 1.4rem;
 
-        .rounded(8px);
+        border-radius: 8px;
         .transition();
 
         &:hover {
@@ -224,7 +224,7 @@
     }
 
     .logo a::after {
-      .opacity(1);
+      opacity: 1;
     }
 
     .sep::after {
@@ -428,14 +428,14 @@ nav#nav-mobile {
   right: 0;
   z-index: 10000;
 
-  .border-radius(0, 0, 5px, 0);
+  border-bottom-left-radius: 5px;
 
   input {
     display: none;
     border: 0;
     padding: 2px 4px;
 
-    .border-radius(0, 0, 3px, 0);
+    border-bottom-left-radius: 3px;
 
     @media (@mobile) {
       display: inline-block;
@@ -570,7 +570,7 @@ nav#nav-mobile {
         top: 8px;
         left: 0;
 
-        .rounded(2px)
+        border-radius: 2px;
       }
 
       &::before {
@@ -680,7 +680,7 @@ nav#nav-mobile {
     border: 2px solid #000;
     margin-bottom: 8px;
 
-    .rounded(100%);
+    border-radius: 100%;
     .transition();
 
     &.active {
@@ -710,7 +710,7 @@ nav#nav-mobile {
       opacity: 1;
       visibility: visible;
 
-      .translate(10px);
+      transform: translateX(10px);
     }
   }