fix styles

OnePlace-media · Apr 13, 2018 · ed8cf28 · ed8cf28
1 parent 7906fa2
commit ed8cf28
Showing 1 changed file with 59 additions and 49 deletions.
diff --git a/client/static/css/styles.css b/client/static/css/styles.css
@@ -482,6 +482,10 @@ hr {
   border-top: 1px solid #f2f2f2;
 }
 
+.header__usermenu-item--hr:first-child {
+  border-top: none;
+}
+
 .header__usermenu-item--submenu {
   position: relative;
 }
@@ -981,7 +985,7 @@ hr {
 .login-form__alert {
   display: none;
   position: absolute;
-  bottom: -20px;
+  top: 42px;
   left: 16px;
   font-size: 12px;
   color: #db4c2a;
@@ -1143,6 +1147,7 @@ hr {
 .login-form__text--alert {
   font-size: 14px;
   border-left: 2px solid #db4c2a;
+  padding-left: 14px;
 }
 
 .login-form__text--security {
@@ -2678,6 +2683,7 @@ hr {
 
 .post-view__votes {
   position: relative;
+  display: inline-block;
 }
 
 .post-view__votes:hover .post-view__voters {
@@ -2687,15 +2693,19 @@ hr {
 .post-view__voters {
   display: none;
   font-size: 13px;
-  min-width: 200px;
-  padding: 8px 16px;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  padding: 8px 12px;
   top: 32px;
-  left: -80px;
+  left: 50%;
+  -webkit-transform: translatex(-50%);
+  transform: translatex(-50%);
   color: #383838;
 }
 
 .post-view__voters:before,.post-view__voters:after {
-  left: 80px;
+  left: calc(50% - 8px);
 }
 
 .post-view__voter-list {
@@ -2712,14 +2722,19 @@ hr {
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
+  -webkit-box-align: baseline;
+  -webkit-align-items: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
 }
 
 .post-view__voter-name {
-  padding-right: 16px;
+  padding: 0;
 }
 
 .post-view__voter-amount {
   color: #818888;
+  margin-left: 16px;
 }
 
 .post-view__voters-all {
@@ -4874,11 +4889,11 @@ hr {
   content: "\e908";
 }
 
-.fa-facebook:before {
+.fa-facebook:before,.share-icon--facebook:before {
   content: "\e909";
 }
 
-.fa-google:before {
+.fa-google:before,.share-icon--google-plus:before {
   content: "\e90a";
 }
 
@@ -4926,11 +4941,11 @@ hr {
   content: "\e916";
 }
 
-.fa-twitter:before {
+.fa-twitter:before,.share-icon--twitter:before {
   content: "\e917";
 }
 
-.fa-vk:before {
+.fa-vk:before,.share-icon--vk:before {
   content: "\e918";
 }
 
@@ -5276,67 +5291,61 @@ hr {
 .share-icon {
   position: relative;
   display: block;
+  background: #fff;
   width: 40px;
   height: 40px;
-  background: url("/static/img/share-buttons.svg") 0 0 no-repeat transparent;
-  background-size: 160px 40px;
+  border-radius: 50%;
+  padding: 11px 0;
+  text-align: center;
+  color: #818888;
+  font-size: 18px;
+  font-family: 'fa-icons' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transition: all 0.3s ease;
 }
 
-.share-icon:before,.share-icon:after {
+.share-icon:after {
   position: absolute;
   display: block;
   content: '';
   transition: all 0.3s ease;
   border-radius: 50%;
-}
-
-.share-icon:before {
-  top: 1px;
-  left: 1px;
-  right: 1px;
-  bottom: 1px;
-  background: #a8adad;
-  z-index: -1;
-}
-
-.share-icon:after {
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  border: 1px solid transparent;
+  border: 1px solid #f2f2f2;
 }
 
 .share-icon:hover {
   cursor: pointer;
 }
 
-.share-icon:hover:before {
-  background: #383838;
-}
-
 .share-icon:hover:after {
-  top: -4px;
-  left: -4px;
-  right: -4px;
-  bottom: -4px;
-  border-color: #a8adad;
+  border-color: #cfd2d2;
 }
 
-.share-icon--facebook {
-  background-position: 0 0;
+.share-icon--facebook:hover {
+  color: #3b5998;
 }
 
-.share-icon--google-plus {
-  background-position: 66.67% 0;
+.share-icon--google-plus:hover {
+  color: #dd4b39;
 }
 
-.share-icon--twitter {
-  background-position: 33.33% 0;
+.share-icon--twitter:hover {
+  color: #55acee;
 }
 
-.share-icon--vk {
-  background-position: 100% 0;
+.share-icon--vk:hover {
+  color: #45668e;
 }
 
 @font-face {
@@ -5408,15 +5417,16 @@ hr {
 
 @media screen and (max-width: 1060px) {
   .share-icons__wrapper {
-    width: 32px;
-    bottom: calc(50vh - 82px);
-    left: 16px;
+    width: 36px;
+    bottom: calc(50vh - 90px);
+    left: 12px;
   }
 
   .share-icon {
-    width: 32px;
-    height: 32px;
-    background-size: 128px 32px;
+    width: 36px;
+    height: 36px;
+    font-size: 16px;
+    padding: 10px 0;
   }
 }