From 85d8f025c4386bd5368b448b7f1437b4436ebf07 Mon Sep 17 00:00:00 2001 From: mhmardani Date: Sun, 5 Feb 2017 14:04:25 +0330 Subject: [PATCH] implement with bi app sass --- .idea/bootstrap-material-design.iml | 12 ++ .idea/inspectionProfiles/Project_Default.xml | 6 + .idea/jsLibraryMappings.xml | 6 + .idea/misc.xml | 12 ++ .idea/modules.xml | 8 + .idea/vcs.xml | 6 + .idea/workspace.xml | 215 +++++++++++++++++++ sass/_buttons.scss | 8 +- sass/_cards.scss | 6 +- sass/_checkboxes.scss | 188 ++++++++-------- sass/_dialogs.scss | 3 +- sass/_form.scss | 3 +- sass/_inputs.scss | 3 +- sass/_lists.scss | 21 +- sass/_radios.scss | 8 +- sass/_togglebutton.scss | 9 +- sass/plugins/_plugin-dropdownjs.scss | 3 +- sass/plugins/_plugin-nouislider.scss | 9 +- sass/plugins/_plugin-selectize.scss | 6 +- sass/ripples.scss | 6 +- 20 files changed, 417 insertions(+), 121 deletions(-) create mode 100644 .idea/bootstrap-material-design.iml create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/jsLibraryMappings.xml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 .idea/workspace.xml 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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ 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