bookstack/resources/assets/sass/_blocks.scss

/*
* This file container all block styling including background shading,
* margins, paddings & borders.
*/


/*
* Background Shading
*/
.shaded {
  background-color: #f1f1f1;
  &.pos {
    background-color: lighten($positive, 40%);
  }
  &.neg {
    background-color: lighten($negative, 20%);
  }
  &.primary {
    background-color: lighten($primary, 40%);
  }
  &.secondary {
    background-color: lighten($secondary, 30%);
  }
}

/*
* Bordering
*/
.bordered {
  border: 1px solid #BBB;
  &.pos {
    border-color: $positive;
  }
  &.neg {
    border-color: $negative;
  }
  &.primary {
    border-color: $primary;
  }
  &.secondary {
    border-color: $secondary;
  }
  &.thick {
    border-width: 2px;
  }
}
.rounded {
  border-radius: 3px;
}

/*
* Padding
*/
.nopadding {
  padding: 0;
}
.padded {
  padding: $-l;
  &.large {
    padding: $-xl;
  }
  >h1, >h2, >h3, >h4 {
    &:first-child {
      margin-top: 0.1em;
    }
  }
}
.padded-vertical, .padded-top {
  padding-top: $-m;
  &.large {
    padding-top: $-xl;
  }
}

.padded-vertical, .padded-bottom {
  padding-bottom: $-m;
  &.large {
    padding-bottom: $-xl;
  }
}
.padded-horizontal, .padded-left {
  padding-left: $-m;
  &.large {
    padding-left: $-xl;
  }
}
.padded-horizontal, .padded-right {
  padding-right: $-m;
  &.large {
    padding-right: $-xl;
  }
}

/*
* Margins
*/
.margins {
  margin: $-l;
  &.large {
    margin: $-xl;
  }
}
.margins-vertical, .margin-top {
  margin-top: $-m;
  &.large {
    margin-top: $-xl;
  }
}
.margins-vertical, .margin-bottom {
  margin-bottom: $-m;
  &.large {
    margin-bottom: $-xl;
  }
}
.margins-horizontal, .margin-left {
  margin-left: $-m;
  &.large {
    margin-left: $-xl;
  }
}
.margins-horizontal, .margin-right {
  margin-right: $-m;
  &.large {
    margin-right: $-xl;
  }
}


/**
 * Callouts
 */

.callout {
  border-left: 3px solid #BBB;
  background-color: #EEE;
  padding: $-s $-s $-s $-xl;
  display: block;
  position: relative;
  &:before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+');
    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;
    background-color: lighten($positive, 45%);
    color: darken($positive, 16%);
  }
  &.success:before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
  }
  &.danger {
    border-left-color: $negative;
    background-color: lighten($negative, 34%);
    color: darken($negative, 20%);
  }
  &.danger:before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
  }
  &.info {
    border-left-color: $info;
    background-color: lighten($info, 50%);
    color: darken($info, 16%);
  }
  &.warning {
    border-left-color: $warning;
    background-color: lighten($warning, 36%);
    color: darken($warning, 16%);
  }
  &.warning:before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
  }
}

.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;
  }
  h3 a {
    line-height: 1;
  }
  .body, p.empty-text {
    padding: $-m;
  }
  a, p {
    word-wrap: break-word;
    word-break: break-word;
  }
}

.sidebar .card {
  h3, .body, .empty-text {
    padding: $-s $-m;
  }
}

.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;
}

.tag-item {
  display: inline-flex;
  margin-bottom: $-xs;
  margin-right: $-xs;
  border-radius: 4px;
  border: 1px solid #CCC;
  overflow: hidden;
  font-size: 0.85em;
  a, a:hover, a:active {
    padding: 4px 8px;
    color: #777;
    transition: background-color ease-in-out 80ms;
    text-decoration: none;
  }
  a:hover {
    background-color: rgba(255, 255, 255, 0.7);
  }
  svg {
    fill: #888;
  }
  .tag-value {
    border-left: 1px solid #DDD;
    background-color: rgba(255, 255, 255, 0.5);
  }
}

.tag-list div:last-child .tag-item {
  margin-bottom: 0;
}