css: just some ordering

Order y & x axis by top, right, bottom, left logic

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 46105e1a5bb1fe9de7cf7e14f05842de760f3a79..dfbe891a56d10e4e65576fe111d8d6ba3965100c 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -338,16 +338,16 @@ $table-inverse-color:           $body-bg !default;
 //
 // For each of Bootstrap's buttons, define text, background and border color.
 
-$input-btn-padding-x:       1rem !default;
 $input-btn-padding-y:       .5rem !default;
+$input-btn-padding-x:       1rem !default;
 $input-btn-line-height:     1.25 !default;
 
-$input-btn-padding-x-sm:    .5rem !default;
 $input-btn-padding-y-sm:    .25rem !default;
+$input-btn-padding-x-sm:    .5rem !default;
 $input-btn-line-height-sm:  1.5 !default;
 
-$input-btn-padding-x-lg:    1rem !default;
 $input-btn-padding-y-lg:    .5rem !default;
+$input-btn-padding-x-lg:    1rem !default;
 $input-btn-line-height-lg:  1.5 !default;
 
 $btn-font-weight:                $font-weight-normal !default;
@@ -436,8 +436,8 @@ $input-group-addon-border-color: $input-border-color !default;
 $cursor-disabled:                not-allowed !default;
 
 $custom-control-gutter:   1.5rem !default;
-$custom-control-spacer-x: 1rem !default;
 $custom-control-spacer-y: .25rem !default;
+$custom-control-spacer-x: 1rem !default;
 
 $custom-control-indicator-size:       1rem !default;
 $custom-control-indicator-bg:         #ddd !default;
@@ -469,8 +469,8 @@ $custom-checkbox-indeterminate-box-shadow: none !default;
 $custom-radio-radius: 50% !default;
 $custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
 
-$custom-select-padding-x:          .75rem  !default;
 $custom-select-padding-y:          .375rem !default;
+$custom-select-padding-x:          .75rem  !default;
 $custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
 $custom-select-line-height:         $input-btn-line-height !default;
 $custom-select-color:               $input-color !default;
@@ -493,8 +493,8 @@ $custom-file-height:           2.5rem !default;
 $custom-file-width:            14rem !default;
 $custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default;
 
-$custom-file-padding-x:     .5rem !default;
 $custom-file-padding-y:     1rem !default;
+$custom-file-padding-x:     .5rem !default;
 $custom-file-line-height:   1.5 !default;
 $custom-file-color:         $gray !default;
 $custom-file-bg:            $white !default;
@@ -570,8 +570,8 @@ $zindex-tooltip:            1070 !default;
 
 $nav-item-margin:               .2rem !default;
 $nav-item-inline-spacer:        1rem !default;
-$nav-link-padding-x:            1rem !default;
 $nav-link-padding-y:            .5rem !default;
+$nav-link-padding-x:            1rem !default;
 $nav-link-hover-bg:             $gray-lighter !default;
 $nav-disabled-link-color:       $gray-light !default;
 
@@ -591,8 +591,8 @@ $nav-pills-active-link-bg:    $component-active-bg !default;
 
 // Navbar
 
-$navbar-padding-x:                  $spacer !default;
 $navbar-padding-y:                  ($spacer / 2) !default;
+$navbar-padding-x:                  $spacer !default;
 
 $navbar-brand-font-size:            $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
@@ -600,8 +600,8 @@ $nav-link-height:                   $navbar-brand-font-size * $line-height-base
 $navbar-brand-height:               ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
 $navbar-brand-padding-y:            ($navbar-brand-height - $nav-link-height) / 2 !default;
 
-$navbar-toggler-padding-x:           .75rem !default;
 $navbar-toggler-padding-y:           .25rem !default;
+$navbar-toggler-padding-x:           .75rem !default;
 $navbar-toggler-font-size:           $font-size-lg !default;
 $navbar-toggler-border-radius:       $btn-border-radius !default;
 
@@ -621,12 +621,12 @@ $navbar-light-toggler-border:       rgba($black,.1) !default;
 
 // Pagination
 
-$pagination-padding-x:                .75rem !default;
 $pagination-padding-y:                .5rem !default;
-$pagination-padding-x-sm:             .5rem !default;
+$pagination-padding-x:                .75rem !default;
 $pagination-padding-y-sm:             .25rem !default;
-$pagination-padding-x-lg:             1.5rem !default;
+$pagination-padding-x-sm:             .5rem !default;
 $pagination-padding-y-lg:             .75rem !default;
+$pagination-padding-x-lg:             1.5rem !default;
 $pagination-line-height:              1.25 !default;
 
 $pagination-color:                     $link-color !default;
@@ -677,8 +677,8 @@ $state-danger-border:            darken($state-danger-bg, 5%) !default;
 
 // Cards
 
-$card-spacer-x:            1.25rem !default;
 $card-spacer-y:            .75rem !default;
+$card-spacer-x:            1.25rem !default;
 $card-border-width:        1px !default;
 $card-border-radius:       $border-radius !default;
 $card-border-color:        rgba($black,.125) !default;
@@ -722,12 +722,12 @@ $popover-box-shadow:                  0 5px 10px rgba($black,.2) !default;
 
 $popover-title-bg:                    darken($popover-bg, 3%) !default;
 $popover-title-color:                 $headings-color !default;
-$popover-title-padding-x:             14px !default;
 $popover-title-padding-y:             8px !default;
+$popover-title-padding-x:             14px !default;
 
 $popover-content-color:               $body-color !default;
-$popover-content-padding-x:           14px !default;
 $popover-content-padding-y:           9px !default;
+$popover-content-padding-x:           14px !default;
 
 $popover-arrow-width:                 10px !default;
 $popover-arrow-color:                 $popover-bg !default;
@@ -749,8 +749,8 @@ $badge-color:                 $white !default;
 $badge-link-hover-color:      $white !default;
 $badge-font-size:             75% !default;
 $badge-font-weight:           $font-weight-bold !default;
-$badge-padding-x:             .4em !default;
 $badge-padding-y:             .25em !default;
+$badge-padding-x:             .4em !default;
 
 $badge-pill-padding-x:        .6em !default;
 // Use a higher than normal value to ensure completely rounded edges when
@@ -793,8 +793,8 @@ $modal-transition:            transform .3s ease-out !default;
 //
 // Define alert colors, border radius, and padding.
 
-$alert-padding-x:             1.25rem !default;
 $alert-padding-y:             .75rem !default;
+$alert-padding-x:             1.25rem !default;
 $alert-margin-bottom:         1rem !default;
 $alert-border-radius:         $border-radius !default;
 $alert-link-font-weight:      $font-weight-bold !default;
@@ -836,8 +836,8 @@ $list-group-border-color:        rgba($black,.125) !default;
 $list-group-border-width:        $border-width !default;
 $list-group-border-radius:       $border-radius !default;
 
-$list-group-item-padding-x:      1.25rem !default;
 $list-group-item-padding-y:      .75rem !default;
+$list-group-item-padding-x:      1.25rem !default;
 
 $list-group-hover-bg:            $gray-lightest !default;
 $list-group-active-color:        $component-active-color !default;
@@ -915,8 +915,8 @@ $close-text-shadow:           0 1px 0 $white !default;
 // Code
 
 $code-font-size:              90% !default;
-$code-padding-x:              .4rem !default;
 $code-padding-y:              .2rem !default;
+$code-padding-x:              .4rem !default;
 $code-color:                  #bd4147 !default;
 $code-bg:                     $gray-lightest !default;