Socialite card styling

benmag · Aug 1, 2018 · 9014803 · 9014803
1 parent fe6c3d8
commit 9014803
Show file tree

Hide file tree

Showing 6 changed files with 57,986 additions and 3 deletions.
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/img/bigcommerce.png b/public/img/bigcommerce.png
diff --git a/public/img/shopify.png b/public/img/shopify.png
diff --git a/public/img/woocommerce.png b/public/img/woocommerce.png
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
@@ -12,3 +12,59 @@
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
 }
+
+.socialite-card {
+  background-color: #f4f4f4;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+  border: 1px solid #d5d5d5;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  height: 100px;
+  text-indent: -9999px;
+  width: 140px;
+
+  &:hover,&.selected {
+    border: 1px solid #83bd31;
+    background-color: #fff;
+    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+  }
+
+  &.selected {
+    position: relative;
+    background-position: top 20px center;
+
+    &:after {
+      font-family: FontAwesome;
+      content: "\f058";
+      position: absolute;
+      color: #83bd31;
+      bottom: 10px;
+      width: 20px;
+      text-align: center;
+      left: -10px;
+      margin-left: 50%;
+      font-size: 1.5em;
+      text-indent: 0;
+    }
+  }
+
+
+
+  &.shopify {
+    background-image: url(/img/shopify.png);
+  }
+
+  &.woocommerce {
+    background-image: url(/img/woocommerce.png);
+  }
+
+  &.bigcommerce {
+    background-image: url(/img/bigcommerce.png);
+  }
+
+}