diff --git a/.idea/bootstrap-material-design.iml b/.idea/bootstrap-material-design.iml
new file mode 100644
index 00000000..24643cc3
--- /dev/null
+++ b/.idea/bootstrap-material-design.iml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 00000000..c6cc8c81
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
new file mode 100644
index 00000000..b8387eb1
--- /dev/null
+++ b/.idea/jsLibraryMappings.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 00000000..d7c5ef0b
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ false
+
+ false
+ false
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 00000000..14e67eea
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 00000000..94a25f7f
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 00000000..86bc9104
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,215 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ .check
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ true
+ DEFINITION_ORDER
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1486286023493
+
+
+ 1486286023493
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/sass/_buttons.scss b/sass/_buttons.scss
index f0c954f4..2c151efd 100644
--- a/sass/_buttons.scss
+++ b/sass/_buttons.scss
@@ -2,7 +2,7 @@
// specification: https://www.google.com/design/spec/components/buttons.html
-@mixin typo-button($colorContrast: false){
+@mixin typo-button($colorContrast: false) {
font-size: $mdb-btn-font-size-base;
font-weight: 500;
text-transform: uppercase;
@@ -141,14 +141,16 @@
&.material-icons {
top: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
- left: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
+ //left: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
+ @include left(($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2);
}
}
i.material-icons {
position: absolute;
top: 50%;
- left: 50%;
+ //left: 50%;
+ @include left(50%);
transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
line-height: $mdb-btn-fab-font-size;
width: $mdb-btn-fab-font-size;
diff --git a/sass/_cards.scss b/sass/_cards.scss
index e7af6ac3..e12ee2a7 100644
--- a/sass/_cards.scss
+++ b/sass/_cards.scss
@@ -41,7 +41,8 @@
.card-image-headline {
position: absolute;
bottom: 16px;
- left: 18px;
+ //left: 18px;
+ @include left(18px);
color: $mdb-card-image-headline;
font-size: 2em;
}
@@ -61,7 +62,8 @@
bottom: 25px;
width: auto;
&:first-child {
- left: -15px;
+ //left: -15px;
+ @include left(-15px);
}
}
}
diff --git a/sass/_checkboxes.scss b/sass/_checkboxes.scss
index 8a62a128..4827c79b 100644
--- a/sass/_checkboxes.scss
+++ b/sass/_checkboxes.scss
@@ -5,10 +5,15 @@
.checkbox label,
label.checkbox-inline {
cursor: pointer;
- padding-left: 0; // Reset for Bootstrap rule
+ //padding-left: 0; // Reset for Bootstrap rule
+ @include padding-left(6px);
color: $mdb-checkbox-label-color;
@include mdb-label-color-toggle-focus();
}
+.checkbox label {
+ @include padding-left(45px);
+ position: relative;
+}
.checkbox,
label.checkbox-inline {
@@ -21,19 +26,23 @@ label.checkbox-inline {
width: 0;
height: 0;
overflow: hidden;
- left: 0;
+ //left: 0;
+ @include left(0);
pointer-events: none;
}
.checkbox-material {
vertical-align: middle;
- position: relative;
top: 3px;
+ position: absolute;
+ //right: 0;
+ @include left(0);
&:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
display: block;
position: absolute;
- top:-5px;
- left: 0;
+ top: -5px;
+ //left: 0;
+ @include left(0);
content: "";
background-color: rgba(0, 0, 0, .84);
height: $mdb-checkbox-size;
@@ -46,6 +55,7 @@ label.checkbox-inline {
}
.check {
+ direction: ltr;
position: relative;
display: inline-block;
width: $mdb-checkbox-size;
@@ -56,6 +66,8 @@ label.checkbox-inline {
z-index: 1;
}
.check:before {
+ top: 0;
+ left: 0;
position: absolute;
content: "";
transform: rotate(45deg);
@@ -64,14 +76,13 @@ label.checkbox-inline {
margin-left: 6px;
width: 0;
height: 0;
- box-shadow:
- 0 0 0 0,
- 0 0 0 0,
- 0 0 0 0,
- 0 0 0 0,
- 0 0 0 0,
- 0 0 0 0,
- 0 0 0 0 inset;
+ box-shadow: 0 0 0 0,
+ 0 0 0 0,
+ 0 0 0 0,
+ 0 0 0 0,
+ 0 0 0 0,
+ 0 0 0 0,
+ 0 0 0 0 inset;
}
}
@@ -80,10 +91,10 @@ label.checkbox-inline {
&:focus + .checkbox-material .check:after {
opacity: 0.2;
}
-
- &:focus{
-
- &:checked{
+
+ &:focus {
+
+ &:checked {
& + .checkbox-material:before {
animation: rippleOn 500ms;
}
@@ -94,7 +105,7 @@ label.checkbox-inline {
animation: rippleOn $mdb-checkbox-animation-ripple forwards; // Ripple effect on check
}
}
-
+
&:not(:checked) {
& + .checkbox-material:before {
animation: rippleOff 500ms;
@@ -106,10 +117,9 @@ label.checkbox-inline {
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
}
}
-
+
}
-
-
+
&:checked {
// FIXME: once working - combine further to reduce code
@@ -120,13 +130,12 @@ label.checkbox-inline {
& + .checkbox-material .check:before {
color: $mdb-checkbox-checked-color;
- box-shadow:
- 0 0 0 10px,
- 10px -10px 0 10px,
- 32px 0 0 20px,
- 0px 32px 0 20px,
- -5px 5px 0 10px,
- 20px -12px 0 11px;
+ box-shadow: 0 0 0 10px,
+ 10px -10px 0 10px,
+ 32px 0 0 20px,
+ 0px 32px 0 20px,
+ -5px 5px 0 10px,
+ 20px -12px 0 11px;
}
& + .checkbox-material .check:after {
@@ -151,99 +160,94 @@ label.checkbox-inline {
@keyframes checkbox-on {
0% {
- box-shadow:
- 0 0 0 10px,
- 10px -10px 0 10px,
- 32px 0 0 20px,
- 0px 32px 0 20px,
- -5px 5px 0 10px,
- 15px 2px 0 11px;
+ box-shadow: 0 0 0 10px,
+ 10px -10px 0 10px,
+ 32px 0 0 20px,
+ 0px 32px 0 20px,
+ -5px 5px 0 10px,
+ 15px 2px 0 11px;
}
50% {
- box-shadow:
- 0 0 0 10px,
- 10px -10px 0 10px,
- 32px 0 0 20px,
- 0px 32px 0 20px,
- -5px 5px 0 10px,
- 20px 2px 0 11px;
+ box-shadow: 0 0 0 10px,
+ 10px -10px 0 10px,
+ 32px 0 0 20px,
+ 0px 32px 0 20px,
+ -5px 5px 0 10px,
+ 20px 2px 0 11px;
}
100% {
- box-shadow:
- 0 0 0 10px,
- 10px -10px 0 10px,
- 32px 0 0 20px,
- 0px 32px 0 20px,
- -5px 5px 0 10px,
- 20px -12px 0 11px;
+ box-shadow: 0 0 0 10px,
+ 10px -10px 0 10px,
+ 32px 0 0 20px,
+ 0px 32px 0 20px,
+ -5px 5px 0 10px,
+ 20px -12px 0 11px;
}
}
@keyframes checkbox-off {
0% {
- box-shadow:
- 0 0 0 10px,
- 10px -10px 0 10px,
- 32px 0 0 20px,
- 0px 32px 0 20px,
- -5px 5px 0 10px,
- 20px -12px 0 11px,
- 0 0 0 0 inset;
+ box-shadow: 0 0 0 10px,
+ 10px -10px 0 10px,
+ 32px 0 0 20px,
+ 0px 32px 0 20px,
+ -5px 5px 0 10px,
+ 20px -12px 0 11px,
+ 0 0 0 0 inset;
}
25% {
- box-shadow:
- 0 0 0 10px,
- 10px -10px 0 10px,
- 32px 0 0 20px,
- 0px 32px 0 20px,
- -5px 5px 0 10px,
- 20px -12px 0 11px,
- 0 0 0 0 inset;
+ box-shadow: 0 0 0 10px,
+ 10px -10px 0 10px,
+ 32px 0 0 20px,
+ 0px 32px 0 20px,
+ -5px 5px 0 10px,
+ 20px -12px 0 11px,
+ 0 0 0 0 inset;
}
50% {
transform: rotate(45deg);
margin-top: -4px;
- margin-left: 6px;
+ //margin-left: 6px;
+ @include margin-left(6px);
width: 0;
height: 0;
- box-shadow:
- 0 0 0 10px,
- 10px -10px 0 10px,
- 32px 0 0 20px,
- 0px 32px 0 20px,
- -5px 5px 0 10px,
- 15px 2px 0 11px,
- 0 0 0 0 inset;
+ box-shadow: 0 0 0 10px,
+ 10px -10px 0 10px,
+ 32px 0 0 20px,
+ 0px 32px 0 20px,
+ -5px 5px 0 10px,
+ 15px 2px 0 11px,
+ 0 0 0 0 inset;
}
51% {
transform: rotate(0deg);
margin-top: -2px;
- margin-left: -2px;
+ //margin-left: -2px;
+ @include margin-left(-2px);
width: 20px;
height: 20px;
- box-shadow:
- 0 0 0 0,
- 0 0 0 0,
- 0 0 0 0,
- 0 0 0 0,
- 0 0 0 0,
- 0 0 0 0,
- 0px 0 0 10px inset;
+ box-shadow: 0 0 0 0,
+ 0 0 0 0,
+ 0 0 0 0,
+ 0 0 0 0,
+ 0 0 0 0,
+ 0 0 0 0,
+ 0px 0 0 10px inset;
}
100% {
transform: rotate(0deg);
margin-top: -2px;
- margin-left: -2px;
+ //margin-left: -2px;
+ @include margin-left(-2px);
width: 20px;
height: 20px;
- box-shadow:
- 0 0 0 0,
- 0 0 0 0,
- 0 0 0 0,
- 0 0 0 0,
- 0 0 0 0,
- 0 0 0 0,
- 0px 0 0 0 inset;
+ box-shadow: 0 0 0 0,
+ 0 0 0 0,
+ 0 0 0 0,
+ 0 0 0 0,
+ 0 0 0 0,
+ 0 0 0 0,
+ 0px 0 0 0 inset;
}
}
diff --git a/sass/_dialogs.scss b/sass/_dialogs.scss
index 91a88c06..99e36328 100644
--- a/sass/_dialogs.scss
+++ b/sass/_dialogs.scss
@@ -38,7 +38,8 @@
padding-left: 5px;
padding-right: 5px;
position: relative;
- left: -5px;
+ //left: -5px;
+ @include left(-5px);
}
}
button+button {
diff --git a/sass/_form.scss b/sass/_form.scss
index ec8f0184..65920f3e 100644
--- a/sass/_form.scss
+++ b/sass/_form.scss
@@ -33,7 +33,8 @@
}
label {
- text-align: right;
+ //text-align: right;
+ @include text-align(right);
}
label.control-label {
diff --git a/sass/_inputs.scss b/sass/_inputs.scss
index 4f5ca387..c35ec767 100644
--- a/sass/_inputs.scss
+++ b/sass/_inputs.scss
@@ -13,7 +13,8 @@
@mixin label-static($label-top, $static-font-size, $static-line-height){
label.control-label {
top: $label-top;
- left: 0;
+ //left: 0;
+ @include left(0);
// must repeat because the selector above is more specific than the general label sizing
font-size: $static-font-size;
line-height: $static-line-height;
diff --git a/sass/_lists.scss b/sass/_lists.scss
index 88f4389f..fd643bd3 100644
--- a/sass/_lists.scss
+++ b/sass/_lists.scss
@@ -17,7 +17,8 @@
.row-picture, .row-action-primary {
//float: left; WARNING: float can't be used with display: inline-block. Certain properties shouldn't be used with certain display property values. (display-property-grouping) Browsers: All
display: inline-block;
- padding-right: 16px;
+ //padding-right: 16px;
+ @include padding-right(16px);
img, i, label {
display: block;
width: 56px;
@@ -39,12 +40,15 @@
color: white;
}
label {
- margin-left: 7px;
- margin-right: -7px;
+ //margin-left: 7px;
+ @include margin-left(7px);
+ //margin-right: -7px;
+ @include margin-right(-7px);
margin-top: 5px;
margin-bottom: -5px;
.checkbox-material {
- left: -10px;
+ //left: -10px;
+ @include left(-10px);
}
}
}
@@ -54,7 +58,8 @@
min-height: 66px;
.action-secondary {
position: absolute;
- right: 16px;
+ //right: 16px;
+ @include right(16px);
top: 16px;
i {
font-size: 20px;
@@ -67,7 +72,8 @@
}
.least-content {
position: absolute;
- right: 16px;
+ //right: 16px;
+ @include right(16px);
top: 0;
color: rgba(0,0,0,0.54);
font-size: 14px;
@@ -98,7 +104,8 @@
content: "";
width: unquote("calc(100% - 90px)");
border-bottom: 1px solid rgba(0,0,0,0.1);
- float: right;
+ //float: right;
+ @include float(right);
}
}
}
diff --git a/sass/_radios.scss b/sass/_radios.scss
index 59600e63..5946a000 100644
--- a/sass/_radios.scss
+++ b/sass/_radios.scss
@@ -17,7 +17,8 @@
.radio label, label.radio-inline {
cursor: pointer;
- padding-left: 45px;
+ //padding-left: 45px;
+ @include padding-left(45px);
position: relative;
color: $mdb-radio-label-color;
@include mdb-label-color-toggle-focus();
@@ -27,7 +28,7 @@
span {
display: block;
position: absolute;
- left: 10px;
+ @include left(10px);
top: 2px;
transition-duration: 0.2s;
}
@@ -49,7 +50,8 @@
position: absolute;
content: "";
background-color: $mdb-text-color-primary;
- left: -18px;
+ //left: -18px;
+ @include left(-18px);
top: -18px;
height: 50px;
width: 50px;
diff --git a/sass/_togglebutton.scss b/sass/_togglebutton.scss
index 862ecdb4..473113c4 100644
--- a/sass/_togglebutton.scss
+++ b/sass/_togglebutton.scss
@@ -29,7 +29,8 @@
height: 15px;
background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px;
- margin-right: 15px;
+ //margin-right: 15px;
+ @include margin-right(15px);
transition: background 0.3s ease;
vertical-align: middle;
}
@@ -43,7 +44,8 @@
border-radius: 20px;
position: relative;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
- left: -5px;
+ //left: -5px;
+ @include left(-5px);
top: -2px;
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
}
@@ -63,7 +65,8 @@
// Ripple off and disabled
&:checked + .toggle:after {
- left: 15px;
+ //left: 15px;
+ @include left(15px);
}
}
diff --git a/sass/plugins/_plugin-dropdownjs.scss b/sass/plugins/_plugin-dropdownjs.scss
index b1574726..b5c25377 100644
--- a/sass/plugins/_plugin-dropdownjs.scss
+++ b/sass/plugins/_plugin-dropdownjs.scss
@@ -1,7 +1,8 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.dropdownjs::after {
- right: 5px;
+ //right: 5px;
+ @include right(5px);
top: 3px;
font-size: 25px;
position: absolute;
diff --git a/sass/plugins/_plugin-nouislider.scss b/sass/plugins/_plugin-nouislider.scss
index 030da450..2ceeccac 100644
--- a/sass/plugins/_plugin-nouislider.scss
+++ b/sass/plugins/_plugin-nouislider.scss
@@ -43,7 +43,8 @@
box-sizing: border-box;
width: 12px;
height: 12px;
- left: -10px;
+ //left: -10px;
+ @include left(-10px);
top: -5px;
cursor: ew-resize;
border-radius: 100%;
@@ -51,14 +52,16 @@
border: 1px solid;
}
.noUi-vertical .noUi-handle {
- margin-left: 5px;
+ //margin-left: 5px;
+ @include margin-left(5px);
cursor: ns-resize;
}
.noUi-horizontal.noUi-extended {
padding: 0 15px;
}
.noUi-horizontal.noUi-extended .noUi-origin {
- right: -15px;
+ //right: -15px;
+ @include right(-15px);
}
.noUi-background {
height: 2px;
diff --git a/sass/plugins/_plugin-selectize.scss b/sass/plugins/_plugin-selectize.scss
index bff381e1..edd543fe 100644
--- a/sass/plugins/_plugin-selectize.scss
+++ b/sass/plugins/_plugin-selectize.scss
@@ -19,7 +19,8 @@
padding: 0;
}
&:after {
- right: 5px;
+ //right: 5px;
+ @include right(5px);
position: absolute;
font-size: 25px;
content: "\e5c5";
@@ -44,7 +45,8 @@
}
> div, > .item {
display: inline-block;
- margin: 0 8px 3px 0;
+ //margin: 0 8px 3px 0;
+ @include margin(0,8px,3px,0);
padding: 0;
background: transparent;
border: 0;
diff --git a/sass/ripples.scss b/sass/ripples.scss
index 12f8a717..97581d8b 100644
--- a/sass/ripples.scss
+++ b/sass/ripples.scss
@@ -6,7 +6,8 @@
.ripple-container {
position: absolute;
top: 0;
- left: 0;
+ //left: 0;
+ @include left(0);
z-index: 1;
width: 100%;
height: 100%;
@@ -18,7 +19,8 @@
position: absolute;
width: 20px;
height: 20px;
- margin-left: -10px;
+ //margin-left: -10px;
+ @include margin-left(-10px);
margin-top: -10px;
border-radius: 100%;
background-color: #000; // fallback color