Skip to content

Commit 0587f6b

Browse files
pgaliaspgalias
committed
New less code
1 parent f0f1014 commit 0587f6b

30 files changed

+654
-795
lines changed

‎gulpfile.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const gulp = require('gulp'),
2+
sourcemaps = require('gulp-sourcemaps'),
3+
sass = require('gulp-sass'),
4+
autoprefixer = require('gulp-autoprefixer'),
5+
less = require('gulp-less'),
6+
LessPrefix = require('less-plugin-autoprefix'),
7+
cssnano = require('gulp-cssnano');
8+
9+
const prefixOpt = {browsers: ['last 2 versions']};
10+
11+
gulp.task('sass:compile', () => {
12+
gulp.src('./sass/**/*.scss')
13+
.pipe(sourcemaps.init())
14+
.pipe(sass())
15+
.pipe(autoprefixer(prefixOpt))
16+
.pipe(sourcemaps.write('./'))
17+
.pipe(gulp.dest('./css'))
18+
});
19+
20+
gulp.task('less:compile', () => {
21+
gulp.src('./less/components.less')
22+
.pipe(less({
23+
plugins: [new LessPrefix(prefixOpt)]
24+
}))
25+
.pipe(gulp.dest('./css'))
26+
});
27+
28+
gulp.task('css:minify', () => {
29+
gulp.src('./css/*.css')
30+
.pipe(cssnano())
31+
.pipe(gulp.dest('./'))
32+
});

‎less/_mixins.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import "mixins/_misc";
2+
@import "mixins/_centering";
3+
@import "mixins/_text-alignment";
4+
@import "mixins/_transition";

‎less/_themes.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "themes/_blue";

‎less/accordion.less

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎less/accordion/_block.less

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.accordion {
2+
display: block;
3+
list-style: none;
4+
}
5+
6+
.accordion--full-width {
7+
width: 100%;
8+
}
9+
10+
.accordion--fixed-width {
11+
width: @width;
12+
.center-horizontal;
13+
}

‎less/accordion/_element.less

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
.accordion {
2+
&__object {
3+
margin: @margin;
4+
5+
input[type=checkbox],
6+
input[type=radio] {
7+
display: none;
8+
9+
&:not(:checked) ~ .accordion__content {
10+
.visibility(v);
11+
height: auto;
12+
padding: @content-padding;
13+
transform: translateY(0);
14+
}
15+
&:checked ~ .accordion__content {
16+
.visibility(h);
17+
.same(0, height padding);
18+
transform: translateY(@content-visible-transform);
19+
}
20+
}
21+
22+
label&__header {
23+
/* styles for each accordion header */
24+
padding: @header-padding;
25+
26+
.text-align(c);
27+
text-decoration: none;
28+
font-size: @font-size;
29+
30+
display: block;
31+
}
32+
33+
}
34+
35+
&__content {
36+
/* styles for each accordion element */
37+
.transition(opacity visibility height padding transform, @content-transition);
38+
39+
margin: @content-margin;
40+
}
41+
42+
&--blue {
43+
label.accordion__header {
44+
background: @blue-base;
45+
border-radius: @blue-border-radius @blue-border-radius 0 0;
46+
47+
color: @blue-header-color;
48+
49+
&:hover {
50+
background: @blue-hover;
51+
}
52+
}
53+
54+
.accordion__content {
55+
background: @blue-content-background;
56+
color: @blue-text-color;
57+
border-radius: 0 0 @blue-border-radius @blue-border-radius;
58+
}
59+
}
60+
}

‎less/accordion/_variables.less

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// width of object
2+
@width: 60%;
3+
// whitespace between each section
4+
@margin: .5em 0;
5+
6+
@font-size: 1.8em;
7+
8+
@header-padding: 1em 1.5em;
9+
10+
@content-margin: 0;
11+
@content-padding: 10px;
12+
@content-visible-transform: -10px;
13+
@content-transition: .2s ease-in-out;

‎less/components.less

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// mixins
2+
@import "_mixins";
3+
// themes
4+
@import "_themes";
5+
6+
// components
7+
@import "_accordion";
8+
@import "_dropdown";
9+
@import "_modalbox";
10+
@import "_slider";
11+
@import "_tabs";

‎less/dropdown.less

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎less/dropdown/_element.less

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.dropdown {
2+
position: relative;
3+
4+
&__menu {
5+
list-style: none;
6+
box-sizing: border-box;
7+
8+
position: absolute;
9+
10+
.same(100%, top width);
11+
.visibility(h);
12+
transform: translateY(@menu-transform-hidden);
13+
14+
.transition(transform visibility opacity, @menu-transition);
15+
a {
16+
display: block;
17+
18+
text-decoration: none;
19+
.text-align(c);
20+
21+
padding: @item-padding;
22+
23+
&:hover {
24+
text-shadow: @item-shadow;
25+
}
26+
}
27+
}
28+
29+
&:hover &__menu {
30+
.visibility(v);
31+
transform: translateY(@menu-transform-visible);
32+
}
33+
34+
&__trigger {
35+
cursor: pointer;
36+
37+
background: @trigger-icon no-repeat ~"@{trigger-position}/@{trigger-size}";
38+
padding: @trigger-padding;
39+
}
40+
}
41+
42+
.dropdown--blue {
43+
background: @blue-base;
44+
&:hover {
45+
background: @blue-hover;
46+
}
47+
48+
.dropdown__menu {
49+
background: @blue-content-background;
50+
border: @blue-border;
51+
52+
a {
53+
color: @blue-text-color;
54+
}
55+
}
56+
}

‎less/dropdown/_variables.less

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@menu-transform-hidden: -15px;
2+
@menu-transform-visible: 0;
3+
@menu-transition: .2s ease-in-out;
4+
5+
@item-padding: 10px 5px;
6+
@item-shadow: 0 0 20px rgba(150, 150, 150, 1);
7+
8+
@trigger-icon: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%22577px%22%20height%3D%22356px%22%20viewBox%3D%220%200%20577%20356%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20xmlns%3Asketch%3D%22http%3A//www.bohemiancoding.com/sketch/ns%22%3E%0A%20%20%20%20%3Ctitle%3EUntitled%2011%3C/title%3E%0A%20%20%20%20%3Cdescription%3ECreated%20with%20Sketch%20%28http%3A//www.bohemiancoding.com/sketch%29%3C/description%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20id%3D%22path-1%22%20d%3D%22M0%2C356%20L577%2C356%20L577%2C0%20L0%2C0%20L0%2C356%22%3E%3C/path%3E%0A%20%20%20%20%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20sketch%3Atype%3D%22MSPage%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Vector-Smart-Object11%22%20sketch%3Atype%3D%22MSLayerGroup%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22mask-2%22%20sketch%3Aname%3D%22Clip%202%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23path-1%22%3E%3C/use%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/mask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Clip-2%22%3E%3C/g%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M562.9295%2C16.5454%20C542.5118%2C-5.2089%20505.085%2C-6.4119%20483.197%2C14.2062%20L286.7062%2C200.0037%20L95.6289%2C14.8077%20C74.2087%2C-6.1112%2036.64821%2C-5.5097%2015.92979%2C15.8771%20C5.43691%2C26.6373%20-0.210526%2C40.8729%20-0.010025%2C55.877%20C0.223893%2C70.948%206.27233%2C85.0499%2017.1328%2C95.5762%20L285.7371%2C355.9933%20L560.6905%2C96.044%20C571.8517%2C85.4509%20578.2678%2C70.5136%20578.2678%2C55.1084%20C578.2678%2C40.6389%20572.754%2C26.8712%20562.9295%2C16.5454%22%20id%3D%22Fill-1%22%20fill%3D%22%23FFFFFF%22%20sketch%3Atype%3D%22MSShapeGroup%22%20mask%3D%22url%28%23mask-2%29%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E");
9+
@trigger-size: 20px;
10+
@trigger-position: right center;
11+
@trigger-padding: 13px 0 13px 15px;

‎less/mixins/_centering.less

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.center-horizontal() {
2+
margin-left: auto;
3+
margin-right: auto;
4+
}
5+
6+
.center-both() {
7+
position: absolute;
8+
.same(50%, top left);
9+
transform: translate(-50%,-50%);
10+
}

‎less/mixins/_misc.less

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.same(@value, @properties) {
2+
.each(@i:1) when (@i <= length(@properties)) {
3+
@prop: extract(@properties, @i);
4+
@{prop}: @value;
5+
.each(@i+1);
6+
}
7+
.each();
8+
}
9+
10+
.visibility(@val) when (@val = visible), (@val = 'visible'), (@val = v), (@val = 'v') {
11+
visibility: visible;
12+
opacity: 1;
13+
}
14+
.visibility(@val) when (@val = hidden), (@val = 'hidden'), (@val = h), (@val = 'h') {
15+
visibility: hidden;
16+
opacity: 0;
17+
}

‎less/mixins/_text-alignment.less

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.text-align(@align) when (@align = 'l'), (@align = 'left'), (@align = l), (@align = left) {
2+
text-align: left;
3+
}
4+
.text-align(@align) when (@align = 'r'), (@align = 'right'), (@align = r), (@align = right) {
5+
text-align: right;
6+
}
7+
.text-align(@align) when (@align = 'c'), (@align = 'center'), (@align = c), (@align = center) {
8+
text-align: center;
9+
}
10+
.text-align(@align) when (@align = 'j'), (@align = 'justify'), (@align = j), (@align = justify) {
11+
text-align: justify;
12+
}

‎less/mixins/_transition.less

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.transition(@properties, @values...) {
2+
.value(@i:1) when (@i <= length(@properties)) {
3+
@prop: extract(@properties, @i);
4+
transition+: ~"@{prop} @{values}";
5+
.value(@i+1);
6+
}
7+
.value();
8+
}

0 commit comments

Comments
 (0)