diff --git a/vendor/assets/stylesheets/magic/content/_aside_nav.scss b/vendor/assets/stylesheets/magic/content/_aside_nav.scss index af4cb92..b737c47 100644 --- a/vendor/assets/stylesheets/magic/content/_aside_nav.scss +++ b/vendor/assets/stylesheets/magic/content/_aside_nav.scss @@ -1,8 +1,9 @@ // mobile first on the bottom #nav-aside { - display: block; position: fixed; - margin: 0; padding: 0; - right: 0; left: 0; bottom: 0; + @include position(fixed, null 0 0 0); + @include margin(0); + @include padding(0); + display: block; // Render via GPU (for better scrolling performance) @include gpu_render; @@ -13,8 +14,9 @@ .inner-aside { height: 100%; } .aside-btn { + @include padding(0); + @include margin(0); display: block; display: inline-block; position: relative; - margin: 0; padding: 0; width: $aside-nav-width; line-height: $aside-nav-btn-height; text-align: center; vertical-align: middle; @@ -39,8 +41,8 @@ } &.user-pic { + @include padding(0); height: $aside-nav-avatar-height; max-height: $aside-nav-avatar-height; - padding: 0; overflow: hidden; img { display: block; display: inline-block; position: relative; @@ -50,9 +52,10 @@ } .bubble-counter { + @include padding(0 5px); + @include margin(0); + @include position(absolute, 3px null null 27px); display: block; position: absolute; - padding: 0 5px; margin: 0; - top: 3px; left: 27px; line-height: 14px; font-size: 10px; background: #cc4246; @@ -65,7 +68,7 @@ &.bordered { .inner-aside { border: solid 1px $aside-nav-border-color; } .aside-btn { - margin: 0 -1px; + @include margin(0 -1px); border: solid 1px #ccc; border-top: solid 1px rgba(255,255,255,.42); &:active, &.active { @@ -73,7 +76,7 @@ @include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42) ); } &.user-pic { - margin: -1px -1px 0; + @include margin(-1px -1px 0); border: solid 1px #ccc; } } @@ -142,4 +145,4 @@ } -} \ No newline at end of file +} diff --git a/vendor/assets/stylesheets/magic/content/_banner.scss b/vendor/assets/stylesheets/magic/content/_banner.scss index 1ca9f06..32de5a9 100644 --- a/vendor/assets/stylesheets/magic/content/_banner.scss +++ b/vendor/assets/stylesheets/magic/content/_banner.scss @@ -1,25 +1,27 @@ //## Header / Banner .banner-footer, .banner-header { + @include margin(0); + @include padding(0); display: block; position: relative; - margin: 0; padding: 0; } .banner-box.press { - margin: 0; padding: 10px 0; + @include margin(0); + @include padding(10px 0); } .banner-box.responsive-hero { - padding: 0; + @include padding(0); & > .corset, & > .container { - padding-top: 20px; padding-bottom: 20px; - &.compact { padding-top: 0; padding-bottom: 0; } + @include padding(20px null); + &.compact { @include padding(0 null); } } h1.loud { + @include padding(0); text-align: center; color: #fff; - padding: 0; font-size: 50px; line-height: 60px; text-shadow: 0 1px 1px #000; @@ -39,12 +41,12 @@ &.fixed-bg { background-attachment:fixed; } .banner-footer { - padding: 10px 0; + @include padding(10px 0); background-color: rgba(255,255,255,.30); z-index: 15; } .banner-header { - padding: 10px 0; + @include padding(10px 0); background-color: rgba(255,255,255,.30); z-index: 15; } diff --git a/vendor/assets/stylesheets/magic/content/_box.scss b/vendor/assets/stylesheets/magic/content/_box.scss index d53a5cc..7ffdebd 100644 --- a/vendor/assets/stylesheets/magic/content/_box.scss +++ b/vendor/assets/stylesheets/magic/content/_box.scss @@ -1,32 +1,35 @@ .box, .box > .header, .box > .body, .box > .pic { + @include padding(0); + @include margin(0); display: block; position: relative; - margin: 0; padding: 0; } .box { - margin: 0 0 20px; padding: 10px; + @include margin(0 0 20px); + @include padding(10px); border: solid 1px $main-border-color; @include border-radius(3px); text-align: left; background: #fff; &.shadow { @include box-shadow( 0 3px 3px 0 rgba(0, 0, 0, 0.20) ); } - &.left-pic { padding-left: 110px; } - &.no-press { margin: 0; } + &.left-pic { @include padding(null null null 110px); } + &.no-press { @include margin(0); } &.blur { background: rgba(255,255,255,.42); } & > .pic { - margin: 0 10px 0 -100px; + @include margin(0 10px 0 -100px); width: 100px; float: left; border: solid 1px $main-border-color; } & > .header { - padding: 5px 10px 5px; + @include padding(5px 10px 5px); border-bottom: solid 1px $main-border-color; &, h1, h2, h3, h4, h5, h6, p, span, .h1, .h2, .h3, .h4, .h5, .h6 { - margin: 0; padding: 0 5px 2px; + @include margin(0); + @include padding(0 5px 2px); color: $brand-color; line-height: 27px; font-size: 18px; @@ -35,13 +38,13 @@ &.blank { border-bottom: solid 1px transparent; } i, i:before { color: #999; - margin-right: 2px; + @include margin(null 2px null null); } } .pic + .header { padding-left: 0; margin-left: 10px; } & > .body { - padding: 10px 10px 5px; + @include padding(10px 10px 5px); } } @@ -126,4 +129,4 @@ .feature-heading { font-size: 25px; margin: 0 0 10px; } p.loud, p.highlight { font-size: 15px; } } -} \ No newline at end of file +} diff --git a/vendor/assets/stylesheets/magic/content/_buttons.scss b/vendor/assets/stylesheets/magic/content/_buttons.scss index feae4c1..ed7ac0c 100644 --- a/vendor/assets/stylesheets/magic/content/_buttons.scss +++ b/vendor/assets/stylesheets/magic/content/_buttons.scss @@ -6,11 +6,12 @@ .btn-splited, .btn-divided { + @include margin(0); + @include padding(0); display: table; width: auto; width: 100%; // margin: 0 0 10px; - margin: 0; padding: 0; & > * { display: table-cell; position: relative; padding: $padding-base-vertical $padding-base-horizontal; @@ -80,10 +81,10 @@ // Vertically space out multiple block buttons .btn-block + .btn-block { - margin-top: 10px; + @include margin(10px null null null); } .btn-splited + .btn-splited, .btn-splited + .btn-divided, .btn-divided + .btn-splited, .btn-divided + .btn-divided { - margin-top: 10px; + @include margin(10px null null null); } @@ -246,4 +247,4 @@ &.half { width: 50%; margin-left: auto; margin-right: auto; } &:hover { text-decoration: none !important; } -} \ No newline at end of file +} diff --git a/vendor/assets/stylesheets/magic/content/_forms.scss b/vendor/assets/stylesheets/magic/content/_forms.scss index 81661e3..74563ee 100644 --- a/vendor/assets/stylesheets/magic/content/_forms.scss +++ b/vendor/assets/stylesheets/magic/content/_forms.scss @@ -1,23 +1,24 @@ //## Signup/Login Forms // .centered-form { + @include padding(15px); + @include margin(10px auto); text-align: center; max-width: 350px; - padding: 15px; - margin: 10px auto; - h2 { margin: 0 0 15px; } + h2 { @include margin(0 0 15px); } .form-control { position: relative; @include placeholder { color: #ccc; } } .btn:last-child { - margin: 20px 0 0; + @include margin(20px 0 0); } } .inpt-group { + @include margin(0 0 20px); + @include padding(0); display: block; position: relative; - margin: 0 0 20px; padding: 0; .form-control { position: relative; margin: 0 0 -1px !important; @@ -68,8 +69,9 @@ form.corset, .form { label { + @include margin(0); + @include padding(7px 0); display: block; position: relative; - margin: 0; padding: 7px 0; line-height: 20px; text-align:left; } @@ -78,12 +80,14 @@ form.corset, .form { // Inputs with Icons (orderlifticons) .icon_field { + @include margin(0); + @include padding(0); display: block; position: relative; - margin: 0; padding: 0; &:after { - display: block; position: absolute; - margin: 0; padding: 0; - left: 2px; top: 0; bottom: 0; + @include margin(0); + @include padding(0); + @include position(absolute, 0 null 2px 0); + display: block; width: 24px; line-height: 34px; text-align: center; vertical-align: middle; content: "\e003"; @@ -102,11 +106,11 @@ form.corset, .form { // color: rgba(0,0,0,.20); // } // } - input, input.form-control { padding-left: 28px; } - &.half { width: 50%; margin: 0 auto; } + input, input.form-control { @include padding(null null null 28px); } + &.half { @include margin(0 auto); width: 50%; } &.fat { input { - padding: 11px 20px 9px 34px; + @include padding(11px 20px 9px 34px); height: 42px; font-size: 18px; @include placeholder { @@ -176,7 +180,7 @@ form.corset, .form { } .form-control + .form-control { - margin-top: 10px; + @include margin(10px null null null); } diff --git a/vendor/assets/stylesheets/magic/content/_icons.scss b/vendor/assets/stylesheets/magic/content/_icons.scss index 31627c2..f429869 100644 --- a/vendor/assets/stylesheets/magic/content/_icons.scss +++ b/vendor/assets/stylesheets/magic/content/_icons.scss @@ -1,18 +1,18 @@ .feature-icon { - margin: 0 auto; + @include margin(0 auto); + @include size($that_size $that_size); $that_size: 90px; - width: $that_size; height: $that_size; @include border-radius($that_size); border: solid 5px transparentize($orange, 0.5); - img { max-width: 80%; margin: 10%; } + img { @include margin(10%); max-width: 80%; } i { - display:block; position: absolute; - top: -1px; right: -4px; + @include position(absolute, -1px -4px null null); + @include size(24px 24px); + display:block; background: $orange; color: #fff; @include border-radius(20px); - width: 24px; height: 24px; line-height: 24px; font-size: 18px; } -} \ No newline at end of file +} diff --git a/vendor/assets/stylesheets/magic/content/_inputs.scss b/vendor/assets/stylesheets/magic/content/_inputs.scss index e447d18..c38eaa1 100644 --- a/vendor/assets/stylesheets/magic/content/_inputs.scss +++ b/vendor/assets/stylesheets/magic/content/_inputs.scss @@ -8,16 +8,16 @@ $input-height: $input-height + 1; &#{$parent} > * { height: $input-height; } &#{$parent} > .icn { + @include padding($padding-vertical 2px); height: $input-height; max-height: $input-height; font-size: $font-size * 1.2; - padding: $padding-vertical 2px; line-height: floor(($font-size * $line-height)); @include inpt_icn_width( ($font-size * $line-height), $padding-base-vertical ); } &#{$parent} > .inpt > input { + @include padding($padding-vertical $padding-horizontal $padding-vertical 5px); height: $input-height; - padding: $padding-vertical $padding-horizontal $padding-vertical 5px; font-size: $font-size; line-height: $line-height; border-radius: $border-radius; @@ -49,8 +49,9 @@ @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s); & > * { + @include padding(0); + @include margin(0); display: table-cell; position: relative; - padding: 0; margin: 0; height: $input-height-base + 1; font-size: inherit; @@ -72,10 +73,10 @@ &.inpt { input, label, textarea { + @include margin(0); + @include size(100% $input-height-base + 1); display: block; position: relative; padding: $padding-base-vertical $padding-base-horizontal $padding-base-vertical 5px; - margin: 0; - height: $input-height-base + 1; @include box-sizing(border-box); border: none; @include box-shadow( none ); @@ -85,10 +86,10 @@ } &.icn { + @include padding($padding-base-vertical 2px); width: 2%; font-size: $font-size-base * 1.2; line-height: $line-height-computed; - padding: $padding-base-vertical 2px; text-align: center; color: lighten($input-color, 20%); @include inpt_icn_width( $line-height-computed, $padding-base-vertical ); diff --git a/vendor/assets/stylesheets/magic/content/_navbar.scss b/vendor/assets/stylesheets/magic/content/_navbar.scss index 6a2d250..b48da0d 100644 --- a/vendor/assets/stylesheets/magic/content/_navbar.scss +++ b/vendor/assets/stylesheets/magic/content/_navbar.scss @@ -109,9 +109,9 @@ body, #body, #container, .main-content, .main_content { .navbar { &.navbar-slidebar { .navbar-collapse { + @include position(fixed, 0 auto 0 0); + @include margin(0); display: block; position: fixed; - top: 0; right: auto; bottom: 0; left: 0; - margin: 0; background: $dark-bg; @include transform( translateZ( 0 ) ); @include transform( translateX( -222px ) ); @@ -132,4 +132,4 @@ body, #body, #container, .main-content, .main_content { } } } -} \ No newline at end of file +} diff --git a/vendor/assets/stylesheets/magic/content/_notice.scss b/vendor/assets/stylesheets/magic/content/_notice.scss index e9ca85c..2cc195d 100644 --- a/vendor/assets/stylesheets/magic/content/_notice.scss +++ b/vendor/assets/stylesheets/magic/content/_notice.scss @@ -1,10 +1,9 @@ // Important Notice shown on top of page .important_notice { - display: block; position: fixed; - top: $important-notice-top; bottom: $important-notice-bottom; - left:0; right:0; + @include position(fixed, $important-notice-top 0 $important-notice-bottom 0); + @include padding(0); + display: block; line-height: $important-notice-height; height: $important-notice-height; max-height: $important-notice-height; - padding: 0; z-index: $zindex-important-notice; text-align: center; background: $important-notice-bg; @@ -30,8 +29,7 @@ // Important Notice shown on top of page .application_notice { - position: fixed; - top: $application-notice-top; left: $application-notice-gap; right: $application-notice-gap; + @include position(fixed, $application-notice-top $application-notice-gap null $application-notice-gap); z-index: $zindex-application-notice; } diff --git a/vendor/assets/stylesheets/magic/content/_panel.scss b/vendor/assets/stylesheets/magic/content/_panel.scss index f78adf3..5ad1fba 100644 --- a/vendor/assets/stylesheets/magic/content/_panel.scss +++ b/vendor/assets/stylesheets/magic/content/_panel.scss @@ -1,6 +1,6 @@ .panel-task { .panel-heading { - padding: 0; + @include padding(0); overflow: hidden; @include border-radius(0); background: #fff; @@ -22,7 +22,7 @@ font-size: 24px; } .cell.text { - padding: 0 20px; + @include padding(0 20px); text-align: left; } .cell.state-icon { color: #fff; } diff --git a/vendor/assets/stylesheets/magic/content/_pix.scss b/vendor/assets/stylesheets/magic/content/_pix.scss index 2278ea3..3e622bf 100644 --- a/vendor/assets/stylesheets/magic/content/_pix.scss +++ b/vendor/assets/stylesheets/magic/content/_pix.scss @@ -1,7 +1,8 @@ .pic, .pic-list, .pic-list > li, .pic-list > li > *, .pic-list .pic, .pic-list .facts, .pic-list .facts .head, .pic-list .facts .body { + @include margin(0); + @include padding(0); display: block; position: relative; - margin: 0; padding: 0; } .pic { @@ -22,12 +23,12 @@ .pic-list { list-style: none; & > li { - margin: 0; + @include margin(0); border: none; border-bottom: solid 1px $main-border-color; &:last-child { border-bottom: none; } & > * { - padding: 5px 0; + @include padding(5px 0); @include clearfix; .pic { width: 50px; @@ -39,7 +40,7 @@ } } .facts { - padding: 5px 0; + @include padding(5px 0); margin-left: 60px; .head { line-height: 20px; diff --git a/vendor/assets/stylesheets/magic/effects/_noise.scss b/vendor/assets/stylesheets/magic/effects/_noise.scss index a3472e1..d160581 100644 --- a/vendor/assets/stylesheets/magic/effects/_noise.scss +++ b/vendor/assets/stylesheets/magic/effects/_noise.scss @@ -21,16 +21,12 @@ Instructions: } .noise:before, .body-noise:before { + @include position(absolute, 0 0 0 0); content: ""; - position: absolute; z-index: -1; - top:0; - bottom:0; - left:0; - right:0; opacity: .42; background-image: url(data:image/png;base64,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); } -/*** SNIPPET ENDS ***/ \ No newline at end of file +/*** SNIPPET ENDS ***/ diff --git a/vendor/assets/stylesheets/magic/effects/_reflections.scss b/vendor/assets/stylesheets/magic/effects/_reflections.scss index 2355982..df954fc 100644 --- a/vendor/assets/stylesheets/magic/effects/_reflections.scss +++ b/vendor/assets/stylesheets/magic/effects/_reflections.scss @@ -8,20 +8,17 @@ .reflection { + @include position(absolute, 100% 0 null 0); + @include margin(4px 0 0); display: block; - position: absolute; background: inherit; border: inherit; @include box-shadow( inherit ); - @include border-radius( inherit ); - + @include border-radius( inherit ); z-index: -1; - margin: 4px 0 0; - top: 100%; // height: 50%; height: 130px; - left: 0; right: 0; // -moz-transform: scaleY(-1); // -webkit-transform: scaleY(-1); // -ms-transform: scaleY(-1); @@ -33,11 +30,9 @@ filter: blur(2px); opacity: .50; &:after { + @include position(absolute, -5px -5px 0 -5px); display: block; - position: absolute; content: ""; - top: -5px; bottom: 0; - left: -5px; right: -5px; z-index: 3; @include linear-gradient( 270deg, diff --git a/vendor/assets/stylesheets/magic/effects/_shadows.scss b/vendor/assets/stylesheets/magic/effects/_shadows.scss index cb7b75a..2747cea 100644 --- a/vendor/assets/stylesheets/magic/effects/_shadows.scss +++ b/vendor/assets/stylesheets/magic/effects/_shadows.scss @@ -33,11 +33,8 @@ // display: block; // z-index: 3; &:before { - content: ""; display: block; position: absolute; width:auto; - top: 0; - right: #{$gap}; - left: #{$gap}; - bottom: 0; + @include position(absolute, 0 #{$gap} 0 #{$gap}); + content: ""; display: block; width:auto; border: solid 1px #ccc; @include border-radius( #{$radius} ); @include make_shadows($horizontal, $vertical, $blur, $size, $color, $times); @@ -49,10 +46,9 @@ // position: relative; // display: block; &:before, &:after { - content: ""; display: block; position: absolute; - bottom:15px; - width:50%; - height:20%; + @include size(50% 20%); + @include position(absolute, null null 15px null); + content: ""; display: block; z-index: -2; @include make_shadows($horizontal, $vertical, $blur, $size, $color, $times); } @@ -70,11 +66,9 @@ // position: relative; // display: block; &:before, &:after { - content: ""; display: block; position: absolute; + @include position(absolute, nunll 20px 5px 80px); + content: ""; display: block; background: transparent; - left: 80px; - bottom:5px; - right:20px; height:35%; z-index: -2; @include make_shadows(-80px, 0, $blur, 0, $color, $times); @@ -95,9 +89,8 @@ // position: relative; // display: block; &:before { - content: ""; display: block; position: absolute; - top: 10px; bottom: 10px; - left: 0; right: 0; + @include position(absolute, 10px 0 10px 0); + content: ""; display: block; z-index: -2; @include elipse( 10, 100 ); @include make_shadows($horizontal, $vertical, $blur, $size, $color, $times); @@ -108,9 +101,8 @@ // position: relative; // display: block; &:before { - content: ""; display: block; position: absolute; - top: 0; bottom: 0; - left: 10px; right: 10px; + @include position(absolute, 10px 0 10px 0); + content: ""; display: block; z-index: -2; @include elipse( 100, 10 ); @include make_shadows($horizontal, $vertical, $blur, $size, $color, $times); diff --git a/vendor/assets/stylesheets/magic/elements/_circle_diagram.scss b/vendor/assets/stylesheets/magic/elements/_circle_diagram.scss index 0e5b8fb..246052c 100644 --- a/vendor/assets/stylesheets/magic/elements/_circle_diagram.scss +++ b/vendor/assets/stylesheets/magic/elements/_circle_diagram.scss @@ -10,15 +10,16 @@ $stripe_color: $gray-light; .inner_half_one, .inner_half_two, .outer_half_one, .outer_half_two, .middle_full { + @include margin(0); + @include padding(0); display: block; position: relative; - margin: 0; padding: 0; } .circle-diagram { + @include margin(20px auto); + @include size($circle_width $circle_width); display: inline-block; - margin: 20px auto; - width: $circle_width; height: $circle_width; // border: solid 1px $stripe_color; border: none; @include border-radius( #{$circle_width * 3} ); @@ -122,8 +123,9 @@ $stripe_color: $gray-light; .inner_half_one, .inner_half_two, .outer_half_one, .outer_half_two, .middle_full { + @include margin(0); + @include padding(0); display: block; position: relative; - margin: 0; padding: 0; } diff --git a/vendor/assets/stylesheets/magic/helper/_arrow_hints.scss b/vendor/assets/stylesheets/magic/helper/_arrow_hints.scss index 324ea6e..81ad8b0 100644 --- a/vendor/assets/stylesheets/magic/helper/_arrow_hints.scss +++ b/vendor/assets/stylesheets/magic/helper/_arrow_hints.scss @@ -6,21 +6,21 @@ @include handWrittenFont; } &:before { - display: none; position: absolute; content: ""; - padding: 0; - width: 50px; height: 50px; - bottom: 100%; left: 50%; - margin: 0 0 10px -25px; + @include padding(0); + @include size(50px 50px); + @include position(absolute, null null 100% 50%); + @include margin(0 0 10px -25px); + display: none; content: ""; background: transparent image-url("magic/arrows/arrow2-2.png") center center no-repeat; background-size: contain; @include rotation(-53); } &:after { - display: none; position: absolute; content: attr(data-text); - padding: 0; + @include position(absolute); + @include padding(0, null null 100% 50%); + @include margin(0 0 37px 30px); + display: none; content: attr(data-text); height: 30px; line-height: 30px; - bottom: 100%; left: 50%; - margin: 0 0 37px 30px; color: #a0c775; font-size: 28px; font-weight: 300; text-shadow: 0 1px 1px #000; @@ -32,4 +32,4 @@ &:before { display: block; } &:after { display: block; } } -} \ No newline at end of file +} diff --git a/vendor/assets/stylesheets/magic/helper/_crossed.scss b/vendor/assets/stylesheets/magic/helper/_crossed.scss index 7035d01..7965dc1 100644 --- a/vendor/assets/stylesheets/magic/helper/_crossed.scss +++ b/vendor/assets/stylesheets/magic/helper/_crossed.scss @@ -2,8 +2,9 @@ display: inline-block; position: relative; &:before, &:after { + @include margin(0); + @include padding(0); display: block; position: absolute; content: ""; - margin: 0; padding: 0; } &:before { top: -10px; right: -10px; bottom: -6px; left: -8px; @@ -19,4 +20,4 @@ @include handWrittenFont; text-shadow: 0 1px 1px #fff; } -} \ No newline at end of file +} diff --git a/vendor/assets/stylesheets/magic/helper/_divider.scss b/vendor/assets/stylesheets/magic/helper/_divider.scss index 928def5..28262aa 100644 --- a/vendor/assets/stylesheets/magic/helper/_divider.scss +++ b/vendor/assets/stylesheets/magic/helper/_divider.scss @@ -1,12 +1,13 @@ .divider { + @include padding(0); display: block; position: relative; - padding: 0; // margin: floor($line-height-computed / 2) 0; background: inherit; text-align: center; & > * { + @include margin(0 auto); + @include padding(0 15px); display: inline-block; position: relative; - margin: 0 auto; padding: 0 15px; background: inherit; z-index: 3; &.white { background: $white; } @@ -15,23 +16,24 @@ &.soft { background: $main-bg; } } &:after { - display: block; position: absolute; content: ""; - margin: -1px 0 0; padding: 0; - top: 50%; height: 0; - left: 0; right: 0; + @include position(absolute, 50% 0 null 0); + @include margin(-1px 0 0); + @include padding(0); + display: block; content: ""; + height: 0; z-index: 1; } } hr { + @include padding(0); display: block; position: relative; // margin: floor($line-height-computed / 2) 0; - padding: 0; height: 0; border: none; } -hr, .divider { margin: $line-height-computed 0; } +hr, .divider { @include margin($line-height-computed 0); } hr, .divider:after { border-top: solid 1px $main-border-color; border-bottom: solid 1px $white; diff --git a/vendor/assets/stylesheets/magic/helper/_dots.scss b/vendor/assets/stylesheets/magic/helper/_dots.scss index 3f3f28d..6041c71 100644 --- a/vendor/assets/stylesheets/magic/helper/_dots.scss +++ b/vendor/assets/stylesheets/magic/helper/_dots.scss @@ -1,6 +1,6 @@ .dot { + @include size(10px 10px); display: block; display: inline-block; position: relative; - width: 10px; height: 10px; @include border-radius( 15px ); border: solid 1px $main-border-color; &.ok { background: #55b8f7; border: solid 1px darken( #55b8f7, 10% ); } @@ -9,10 +9,10 @@ .number_dot { + @include size(92px 92px); + @include margin(0 auto 10px); display: inline-block; - height: 92px; line-height: 82px; - width: 92px; text-align: center; @include border-radius( 100px ); @include box-shadow (inset 0 1px 1px 0 rgba(51,102,153,0.4)); @@ -22,5 +22,4 @@ background-color: $pink; font-size: 40px; font-weight: 800; - margin: 0 auto 10px; -} \ No newline at end of file +} diff --git a/vendor/assets/stylesheets/magic/helper/_three_previews.scss b/vendor/assets/stylesheets/magic/helper/_three_previews.scss index f5d4d0b..622dffc 100644 --- a/vendor/assets/stylesheets/magic/helper/_three_previews.scss +++ b/vendor/assets/stylesheets/magic/helper/_three_previews.scss @@ -1,10 +1,12 @@ .three-previews { + @include margin(0 1%); + @include padding(0); display: block; position: relative; - margin: 0 1%; - padding: 0; .preview { + @include margin(0 25%); + @include padding(0); display: block; position: relative; - margin: 0 25%; min-height: 80px; z-index: 5; padding: 0; + min-height: 80px; z-index: 5; // min-height: 50px; background: #ccc; // border: solid 3px #fff; @@ -16,7 +18,8 @@ img { width: 100%; } &:first-child, &:last-child { - margin: 0; min-height: 40px; + @include margin(0); + min-height: 40px; position: absolute; width: 45%; z-index: 1; @include box-shadow( 0 10px 5px 3px rgba(0,0,0,.23) ); } @@ -24,10 +27,10 @@ &:last-child { right: 0; bottom: 0; } } &.bordered { + @include margin(0 auto); border-bottom: solid 1px $main-border-color; overflow: hidden; max-width: 500px; - margin: 0 auto; } } diff --git a/vendor/assets/stylesheets/magic/layout/_fullpage_table.scss b/vendor/assets/stylesheets/magic/layout/_fullpage_table.scss index 99c0e03..8efbbe3 100644 --- a/vendor/assets/stylesheets/magic/layout/_fullpage_table.scss +++ b/vendor/assets/stylesheets/magic/layout/_fullpage_table.scss @@ -22,11 +22,13 @@ html, body, #body { .fixed-table, .layout-table, .inline_table { + @include padding(0); + @include margin(0); display: block; position: relative; - padding: 0; margin: 0; & > * { + @include padding(0); + @include margin(0); display: block; position: relative; - padding: 0; margin: 0; vertical-align: top; &.top { vertical-align: top; } &.middle { vertical-align: middle; } @@ -37,8 +39,9 @@ html, body, #body { .inline_table { + @include padding(0); + @include margin(0); display: table; position: relative; - padding: 0; margin: 0; width: 100%; & > * { display: table-cell; @@ -90,9 +93,9 @@ html, body, #body { & > .tr, & > .row, & > .table-row { display: table-row; & > .td, & > .th, & > .cell { + @include padding(10px); display: table-cell; vertical-align: middle; - padding: 10px; &.top { vertical-align: top; } &.bottom { vertical-align: bottom; } } diff --git a/vendor/assets/stylesheets/magic/layout/_section.scss b/vendor/assets/stylesheets/magic/layout/_section.scss index e8ba693..3719a5d 100644 --- a/vendor/assets/stylesheets/magic/layout/_section.scss +++ b/vendor/assets/stylesheets/magic/layout/_section.scss @@ -15,9 +15,11 @@ &.shine-top { overflow: hidden; &:before { - display: block; position: absolute; content: ""; z-index: 11; - margin: 0; padding: 0; - bottom: 100%; left: 10%; right: 10%; height: 100px; + @include padding(0); + @include margin(0); + @include position(absolute, null 10% 100% 10%); + display: block; content: ""; z-index: 11; + height: 100px; @include spezial_radius( 500px / 20px ); @include box-shadow( 0 5px 20px 0 rgba(0,0,0,.23) ); } @@ -25,9 +27,11 @@ &.shine-bottom { overflow: hidden; &:after { - display: block; position: absolute; content: ""; z-index: 11; - margin: 0; padding: 0; - top: 100%; left: 10%; right: 10%; height: 100px; + @include padding(0); + @include margin(0); + @include position(absolute, 100% 10% null 10%); + display: block; content: ""; z-index: 11; + height: 100px; @include spezial_radius( 500px / 20px ); @include box-shadow( 0 -5px 20px 0 rgba(0,0,0,.23) ); } diff --git a/vendor/assets/stylesheets/magic/lib/_forms.scss b/vendor/assets/stylesheets/magic/lib/_forms.scss index 7501bc5..c3332c4 100644 --- a/vendor/assets/stylesheets/magic/lib/_forms.scss +++ b/vendor/assets/stylesheets/magic/lib/_forms.scss @@ -39,4 +39,4 @@ textarea, .select2-container, .token-input-list { @content; } -} \ No newline at end of file +} diff --git a/vendor/assets/stylesheets/magic/lib/_helper.scss b/vendor/assets/stylesheets/magic/lib/_helper.scss index 47069ec..4a2223e 100644 --- a/vendor/assets/stylesheets/magic/lib/_helper.scss +++ b/vendor/assets/stylesheets/magic/lib/_helper.scss @@ -1,6 +1,5 @@ @mixin squareSize( $size ) { - width: #{ $size }px; - height: #{ $size }px; + @include size(#{ $size }px #{ $size }px); } @mixin horizontal-padding( $pad: 5px ) { @@ -128,11 +127,11 @@ .navbar-toggle { @if ( 16px + 14 ) > ($navHeight - 5) { - margin: 4px 15px; + @include margin(4px 15px); @include vertical-padding( $padHorizontal - 3px ); line-height: 16px; } @else { - margin: #{$padHorizontal - 6px} 15px; + @include margin(#{$padHorizontal - 6px} 15px); @include vertical-padding( 7px ); line-height: 16px; } @@ -141,32 +140,32 @@ .navbar-nav { // a:not(.btn) { } & > li > a, & > a { - padding: $padHorizontal $navbar-padding-horizontal; + @include padding($padHorizontal $navbar-padding-horizontal); line-height: $lineHeight; &.btn { @if ($lineHeight + 10) > ($navHeight - 5) { - margin: 4px 5px; + @include margin(4px 5px); @include vertical-padding( $padHorizontal - 5px ); line-height: $lineHeight; } @else { - margin: #{$padHorizontal - 6px} 5px; + @include margin(#{$padHorizontal - 6px} 5px); @include vertical-padding( 5px ); line-height: $lineHeight; @if ($lineHeight + 16) < ($navHeight - 5) { &.btn-lg { - margin: #{$padHorizontal - 9px} 5px; + @include margin(#{$padHorizontal - 9px} 5px); @include vertical-padding( 8px ); } } &.btn-sm { - margin: #{$padHorizontal - 4px} 5px; + @include margin(#{$padHorizontal - 4px} 5px); @include vertical-padding( 3px ); } &.btn-xs { - margin: #{$padHorizontal - 2px} 5px; + @include margin(#{$padHorizontal - 2px} 5px); @include vertical-padding( 1px ); } diff --git a/vendor/assets/stylesheets/magic/lists/_nav.scss b/vendor/assets/stylesheets/magic/lists/_nav.scss index cd3c353..2f1739b 100644 --- a/vendor/assets/stylesheets/magic/lists/_nav.scss +++ b/vendor/assets/stylesheets/magic/lists/_nav.scss @@ -1,21 +1,24 @@ // ### Nav-List ( ul / ol ) .nav_list { + @include margin(0); + @include padding(0); display: block; position: relative; list-style: none; - margin: 0; padding: 0; background: $white; li { + @include margin(0); + @include padding(0); display: block; position: relative; list-style: none; - margin: 0; padding: 0; border: none; // border-top: solid 1px $white; border-bottom: solid 1px $gray-light; a, span.lst_lnk { + @include margin(0); + @include padding(5px 10px); display: block; position: relative; - margin: 0; padding: 5px 10px; @include sansCondensedBold; line-height: 30px; font-size: 14px; @@ -23,12 +26,12 @@ color: $gray; background: transparent; .label { + @include padding(0); + @include margin(null null null 10px); font-size: inherit; line-height: inherit; @include border-radius( 10px ); - padding: 0; width: 30px; - margin-left: 10px; text-align: center; // background: $gray-light; background: transparent; @@ -41,8 +44,9 @@ } .sub_nav { + @include margin(0); + @include padding(0); display: block; position: relative; - margin: 0; padding: 0; list-style: none; display: none; // @include box-shadow( @@ -54,8 +58,9 @@ // #### overflow: hidden; &:before, &:after { + @include margin(0); + @include padding(0); display: block; position: absolute; content: ""; - margin: 0; padding: 0; z-index: 3; } &:before { @@ -74,7 +79,7 @@ // &:first-child { border-top: solid 1px $gray-light; } a, span.lst_lnk { - padding: 5px 10px; + @include padding(5px 10px); line-height: 20px; font-size: 14px; @@ -182,18 +187,15 @@ &.scroll { - position: fixed; - // width: 138px; - top: 60px; + @include position(fixed, 60px null null null); } &.arrow li { a { - padding-right: 30px; + @include padding(null 30px null null); &:after { + @include position(absolute, 12px 5px null null); display: block; - position: absolute; - top: 12px; right: 5px; line-height: 30px; content: "\f23b"; font-family: magiconsregular; @@ -216,8 +218,8 @@ border-bottom: solid 1px $main-border-color; background: transparent; a { + @include padding(11px 10px); background: transparent; - padding: 11px 10px; line-height: 20px; color: #333; font-weight: 300; @@ -232,8 +234,8 @@ &:last-child { border-bottom: 0; } background: transparent; a { + @include padding(6px 20px); background: transparent; - padding: 6px 20px; } &.active a { background: #fff; } } diff --git a/vendor/assets/stylesheets/magic/xxx/_body.scss b/vendor/assets/stylesheets/magic/xxx/_body.scss index 548e264..8055eef 100644 --- a/vendor/assets/stylesheets/magic/xxx/_body.scss +++ b/vendor/assets/stylesheets/magic/xxx/_body.scss @@ -8,10 +8,9 @@ // } #fixed_nav { - position: fixed; + @include position(fixed, 0 0 null 0); // let graphic card render header: @include transform( translateZ( 0 ) ); - top: 0; left: 0; right: 0; @include border-radius(0); z-index: 999; min-height: 30px; @@ -19,7 +18,7 @@ // background: #727270; color: #fff; .navbar-brand { - padding: 0 10px 0 0; + @include padding(0 10px 0 0); height: 40px; line-height: 40px; &.logo { @@ -40,7 +39,7 @@ @include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.25) ); ul.nav > li { & > a { - padding: 10px; + @include padding(10px); line-height: 20px; &:hover { background: #000 !important; @@ -48,22 +47,22 @@ } } & > span { - padding: 10px; + @include padding(10px); line-height: 20px; } form { - padding: 4px 0; + @include padding(4px 0); } &.active a { background: #000; color: $brand-color; } } } .bubble-links { + @include padding(0 42px); background: #fff; - padding: 0 42px; ul.nav.navbar-nav > li { - padding: 8px; + @include padding(8px); & > a { - padding: 2px 12px; + @include padding(2px 12px); line-height: 20px; color: #777; &:hover { @@ -83,7 +82,7 @@ } } ul.nav.navbar-nav.navbar-left > li { - padding: 8px; + @include padding(8px); & > a { border: solid 1px transparent; @include border-radius(15px); @@ -102,14 +101,13 @@ } .bubble-links, .navbar-brand { .navbar-nav > li > .dropdown-menu { - margin-top: 3px; + @include margin(3px null null null); border-radius: 3px; li a { color: #333; } } li.dropdown > a.dropdown-toggle { - padding-top: 5px; - padding-bottom: 5px; + @include padding(5px null); line-height: 30px; color: #fff; &:hover { @@ -130,11 +128,12 @@ //## Aside-Navigation #nav-aside { - display: block; position: fixed; + @include margin(0); + @include padding(0); + @include position(fixed, null 0 0 0); + display: block; @include transform( translateZ( 0 ) ); - margin: 0; padding: 0; - right: 0; left: 0; bottom: 0; background: #e1e1e1; z-index: 99; .inner-aside { @@ -142,8 +141,9 @@ border: solid 1px #ccc; } .aside-btn { + @include margin(0 -1px); + @include padding(12px 0 8px); display: block; position: relative; - margin: 0 -1px; padding: 12px 0 8px; width: 50px; line-height: 30px; text-align: center; @@ -170,9 +170,10 @@ text-shadow: 0 1px 2px rgba( 0,0,0,.42 ); } .bubble-counter { - display: block; position: absolute; - padding: 0 5px; margin: 0; - top: 3px; left: 27px; + @include padding(0 5px); + @include margin(0); + @include position(absolute, 3px null null 27px); + display: block; line-height: 14px; font-size: 10px; background: #cc4246; @@ -184,7 +185,7 @@ } -body.front { padding: 42px 0 0; } +body.front { @include padding(42px 0 0); } @@ -210,13 +211,14 @@ body.front { padding: 42px 0 0; } @include responsiveStep-sm { #fixed_nav.full-links .navbar-header > .navbar-brand {display: none;} body.app { - padding: 42px 0 0; - #body { padding:0; margin-left: 50px; } - #fixed_nav .container-fluid { padding: 0 20px 0 50px;} + @include padding(42px 0 0); + #body { @include padding(0); @include margin(null null null 50px); } + #fixed_nav .container-fluid { @include padding(0 20px 0 50px);} } #nav-aside { - top: 0; right: auto; padding: 42px 0 0; + @include padding(42px 0 0); + top: 0; right: auto; .aside-btn { // border: none; // border-bottom: solid 1px #ccc;