Scss refactoring

app/assets/stylesheets/base/_avatars-images.scss

@@ -0,0 +1,89 @@
+.listing_image {
+  max-width: 150px;
+  max-height: 65px;
+}
+
+.tiny-avatar {
+  max-width: 32px;
+  min-width: 16px;
+  border-radius: 2px;
+  margin-left: 5px;
+}
+
+.small-avatar {
+  max-width: 64px;
+  min-width: 32px;
+  border-radius: 4px;
+  margin-left: 10px;
+}
+
+.medium-avatar {
+  max-width: 50%;
+  min-width: 100px;
+  margin: 0 10px 10px 0;
+}
+
+.small-trainer-logo {
+  max-width: 80px;
+  border-radius: 4px;
+  margin-left: 10px;
+}
+
+.medium-trainer-logo {
+  max-width: 160px;
+  border-radius: 4px;
+  margin-left: 0;
+}
+
+.large-trainer-logo {
+  max-width: 240px;
+  border-radius: 4px;
+  margin-left: 0;
+}
+
+.rounded-avatar {
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+#user-menu .rounded-avatar {
+  height: $line-height-computed;
+  @media (min-width: $grid-float-breakpoint) {
+    display: block;
+    float: left;
+  }
+  margin-right: 5px;
+}
+
+.preview-image {
+  overflow: auto;
+
+  > img {
+    width: 100px;
+    max-height: 150px;
+    margin: 0 10px 10px 0;
+    float: left;
+  }
+}
+
+.loading_image {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.funding-logo {
+  width: 100px;
+  margin: 15px;
+}
+
+.masonry-brick .space-logo {
+  padding: .5em;
+  border-radius: 4px;
+}
+
+.user-list-avatar {
+  border-radius: 8px 0 0 8px;
+  float: left;
+  margin-right: 8px;
+}

app/assets/stylesheets/base/_base.scss

@@ -0,0 +1,60 @@
+// Sticky but not fixed footer
+// http://cbracco.me/css-sticky-footer-effect/
+html {
+  height: 100%;
+  position: relative;
+}
+
+body {
+  min-width: 320px;
+  position: relative;
+  margin: 0;
+  padding-bottom: 500px;
+  min-height: 100%;
+}
+
+h1 {
+  font-weight: 900;
+}
+
+h2, h3, h4, h5, h6 {
+  font-weight: 700;
+}
+
+.sub-heading {
+  font-weight: lighter;
+  font-size: $font-size-large;
+  line-height: 24px;
+  text-transform: uppercase;
+
+  p {
+    margin: 0;
+  }
+}
+
+section {
+  padding: 30px 0;
+}
+
+.module-heading {
+  margin: 50px 0;
+}
+
+#main-container,
+#header-container,
+#flash-container {
+  max-width: 1400px;
+}
+
+// Override margin for boostrap-s page-header
+.page-header {
+  margin: 20px 0 20px;
+  border: none;
+  padding: 0;
+}
+
+sup {
+  vertical-align: top;
+  position: relative;
+  top: 5px;
+}

app/assets/stylesheets/base/_buttons-forms.scss

@@ -0,0 +1,135 @@
+a.btn-icon {
+  transition: 0s;
+  &:hover {
+    filter: brightness(95%);
+  }
+  &:active {
+    filter: brightness(95%);
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+}
+
+/* try adding !important  after 0px if doesn't work */
+
+// Multiple input list on forms with + button to add more input fields dynamically
+.multiple-input-list {
+  //
+  //.multiple-input-add {
+  //  height: $input-height-base;
+  //}
+
+  .multiple-list-item {
+    margin-bottom: 15px;
+    display: inline-block;
+    width: calc(100% - 72px);
+
+    @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+      width: calc(50% - 36px);
+    }
+
+    @media (min-width: $screen-lg-min) {
+      width: calc(33% - 24px);
+    }
+
+    .multiple-input {
+      display: inline;
+      width: calc(100% - 60px);
+    }
+
+    .multiple-input-delete {
+      display: inline;
+    }
+  }
+}
+
+.dropdown-toggle {
+  cursor: pointer;
+  //padding: $padding-base-horizontal $padding-base-vertical;
+}
+
+.dropdown-option {
+  cursor: pointer;
+
+  &:hover {
+    background: $dropdown-link-hover-bg;
+  }
+}
+
+.dropdown-menu {
+  padding: $padding-base-vertical $padding-base-horizontal;
+}
+
+.dropdown-option-delete {
+  background: none;
+  border: none;
+}
+
+// To make bootstrap button wrap button text into multiple lines
+.btn {
+  white-space: normal !important;
+}
+
+input.loading {
+  background: image-url('ajax-loader.gif') no-repeat right center;
+}
+
+.btn.loading {
+  padding-right: 24px;
+  background: image-url('ajax-loader.gif') no-repeat right center;
+}
+
+input[type=checkbox].field-lock {
+  display: none;
+}
+
+input[type=checkbox].field-lock + label:before {
+  font-family: FontAwesome;
+  cursor: pointer;
+  display: inline-block;
+  content: "\f09c";
+  letter-spacing: 10px;
+  margin-left: 0.5em;
+  vertical-align: middle;
+  width: 1.5em;
+}
+
+input[type=checkbox].field-lock:checked + label:before {
+  content: "\f023";
+}
+
+input[type=checkbox].field-lock:checked + label:before,
+.field-lock-example-locked {
+  color: $brand-success;
+  font-size: 110%;
+}
+
+input[type=checkbox].field-lock + label:before,
+.field-lock-example-open {
+  color: $brand-warning;
+  font-size: 110%;
+}
+
+.keyword-button {
+  margin-right: 5px;
+}
+
+.external-button {
+  margin-right: 5px;
+}
+
+.omniauth-elixir_aai {
+  width: 240px;
+}
+
+.omniauth-oidc {
+  height: 42px;
+}
+
+.btn-oidc-only {
+  font-size: 36px;
+  padding: 4px;
+  margin: 12px 10px;
+  display: flex;
+  justify-content: center;
+}