Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify less functions #370

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Simplify less functions #370

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 1 addition & 180 deletions src/main/site/assets/less/functions.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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;
}
4 changes: 2 additions & 2 deletions src/main/site/assets/less/layout.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ h1 {
left: -18px;
bottom: -20px;

.rounded(10px);
border-radius: 10px;
}

a {
Expand Down Expand Up @@ -113,7 +113,7 @@ h2 {
left: -18px;
bottom: -11px;

.rounded(10px);
border-radius: 10px;
}
}

Expand Down
16 changes: 8 additions & 8 deletions src/main/site/assets/less/style.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@
left: 5px;

.transition();
.opacity(0);
opacity: 0;
}

span {
Expand Down Expand Up @@ -159,7 +159,7 @@
font-size: 14px;
font-size: 1.4rem;

.rounded(8px);
border-radius: 8px;
.transition();

&:hover {
Expand Down Expand Up @@ -224,7 +224,7 @@
}

.logo a::after {
.opacity(1);
opacity: 1;
}

.sep::after {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -570,7 +570,7 @@ nav#nav-mobile {
top: 8px;
left: 0;

.rounded(2px)
border-radius: 2px;
}

&::before {
Expand Down Expand Up @@ -680,7 +680,7 @@ nav#nav-mobile {
border: 2px solid #000;
margin-bottom: 8px;

.rounded(100%);
border-radius: 100%;
.transition();

&.active {
Expand Down Expand Up @@ -710,7 +710,7 @@ nav#nav-mobile {
opacity: 1;
visibility: visible;

.translate(10px);
transform: translateX(10px);
}
}

Expand Down
Loading
Loading