Updated floats to bootstrap utilities

apps/explorer_web/assets/css/_utilities.scss

@@ -1,625 +0,0 @@
-$shove-size: 100px;
-$push-size: 50px;
-$push-size-lg: 75px;
-$push-size-md: 35px;
-$u-push-this: 25px;
-$push-size-sm: 15px;
-$nudge-more-size: 10px;
-$nudge-size: 5px;
-
-
-$padding-lg: 50px;
-$padding-md: 30px;
-$padding-sm: 15px;
-$padding-xs-plus: 10px;
-$padding-xs: 5px;
-
-
-
-// Width ---------------------------------------------------
-
-.u-width {
-  &--half {
-    width: 50%;
-  }
-}
-
-// Margin --------------------------------------------------
-
-.u-shove {
-  margin: $shove-size;
-  @media screen and (max-width: 768px) {margin: $shove-size * 0.5;}
-
-  &-vertical {
-    margin-top: $shove-size;
-    margin-bottom: $shove-size;
-    @media screen and (max-width: 768px) {margin-top: $shove-size * 0.5; margin-bottom: $shove-size * 0.5;}
-  }
-
-  &-top {
-    margin-top: $shove-size !important;
-    @media screen and (max-width: 768px) {margin-top: $shove-size * 0.5;}
-  }
-
-  &-bottom {
-    margin-bottom: $shove-size;
-    @media screen and (max-width: 768px) {margin-bottom: $shove-size * 0.5;}
-  }
-
-  &-left {
-    margin-left: $shove-size;
-    @media screen and (max-width: 768px) {margin-left: $shove-size * 0.5;}
-  }
-
-  &-right {
-    margin-right: $shove-size;
-    @media screen and (max-width: 768px) {margin-right: $shove-size * 0.5;}
-  }
-}
-
-
-.u-push {
-  margin: $push-size;
-  @media screen and (max-width: 768px) {margin: $push-size * 0.5;}
-
-  &-vertical {
-    margin-top: $push-size;
-    margin-bottom: $push-size;
-    @media screen and (max-width: 768px) {margin-top: $push-size * 0.5; margin-bottom: $push-size * 0.5;}
-  }
-  &-top {
-    margin-top: $push-size !important;
-    @media screen and (max-width: 768px) {margin-top: $push-size * 0.5;}
-  }
-
-  &-bottom {
-    margin-bottom: $push-size;
-    @media screen and (max-width: 768px) {margin-bottom: $push-size * 0.5;}
-  }
-
-  &-left {
-    margin-left: $push-size !important;
-    @media screen and (max-width: 768px) {margin-left: $push-size * 0.5;}
-  }
-
-  &-right {
-    margin-right: $push-size;
-    @media screen and (max-width: 768px) {margin-right: $push-size * 0.5;}
-  }
-}
-
-.u-push-md {
-  margin: $push-size-md;
-
-  &-vertical {
-    margin-top: $push-size-md;
-    margin-bottom: $push-size-md;
-  }
-  &-top {
-    margin-top: $push-size-md;
-  }
-
-  &-bottom {
-    margin-bottom: $push-size-md;
-  }
-
-  &-left {
-    margin-left: $push-size-md;
-  }
-
-  &-right {
-    margin-right: $push-size-md;
-  }
-
-}
-
-.u-push-lg {
-  margin: $push-size-lg;
-
-  &-vertical {
-    margin-top: $push-size-lg;
-    margin-bottom: $push-size-lg;
-  }
-  &-top {
-    margin-top: $push-size-lg;
-  }
-
-  &-bottom {
-    margin-bottom: $push-size-lg;
-    @media screen and (max-width: 768px) {margin-bottom: $push-size-lg * 0.5;}
-  }
-
-  &-left {
-    margin-left: $push-size-lg;
-  }
-
-  &-right {
-    margin-right: $push-size-lg;
-  }
-
-}
-
-.u-push-sm {
-  margin: $push-size-sm;
-
-  &-vertical {
-    margin-top: $push-size-sm;
-    margin-bottom: $push-size-sm;
-  }
-  &-top {
-    margin-top: $push-size-sm !important;
-  }
-
-  &-bottom {
-    margin-bottom: $push-size-sm !important;
-  }
-
-  &-left {
-    margin-left: $push-size-sm;
-  }
-
-  &-right {
-    margin-right: $push-size-sm;
-  }
-
-}
-
-.u-nudge {
-  margin: $nudge-size;
-
-  &-vertical {
-    margin-top: $nudge-size;
-    margin-bottom: $nudge-size;
-  }
-  &-top {
-    margin-top: $nudge-size;
-  }
-
-  &-bottom {
-    margin-bottom: $nudge-size;
-  }
-
-  &-left {
-    margin-left: $nudge-size;
-  }
-
-  &-right {
-    margin-right: $nudge-size;
-  }
-}
-
-.u-nudge-more {
-  margin: $nudge-more-size;
-
-  &-vertical {
-    margin-top: $nudge-more-size;
-    margin-bottom: $nudge-more-size;
-  }
-  &-top {
-    margin-top: $nudge-more-size;
-  }
-
-  &-bottom {
-    margin-bottom: $nudge-more-size;
-  }
-
-  &-left {
-    margin-left: $nudge-more-size;
-  }
-
-  &-right {
-    margin-right: $nudge-more-size;
-  }
-}
-
-.u-push-this {
-  margin: $u-push-this;
-
-  &-vertical {
-    margin-top: $u-push-this;
-    margin-bottom: $u-push-this;
-  }
-  &-top {
-    margin-top: $u-push-this;
-  }
-
-  &-bottom {
-    margin-bottom: $u-push-this;
-  }
-
-  &-left {
-    margin-left: $u-push-this;
-  }
-
-  &-right {
-    margin-right: $u-push-this;
-  }
-}
-
-
-.u-flush {
-  margin: 0 !important;
-
-  &-sm {
-      margin: 4px 0 4px 0;
-  }
-
-  &-btm {
-    margin-bottom: 0 !important;
-  }
-
-  &-top {
-    margin-top: 0 !important;
-  }
-}
-
-// Padding --------------------------------------------------
-
-.u-padding {
-
-  &-none {
-    padding: 0px !important;
-  }
-
-  &-no-left {
-    padding-left: 0px !important;
-  }
-
-  &-no-right {
-    padding-right: 0px !important;
-  }
-
-  &-no-bottom {
-    padding-bottom: 0px !important;
-  }
-
-  &-xsmall {
-    padding: $padding-xs;
-
-    &-vertical {
-      padding-top: $padding-xs;
-      padding-bottom: $padding-xs;
-    }
-
-    &-top {
-      padding-top: $padding-xs;
-    }
-
-    &-bottom {
-      padding-bottom: $padding-xs;
-    }
-
-    &-left {
-      padding-left: $padding-xs;
-    }
-
-    &-right {
-      padding-right: $padding-xs;
-    }
-  }
-
-  &-xs-plus {
-    padding: $padding-xs-plus;
-
-    &-vertical {
-      padding-top: $padding-xs-plus;
-      padding-bottom: $padding-xs-plus;
-    }
-
-    &-top {
-      padding-top: $padding-xs-plus;
-    }
-
-    &-bottom {
-      padding-bottom: $padding-xs-plus;
-    }
-
-    &-left {
-      padding-left: $padding-xs-plus;
-    }
-
-    &-right {
-      padding-right: $padding-xs-plus;
-    }
-  }
-
-  &-sm {
-    padding: $padding-sm;
-
-    &-vertical {
-      padding-top: $padding-sm;
-      padding-bottom: $padding-sm;
-    }
-
-    &-top {
-      padding-top: $padding-sm;
-    }
-
-    &-bottom {
-      padding-bottom: $padding-sm;
-    }
-
-    &-left {
-      padding-left: $padding-sm !important;
-    }
-
-    &-right {
-      padding-right: $padding-sm;
-    }
-  }
-
-  &-md {
-    padding: $padding-md;
-
-    &-vertical {
-      padding-top: $padding-md;
-      padding-bottom: $padding-md;
-    }
-
-    &-top {
-      padding-top: $padding-md;
-    }
-
-    &-bottom {
-      padding-bottom: $padding-md;
-    }
-
-    &-left {
-      padding-left: $padding-md;
-    }
-
-    &-right {
-      padding-right: $padding-md;
-    }
-  }
-
-  &-lg {
-    padding: $padding-lg;
-
-    &-vertical {
-      padding-top: $padding-lg;
-      padding-bottom: $padding-lg;
-    }
-
-    &-top {
-      padding-top: $padding-lg;
-    }
-
-    &-bottom {
-      padding-bottom: $padding-lg;
-    }
-
-    &-left {
-      padding-left: $padding-lg;
-    }
-
-    &-right {
-      padding-right: $padding-lg;
-    }
-  }
-}
-
-
-
-// Element Alignment --------------------------------------------
-
-.u-clear {
-  clear: both;
-}
-
-%u-align {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-}
-
-.u-align {
-  @extend %u-align;
-
-  &--top {
-    align-self: flex-start;
-  }
-
-  &--center {
-    align-self: center;
-  }
-
-  &--bottom {
-    align-self: flex-end;
-  }
-
-  &--stretch {
-    align-self: stretch;
-  }
-
-  &--flex{
-    display: flex;
-  }
-
-  &__vertical {
-    display: flex;
-    flex-flow: column nowrap;
-  }
-
-  &__order-1 {
-    order: 1;
-  }
-
-  &__order-2 {
-    order: 2;
-  }
-
-  &__order-3 {
-    order: 3;
-  }
-
-  &__flex-grow {
-    flex-grow: 1;
-  }
-}
-
-// Border --------------------------------------------------
-
-.u-border {
-  border: 1px solid $primary;
-
-  &-left {
-    border-left: 1px solid lighten($gray-300, 42%);
-  }
-
-  &-right {
-    border-right: 1px solid lighten($gray-300, 42%);
-  }
-
-  &-top {
-    border-top: 1px solid lighten($primary, 40%);
-  }
-
-  &-bottom {
-    border-bottom: 1px solid lighten($primary, 40%);
-
-    &-bold {
-      border-bottom: 2px solid lighten($gray-300, 32%);
-    }
-  }
-
-  &-no-right {
-    border-right: none;
-  }
-
-  &-no-left {
-    border-left: none;
-  }
-
-  &-no-top {
-    border-top: none;
-  }
-
-  &-no-bottom {
-    border-bottom: none !important;
-  }
-
-  &-none {
-    border: none !important;
-  }
-}
-
-// Typography --------------------------------------------------
-
-.u-text {
-  &-center {
-    text-align: center;
-  }
-
-  &-right {
-    text-align: right;
-  }
-
-  &-left {
-    text-align: left;
-
-  }
-}
-
-.u-hide {
-  display: none;
-}
-
-.u-italic {
-  font-style: italic;
-}
-
-.u-underline {
-  text-decoration: underline;
-}
-
-.u-list-style {
-  &--none {
-    list-style-type: none;
-    padding-left: 0;
-
-    &> li {
-      margin-bottom: 1em;
-    }
-  }
-}
-
-.u-white-space-normal {
-  white-space: normal;
-}
-
-// Display -----------------------------------------------
-
-.u-inline {
-  display: inline-block;
-}
-
-.u-block {
-  display: block;
-}
-
-.u-truncate {
-  height: 9em; /*line-height multiplied by the number of lines to show (6)*/
-  line-height: 1.5em;
-  overflow: hidden;
-  position: relative;
-
-  &:after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    height: 50%;
-    width: 100%;
-    background: linear-gradient(to bottom, rgba($white, 0), rgba($white, 1) 100%);
-  }
-
-}
-
-// Float -----------------------------------------------
-
-.u-float-left {
-  float: left !important;
-}
-
-.u-float-right {
-  float: right !important;
-}
-
-.u-float-none {
-  float: none;
-}
-
-.u-margin-auto {
-  margin: 0px auto;
-}
-
-
-// Bootstrap Column Extension --------------------------
-// Where Lauren adds some nonsense to slap some utilities
-// together to add bottom margins for mobile columns.
-
-.col-xs-1,
-.col-xs-2,
-.col-xs-3,
-.col-xs-4,
-.col-xs-5,
-.col-xs-6,
-.col-xs-7,
-.col-xs-8,
-.col-xs-9,
-.col-xs-10,
-.col-xs-11,
-.col-xs-12 {
-  @media (max-width: 768px) {
-    &--mb1 {
-      margin-bottom: 5px;
-    }
-    &--mb2 {
-      margin-bottom: 15px;
-    }
-    &--mb3 {
-      margin-bottom: 30px;
-    }
-  }
-}

apps/explorer_web/assets/css/components/_panels.scss

@@ -1,5 +1,4 @@
 .panels {
-  @extend %paper;
 
   &__container {
     padding: 20px;

apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex

@@ -37,8 +37,9 @@
         </ul>
       </div>
       <div class="card-body">
+
         <%= if Enum.count(@internal_transactions) > 0 do %>
-          <div class="dropdown u-float-right u-push-sm">
+          <div class="dropdown float-right u-push-sm">
             <button data-test="filter_dropdown" class="button button--secondary button--xsmall dropdown-toggle" type="button"
               id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               Filter: <%= format_current_filter(@filter) %>

apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex

@@ -38,7 +38,7 @@
       </div>
       <div class="card-body">
         <%= if Enum.count(@transactions) > 0 do %>
-          <div class="dropdown u-float-right u-push-sm">
+          <div class="dropdown float-right u-push-sm">
             <button data-test="filter_dropdown" class="button button--secondary button--xsmall dropdown-toggle" type="button"
                     id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               Filter: <%= format_current_filter(@filter) %>

apps/explorer_web/lib/explorer_web/templates/chain/_blocks.html.eex

@@ -1,6 +1,6 @@
 <div class="card">
   <div class="card-body">
-    <%= link(gettext("View All"), to: block_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall u-float-right") %>
+    <%= link(gettext("View All"), to: block_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall float-right") %>
     <h2 class="card-title"><%= gettext "Blocks" %></h2>
     <table class="table table-font table-responsive-lg">
       <thead>

apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex

@@ -1,6 +1,6 @@
 <div class="card">
   <div class="card-body">
-    <%= link(gettext("View All"), to: transaction_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall u-float-right") %>
+    <%= link(gettext("View All"), to: transaction_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall float-right") %>
     <h2 class="card-title"><%= gettext "Transactions" %></h2>
     <table class="table table-font table-responsive-lg">
       <thead>

apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex

@@ -67,7 +67,7 @@
   <%= if @next_page_params do %>
     <%= link(
       gettext("Older"),
-      class: "button button--secondary button--sm u-float-right mt-3",
+      class: "button button--secondary button--sm float-right mt-3",
       to: pending_transaction_path(
         @conn,
         :index,

apps/explorer_web/lib/explorer_web/templates/transaction/index.html.eex

@@ -88,7 +88,7 @@
   <%= if @next_page_params do %>
     <%= link(
       gettext("Older"),
-      class: "button button--secondary button--sm u-float-right mt-3",
+      class: "button button--secondary button--sm float-right mt-3",
       to: transaction_path(
         @conn,
         :index,