first commit

scss/utilities/_animation.scss

@@ -0,0 +1,37 @@
+// Animation Utilities
+
+// Grow In Animation
+
+@keyframes growIn {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.animated--grow-in {
+  animation-name: growIn;
+  animation-duration: 200ms;
+  animation-timing-function: transform cubic-bezier(.18,1.25,.4,1), opacity cubic-bezier(0,1,.4,1);
+}
+
+// Fade In Animation
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.animated--fade-in {
+  animation-name: fadeIn;
+  animation-duration: 200ms;
+  animation-timing-function: opacity cubic-bezier(0,1,.4,1);
+}

scss/utilities/_background.scss

@@ -0,0 +1,69 @@
+// Background Gradient Utilities
+
+.bg-gradient-primary {
+  background-color: $primary;
+  background-image: linear-gradient(180deg, $primary 10%, darken($primary, 15%) 100%);
+  background-size: cover;
+}
+
+.bg-gradient-success {
+  background-color: $success;
+  background-image: linear-gradient(180deg, $success 10%, darken($success, 15%) 100%);
+  background-size: cover;
+}
+
+.bg-gradient-info {
+  background-color: $info;
+  background-image: linear-gradient(180deg, $info 10%, darken($info, 15%) 100%);
+  background-size: cover;
+}
+
+.bg-gradient-warning {
+  background-color: $warning;
+  background-image: linear-gradient(180deg, $warning 10%, darken($warning, 15%) 100%);
+  background-size: cover;
+}
+
+.bg-gradient-danger {
+  background-color: $danger;
+  background-image: linear-gradient(180deg, $danger 10%, darken($danger, 15%) 100%);
+  background-size: cover;
+}
+
+// Grayscale Background Utilities
+
+.bg-gray-100 {
+  background-color: $gray-100 !important;
+}
+
+.bg-gray-200 {
+  background-color: $gray-200 !important;
+}
+
+.bg-gray-300 {
+  background-color: $gray-300 !important;
+}
+
+.bg-gray-400 {
+  background-color: $gray-400 !important;
+}
+
+.bg-gray-500 {
+  background-color: $gray-500 !important;
+}
+
+.bg-gray-600 {
+  background-color: $gray-600 !important;
+}
+
+.bg-gray-700 {
+  background-color: $gray-700 !important;
+}
+
+.bg-gray-800 {
+  background-color: $gray-800 !important;
+}
+
+.bg-gray-900 {
+  background-color: $gray-900 !important;
+}

scss/utilities/_border.scss

@@ -0,0 +1,39 @@
+.border-left-primary {
+  border-left: .25rem solid $primary !important;
+}
+
+.border-left-success {
+  border-left: .25rem solid $success !important;
+}
+
+.border-left-info {
+  border-left: .25rem solid $info !important;
+}
+
+.border-left-warning {
+  border-left: .25rem solid $warning !important;
+}
+
+.border-left-danger {
+  border-left: .25rem solid $danger !important;
+}
+
+.border-bottom-primary {
+  border-bottom: .25rem solid $primary !important;
+}
+
+.border-bottom-success {
+  border-bottom: .25rem solid $success !important;
+}
+
+.border-bottom-info {
+  border-bottom: .25rem solid $info !important;
+}
+
+.border-bottom-warning {
+  border-bottom: .25rem solid $warning !important;
+}
+
+.border-bottom-danger {
+  border-bottom: .25rem solid $danger !important;
+}

scss/utilities/_display.scss

@@ -0,0 +1,4 @@
+// Overflow Hidden
+.o-hidden {
+  overflow: hidden !important;
+}

scss/utilities/_progress.scss

@@ -0,0 +1,3 @@
+.progress-sm {
+  height: .5rem;
+}

scss/utilities/_rotate.scss

@@ -0,0 +1,7 @@
+.rotate-15 {
+  transform: rotate(15deg);
+}
+
+.rotate-n-15 {
+  transform: rotate(-15deg);
+}

scss/utilities/_text.scss

@@ -0,0 +1,54 @@
+// Grayscale Text Utilities
+
+.text-xs {
+  font-size: .7rem;
+}
+
+.text-lg {
+  font-size: 1.2rem;
+}
+
+.text-gray-100 {
+  color: $gray-100 !important;
+}
+
+.text-gray-200 {
+  color: $gray-200 !important;
+}
+
+.text-gray-300 {
+  color: $gray-300 !important;
+}
+
+.text-gray-400 {
+  color: $gray-400 !important;
+}
+
+.text-gray-500 {
+  color: $gray-500 !important;
+}
+
+.text-gray-600 {
+  color: $gray-600 !important;
+}
+
+.text-gray-700 {
+  color: $gray-700 !important;
+}
+
+.text-gray-800 {
+  color: $gray-800 !important;
+}
+
+.text-gray-900 {
+  color: $gray-900 !important;
+}
+
+.icon-circle {
+  height: 2.5rem;
+  width: 2.5rem;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}