Summary Files Commits Branches @commit @diff @stats
path: root / src
diff options
context:
space:
mode:
3 files changed, 207 insertions, 79 deletions
-rw-r--r--src/forms.less45
-rw-r--r--src/layout.less234
-rw-r--r--src/variables.less7
diff --git a/src/forms.less b/src/forms.less
index a01ab3c..9f8b952 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -2,41 +2,6 @@
.form-group:not(:last-child) {
margin-bottom: 1rem;
}
-
-@media screen and (min-width: 841px) {
- .form-horizontal {
- padding: 1rem;
-
- .form-group {
- display: flex;
- }
- .form-label {
- padding: .8rem .4rem;
- }
- .form-checkbox,
- .form-radio {
- margin: .5rem 0;
- }
- }
-}
-@media screen and (max-width: 840px) {
- .form-horizontal {
- .col-12,
- .col-11,
- .col-10,
- .col-9,
- .col-8,
- .col-7,
- .col-6,
- .col-5,
- .col-4,
- .col-3,
- .col-2,
- .col-1 {
- width: 100%;
- }
- }
-}
// Form element: Input boxes
.form-input {
position: relative;
@@ -243,12 +208,12 @@
&::after {
content: "";
display: block;
- width: 1.4rem;
- height: 1.4rem;
+ width: 1.6rem;
+ height: 1.6rem;
border-radius: .8rem;
position: absolute;
- top: .1rem;
- left: .1rem;
+ top: 0;
+ left: 0;
background-color: #fff;
transition: left .15s ease;
}
@@ -259,7 +224,7 @@
border-color: @core-color;
&::after {
- left: 1.3rem;
+ left: 1.2rem;
}
}
}
diff --git a/src/layout.less b/src/layout.less
index 1a4ed06..7be4c96 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -25,13 +25,13 @@
// Responsive grid system
.columns {
- display: block;
+ display: flex;
+ flex-wrap: wrap;
margin-left: -1rem;
margin-right: -1rem;
- &:extend(.clearfix all);
}
.column {
- flex: 1;
+ flex: 1 0 auto;
padding: 1rem;
&.col-12,
@@ -49,92 +49,248 @@
flex: none;
}
}
-@media screen and (min-width: 841px) {
- .columns {
- display: flex;
+.col-12 {
+ width: 100%;
+}
+.col-11 {
+ width: 91.66666667%;
+}
+.col-10 {
+ width: 83.33333333%;
+}
+.col-9 {
+ width: 75%;
+}
+.col-8 {
+ width: 66.66666667%;
+}
+.col-7 {
+ width: 58.33333333%;
+}
+.col-6 {
+ width: 50%;
+}
+.col-5 {
+ width: 41.66666667%;
+}
+.col-4 {
+ width: 33.33333333%;
+}
+.col-3 {
+ width: 25%;
+}
+.col-2 {
+ width: 16.66666667%;
+}
+.col-1 {
+ width: 8.33333333%;
+}
+@media screen and (min-width: (@size-xs+1px)) {
+ .col-xs-12,
+ .col-xs-11,
+ .col-xs-10,
+ .col-xs-9,
+ .col-xs-8,
+ .col-xs-7,
+ .col-xs-6,
+ .col-xs-5,
+ .col-xs-4,
+ .col-xs-3,
+ .col-xs-2,
+ .col-xs-1 {
+ flex: none;
}
- .col-12 {
+ .col-xs-12 {
width: 100%;
}
- .col-11 {
+ .col-xs-11 {
width: 91.66666667%;
}
- .col-10 {
+ .col-xs-10 {
width: 83.33333333%;
}
- .col-9 {
+ .col-xs-9 {
width: 75%;
}
- .col-8 {
+ .col-xs-8 {
width: 66.66666667%;
}
- .col-7 {
+ .col-xs-7 {
width: 58.33333333%;
}
- .col-6 {
+ .col-xs-6 {
width: 50%;
}
- .col-5 {
+ .col-xs-5 {
width: 41.66666667%;
}
- .col-4 {
+ .col-xs-4 {
width: 33.33333333%;
}
- .col-3 {
+ .col-xs-3 {
width: 25%;
}
- .col-2 {
+ .col-xs-2 {
width: 16.66666667%;
}
- .col-1 {
+ .col-xs-1 {
width: 8.33333333%;
}
}
-@media screen and (min-width: 481px) and (max-width: 840px) {
- .columns {
- display: flex;
- flex-wrap: wrap;
+@media screen and (min-width: (@size-sm+1px)) {
+ .col-sm-12,
+ .col-sm-11,
+ .col-sm-10,
+ .col-sm-9,
+ .col-sm-8,
+ .col-sm-7,
+ .col-sm-6,
+ .col-sm-5,
+ .col-sm-4,
+ .col-sm-3,
+ .col-sm-2,
+ .col-sm-1 {
+ flex: none;
+ }
+ .col-sm-12 {
+ width: 100%;
+ }
+ .col-sm-11 {
+ width: 91.66666667%;
+ }
+ .col-sm-10 {
+ width: 83.33333333%;
+ }
+ .col-sm-9 {
+ width: 75%;
+ }
+ .col-sm-8 {
+ width: 66.66666667%;
+ }
+ .col-sm-7 {
+ width: 58.33333333%;
+ }
+ .col-sm-6 {
+ width: 50%;
+ }
+ .col-sm-5 {
+ width: 41.66666667%;
+ }
+ .col-sm-4 {
+ width: 33.33333333%;
}
- .col-12 {
+ .col-sm-3 {
+ width: 25%;
+ }
+ .col-sm-2 {
+ width: 16.66666667%;
+ }
+ .col-sm-1 {
+ width: 8.33333333%;
+ }
+}
+@media screen and (min-width: (@size-md+1px)) {
+ .col-md-12,
+ .col-md-11,
+ .col-md-10,
+ .col-md-9,
+ .col-md-8,
+ .col-md-7,
+ .col-md-6,
+ .col-md-5,
+ .col-md-4,
+ .col-md-3,
+ .col-md-2,
+ .col-md-1 {
+ flex: none;
+ }
+ .col-md-12 {
width: 100%;
}
- .col-11,
- .col-10,
- .col-9,
- .col-8,
- .col-7,
- .col-6,
- .col-5,
- .col-4,
- .col-3,
- .col-2,
- .col-1 {
+ .col-md-11 {
+ width: 91.66666667%;
+ }
+ .col-md-10 {
+ width: 83.33333333%;
+ }
+ .col-md-9 {
+ width: 75%;
+ }
+ .col-md-8 {
+ width: 66.66666667%;
+ }
+ .col-md-7 {
+ width: 58.33333333%;
+ }
+ .col-md-6 {
width: 50%;
}
+ .col-md-5 {
+ width: 41.66666667%;
+ }
+ .col-md-4 {
+ width: 33.33333333%;
+ }
+ .col-md-3 {
+ width: 25%;
+ }
+ .col-md-2 {
+ width: 16.66666667%;
+ }
+ .col-md-1 {
+ width: 8.33333333%;
+ }
+}
+@media screen and (min-width: (@size-md+1px)) {
+ .form-horizontal {
+ padding: 1rem;
+
+ .form-group {
+ display: flex;
+ }
+ .form-label {
+ padding: .8rem .4rem;
+ margin-bottom: 0;
+ }
+ .form-checkbox,
+ .form-radio {
+ margin: .5rem 0;
+ }
+ }
+}
+@media screen and (max-width: @size-xs) {
+ .columns {
+ display: block;
+ &:extend(.clearfix all);
+
+ .column {
+ width: 100%;
+ }
+ }
}
// Responsive breakpoint system
-@media screen and (max-width: 480px) {
+@media screen and (max-width: @size-xs) {
.hide-xs {
display: none !important;
}
}
-@media screen and (max-width: 600px) {
+@media screen and (max-width: @size-sm) {
.hide-sm {
display: none !important;
}
}
-@media screen and (max-width: 840px) {
+@media screen and (max-width: @size-md) {
.hide-md {
display: none !important;
}
}
-@media screen and (max-width: 960px) {
+@media screen and (max-width: @size-lg) {
.hide-lg {
display: none !important;
}
}
-@media screen and (max-width: 1280px) {
+@media screen and (max-width: @size-xl) {
.hide-xl {
display: none !important;
}
diff --git a/src/variables.less b/src/variables.less
index 404cd1f..6a5c260 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -17,6 +17,13 @@
@control-color-warning: #ffb700;
@control-color-danger: #e85600;
+// Responsive Breakpoints
+@size-xs: 480px;
+@size-sm: 600px;
+@size-md: 840px;
+@size-lg: 960px;
+@size-xl: 1280px;
+
// Mixins
.clearfix() {
&::after {
generated by cgit v1.3.1-23-gd82d (git 2.54.0) at 2026-11-09 06:03:40 +0000