assets/stylesheets/bootstrap/_code.scss
author ymh <ymh.work@gmail.com>
Thu, 15 Jun 2017 12:17:09 +0200
changeset 114 af15590802a4
permissions -rw-r--r--
add a lot of files
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
114
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
//
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
// Code (inline and block)
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
// --------------------------------------------------
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
// Inline and block code styles
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
code,
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
kbd,
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
pre,
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
samp {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
  font-family: $font-family-monospace;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
}
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
// Inline code
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
code {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
  padding: 2px 4px;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
  font-size: 90%;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
  color: $code-color;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
  background-color: $code-bg;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
  border-radius: $border-radius-base;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
}
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
// User input typically entered via keyboard
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
kbd {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
  padding: 2px 4px;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
  font-size: 90%;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
  color: $kbd-color;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
  background-color: $kbd-bg;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
  border-radius: $border-radius-small;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
  kbd {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
    padding: 0;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
    font-size: 100%;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
    font-weight: bold;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    36
    box-shadow: none;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    38
}
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    39
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    40
// Blocks of code
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    41
pre {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    42
  display: block;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
  padding: (($line-height-computed - 1) / 2);
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
  margin: 0 0 ($line-height-computed / 2);
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
  font-size: ($font-size-base - 1); // 14px to 13px
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
  line-height: $line-height-base;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
  word-break: break-all;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
  word-wrap: break-word;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
  color: $pre-color;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    50
  background-color: $pre-bg;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
  border: 1px solid $pre-border-color;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
  border-radius: $border-radius-base;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
  // Account for some code outputs that place code tags in pre tags
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
  code {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    56
    padding: 0;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    57
    font-size: inherit;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    58
    color: inherit;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    59
    white-space: pre-wrap;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    60
    background-color: transparent;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    61
    border-radius: 0;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    62
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    63
}
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    64
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    65
// Enable scrollable blocks of code
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    66
.pre-scrollable {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    67
  max-height: $pre-scrollable-max-height;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    68
  overflow-y: scroll;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    69
}