X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/e211f313704d3a0a00d8d358bd49eb310f9531c5..refs/pull/806/head:/resources/assets/sass/_blocks.scss

diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss
index 7eb595d36..f876ff281 100644
--- a/resources/assets/sass/_blocks.scss
+++ b/resources/assets/sass/_blocks.scss
@@ -134,15 +134,22 @@
 .callout {
   border-left: 3px solid #BBB;
   background-color: #EEE;
-  padding: $-s;
+  padding: $-s $-s $-s $-xl;
   display: block;
-  > * {
-    display: inline-block;
-  }
+  position: relative;
   &:before {
-    font-family: 'Material-Design-Iconic-Font';
-    padding-right: $-s;
+    background-image: url("/http/source.bookstackapp.com/icon/info-filled.svg?color=015380");
+    background-repeat: no-repeat;
+    content: '';
+    width: 1.2em;
+    height: 1.2em;
+    left: $-xs + 1px;
+    top: 50%;
+    margin-top: -9px;
     display: inline-block;
+    position: absolute;
+    line-height: 1;
+    opacity: 0.8;
   }
   &.success {
     border-left-color: $positive;
@@ -150,7 +157,7 @@
     color: darken($positive, 16%);
   }
   &.success:before {
-    content: '\f269';
+    background-image: url("/http/source.bookstackapp.com/icon/check-circle.svg?color=376c39");
   }
   &.danger {
     border-left-color: $negative;
@@ -158,22 +165,100 @@
     color: darken($negative, 20%);
   }
   &.danger:before {
-    content: '\f1f2';
+    background-image: url("/http/source.bookstackapp.com/icon/danger.svg?color=b91818");
   }
   &.info {
     border-left-color: $info;
     background-color: lighten($info, 50%);
     color: darken($info, 16%);
   }
-  &.info:before {
-    content: '\f1f8';
-  }
   &.warning {
     border-left-color: $warning;
     background-color: lighten($warning, 36%);
     color: darken($warning, 16%);
   }
   &.warning:before {
-    content: '\f1f1';
+    background-image: url("/http/source.bookstackapp.com/icon/warning.svg?color=b6531c");
+  }
+}
+
+.card {
+  margin: $-m;
+  background-color: #FFF;
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
+  h3 {
+    padding: $-m;
+    border-bottom: 1px solid #E8E8E8;
+    margin: 0;
+    font-size: $fs-s;
+    color: #888;
+    fill: #888;
+    font-weight: 400;
+    text-transform: uppercase;
   }
-}
\ No newline at end of file
+  h3 a {
+    line-height: 1;
+  }
+  .body, p.empty-text {
+    padding: $-m;
+  }
+  a, p {
+    word-wrap: break-word;
+    word-break: break-word;
+  }
+}
+
+.card.drag-card {
+  border: 1px solid #DDD;
+  border-radius: 4px;
+  display: flex;
+  padding: 0;
+  padding-left: $-s + 28px;
+  margin: $-s 0;
+  position: relative;
+  .drag-card-action {
+    cursor: pointer;
+  }
+  .handle, .drag-card-action {
+    display: flex;
+    padding: 0;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    width: 28px;
+    flex-grow: 0;
+    padding-left: $-xs;
+    padding-right: $-xs;
+    &:hover {
+      background-color: #EEE;
+    }
+    .svg-icon {
+      margin-right: 0px;
+    }
+  }
+  > div .outline input {
+    margin: $-s 0;
+    width: 100%;
+  }
+  > div.padded {
+    padding: $-s 0 !important;
+  }
+  .handle {
+    background-color: #EEE;
+    left: 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+  }
+  > div {
+    padding: 0 $-s;
+    max-width: 80%;
+    flex: 1;
+  }
+}
+
+.well {
+  background-color: #F8F8F8;
+  padding: $-m;
+  border: 1px solid #DDD;
+}