Просмотр исходного кода

change page preview button style

yusuketk 5 лет назад
Родитель
Сommit
0e5990aad4

+ 1 - 1
src/client/js/components/PageEditor/LinkEditModal.jsx

@@ -290,7 +290,7 @@ class LinkEditModal extends React.PureComponent {
                       keywordOnInit={this.state.linkInputValue}
                     />
                     <div className="input-group-append" onClick="">
-                      <button type="button" className="btn btn-success"><PagePreviewIcon /></button>
+                      <button type="button" className="btn btn-info btn-page-preview"><PagePreviewIcon /></button>
                     </div>
                   </div>
                 </div>

+ 11 - 0
src/client/styles/scss/atoms/_buttons.scss

@@ -1,9 +1,11 @@
 .btn.btn-like {
   @include button-outline-variant($secondary, lighten($info, 15%), rgba(lighten($info, 10%), 0.5), rgba(lighten($info, 10%), 0.5));
+
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active {
     color: lighten($info, 15%);
   }
+
   &:not(:disabled):not(.disabled):not(:hover) {
     background-color: transparent;
   }
@@ -11,10 +13,12 @@
 
 .btn.btn-bookmark {
   @include button-outline-variant($secondary, $warning, rgba(lighten($warning, 20%), 0.5), rgba(lighten($warning, 20%), 0.5));
+
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active {
     color: $warning;
   }
+
   &:not(:disabled):not(.disabled):not(:hover) {
     background-color: transparent;
   }
@@ -85,3 +89,10 @@
     }
   }
 }
+
+// page preview button in link form
+.btn-page-preview svg {
+  width: 18px;
+  height: 18px;
+  fill: white;
+}