git repos / blockattack-game

blame: source/misc/embedded_libs/fmt-8.1.1/doc/bootstrap/scaffolding.less

normal view · raw

f8deb5b9 Poul Sander 2022-01-15 13:55 1
//
f8deb5b9 Poul Sander 2022-01-15 13:55 2
// Scaffolding
f8deb5b9 Poul Sander 2022-01-15 13:55 3
// --------------------------------------------------
f8deb5b9 Poul Sander 2022-01-15 13:55 4
f8deb5b9 Poul Sander 2022-01-15 13:55 5
f8deb5b9 Poul Sander 2022-01-15 13:55 6
// Reset the box-sizing
f8deb5b9 Poul Sander 2022-01-15 13:55 7
//
f8deb5b9 Poul Sander 2022-01-15 13:55 8
// Heads up! This reset may cause conflicts with some third-party widgets.
f8deb5b9 Poul Sander 2022-01-15 13:55 9
// For recommendations on resolving such conflicts, see
f8deb5b9 Poul Sander 2022-01-15 13:55 10
// http://getbootstrap.com/getting-started/#third-box-sizing
f8deb5b9 Poul Sander 2022-01-15 13:55 11
* {
f8deb5b9 Poul Sander 2022-01-15 13:55 12
  .box-sizing(border-box);
f8deb5b9 Poul Sander 2022-01-15 13:55 13
}
f8deb5b9 Poul Sander 2022-01-15 13:55 14
*:before,
f8deb5b9 Poul Sander 2022-01-15 13:55 15
*:after {
f8deb5b9 Poul Sander 2022-01-15 13:55 16
  .box-sizing(border-box);
f8deb5b9 Poul Sander 2022-01-15 13:55 17
}
f8deb5b9 Poul Sander 2022-01-15 13:55 18
f8deb5b9 Poul Sander 2022-01-15 13:55 19
f8deb5b9 Poul Sander 2022-01-15 13:55 20
// Body reset
f8deb5b9 Poul Sander 2022-01-15 13:55 21
f8deb5b9 Poul Sander 2022-01-15 13:55 22
html {
f8deb5b9 Poul Sander 2022-01-15 13:55 23
  font-size: 10px;
f8deb5b9 Poul Sander 2022-01-15 13:55 24
  -webkit-tap-highlight-color: rgba(0,0,0,0);
f8deb5b9 Poul Sander 2022-01-15 13:55 25
}
f8deb5b9 Poul Sander 2022-01-15 13:55 26
f8deb5b9 Poul Sander 2022-01-15 13:55 27
body {
f8deb5b9 Poul Sander 2022-01-15 13:55 28
  font-family: @font-family-base;
f8deb5b9 Poul Sander 2022-01-15 13:55 29
  font-size: @font-size-base;
f8deb5b9 Poul Sander 2022-01-15 13:55 30
  line-height: @line-height-base;
f8deb5b9 Poul Sander 2022-01-15 13:55 31
  color: @text-color;
f8deb5b9 Poul Sander 2022-01-15 13:55 32
  background-color: @body-bg;
f8deb5b9 Poul Sander 2022-01-15 13:55 33
}
f8deb5b9 Poul Sander 2022-01-15 13:55 34
f8deb5b9 Poul Sander 2022-01-15 13:55 35
// Reset fonts for relevant elements
f8deb5b9 Poul Sander 2022-01-15 13:55 36
input,
f8deb5b9 Poul Sander 2022-01-15 13:55 37
button,
f8deb5b9 Poul Sander 2022-01-15 13:55 38
select,
f8deb5b9 Poul Sander 2022-01-15 13:55 39
textarea {
f8deb5b9 Poul Sander 2022-01-15 13:55 40
  font-family: inherit;
f8deb5b9 Poul Sander 2022-01-15 13:55 41
  font-size: inherit;
f8deb5b9 Poul Sander 2022-01-15 13:55 42
  line-height: inherit;
f8deb5b9 Poul Sander 2022-01-15 13:55 43
}
f8deb5b9 Poul Sander 2022-01-15 13:55 44
f8deb5b9 Poul Sander 2022-01-15 13:55 45
f8deb5b9 Poul Sander 2022-01-15 13:55 46
// Links
f8deb5b9 Poul Sander 2022-01-15 13:55 47
f8deb5b9 Poul Sander 2022-01-15 13:55 48
a {
f8deb5b9 Poul Sander 2022-01-15 13:55 49
  color: @link-color;
f8deb5b9 Poul Sander 2022-01-15 13:55 50
  text-decoration: none;
f8deb5b9 Poul Sander 2022-01-15 13:55 51
f8deb5b9 Poul Sander 2022-01-15 13:55 52
  &:hover,
f8deb5b9 Poul Sander 2022-01-15 13:55 53
  &:focus {
f8deb5b9 Poul Sander 2022-01-15 13:55 54
    color: @link-hover-color;
f8deb5b9 Poul Sander 2022-01-15 13:55 55
    text-decoration: @link-hover-decoration;
f8deb5b9 Poul Sander 2022-01-15 13:55 56
  }
f8deb5b9 Poul Sander 2022-01-15 13:55 57
f8deb5b9 Poul Sander 2022-01-15 13:55 58
  &:focus {
f8deb5b9 Poul Sander 2022-01-15 13:55 59
    .tab-focus();
f8deb5b9 Poul Sander 2022-01-15 13:55 60
  }
f8deb5b9 Poul Sander 2022-01-15 13:55 61
}
f8deb5b9 Poul Sander 2022-01-15 13:55 62
f8deb5b9 Poul Sander 2022-01-15 13:55 63
f8deb5b9 Poul Sander 2022-01-15 13:55 64
// Figures
f8deb5b9 Poul Sander 2022-01-15 13:55 65
//
f8deb5b9 Poul Sander 2022-01-15 13:55 66
// We reset this here because previously Normalize had no `figure` margins. This
f8deb5b9 Poul Sander 2022-01-15 13:55 67
// ensures we don't break anyone's use of the element.
f8deb5b9 Poul Sander 2022-01-15 13:55 68
f8deb5b9 Poul Sander 2022-01-15 13:55 69
figure {
f8deb5b9 Poul Sander 2022-01-15 13:55 70
  margin: 0;
f8deb5b9 Poul Sander 2022-01-15 13:55 71
}
f8deb5b9 Poul Sander 2022-01-15 13:55 72
f8deb5b9 Poul Sander 2022-01-15 13:55 73
f8deb5b9 Poul Sander 2022-01-15 13:55 74
// Images
f8deb5b9 Poul Sander 2022-01-15 13:55 75
f8deb5b9 Poul Sander 2022-01-15 13:55 76
img {
f8deb5b9 Poul Sander 2022-01-15 13:55 77
  vertical-align: middle;
f8deb5b9 Poul Sander 2022-01-15 13:55 78
}
f8deb5b9 Poul Sander 2022-01-15 13:55 79
f8deb5b9 Poul Sander 2022-01-15 13:55 80
// Responsive images (ensure images don't scale beyond their parents)
f8deb5b9 Poul Sander 2022-01-15 13:55 81
.img-responsive {
f8deb5b9 Poul Sander 2022-01-15 13:55 82
  .img-responsive();
f8deb5b9 Poul Sander 2022-01-15 13:55 83
}
f8deb5b9 Poul Sander 2022-01-15 13:55 84
f8deb5b9 Poul Sander 2022-01-15 13:55 85
// Rounded corners
f8deb5b9 Poul Sander 2022-01-15 13:55 86
.img-rounded {
f8deb5b9 Poul Sander 2022-01-15 13:55 87
  border-radius: @border-radius-large;
f8deb5b9 Poul Sander 2022-01-15 13:55 88
}
f8deb5b9 Poul Sander 2022-01-15 13:55 89
f8deb5b9 Poul Sander 2022-01-15 13:55 90
// Image thumbnails
f8deb5b9 Poul Sander 2022-01-15 13:55 91
//
f8deb5b9 Poul Sander 2022-01-15 13:55 92
// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
f8deb5b9 Poul Sander 2022-01-15 13:55 93
.img-thumbnail {
f8deb5b9 Poul Sander 2022-01-15 13:55 94
  padding: @thumbnail-padding;
f8deb5b9 Poul Sander 2022-01-15 13:55 95
  line-height: @line-height-base;
f8deb5b9 Poul Sander 2022-01-15 13:55 96
  background-color: @thumbnail-bg;
f8deb5b9 Poul Sander 2022-01-15 13:55 97
  border: 1px solid @thumbnail-border;
f8deb5b9 Poul Sander 2022-01-15 13:55 98
  border-radius: @thumbnail-border-radius;
f8deb5b9 Poul Sander 2022-01-15 13:55 99
  .transition(all .2s ease-in-out);
f8deb5b9 Poul Sander 2022-01-15 13:55 100
f8deb5b9 Poul Sander 2022-01-15 13:55 101
  // Keep them at most 100% wide
f8deb5b9 Poul Sander 2022-01-15 13:55 102
  .img-responsive(inline-block);
f8deb5b9 Poul Sander 2022-01-15 13:55 103
}
f8deb5b9 Poul Sander 2022-01-15 13:55 104
f8deb5b9 Poul Sander 2022-01-15 13:55 105
// Perfect circle
f8deb5b9 Poul Sander 2022-01-15 13:55 106
.img-circle {
f8deb5b9 Poul Sander 2022-01-15 13:55 107
  border-radius: 50%; // set radius in percents
f8deb5b9 Poul Sander 2022-01-15 13:55 108
}
f8deb5b9 Poul Sander 2022-01-15 13:55 109
f8deb5b9 Poul Sander 2022-01-15 13:55 110
f8deb5b9 Poul Sander 2022-01-15 13:55 111
// Horizontal rules
f8deb5b9 Poul Sander 2022-01-15 13:55 112
f8deb5b9 Poul Sander 2022-01-15 13:55 113
hr {
f8deb5b9 Poul Sander 2022-01-15 13:55 114
  margin-top:    @line-height-computed;
f8deb5b9 Poul Sander 2022-01-15 13:55 115
  margin-bottom: @line-height-computed;
f8deb5b9 Poul Sander 2022-01-15 13:55 116
  border: 0;
f8deb5b9 Poul Sander 2022-01-15 13:55 117
  border-top: 1px solid @hr-border;
f8deb5b9 Poul Sander 2022-01-15 13:55 118
}
f8deb5b9 Poul Sander 2022-01-15 13:55 119
f8deb5b9 Poul Sander 2022-01-15 13:55 120
f8deb5b9 Poul Sander 2022-01-15 13:55 121
// Only display content to screen readers
f8deb5b9 Poul Sander 2022-01-15 13:55 122
//
f8deb5b9 Poul Sander 2022-01-15 13:55 123
// See: http://a11yproject.com/posts/how-to-hide-content/
f8deb5b9 Poul Sander 2022-01-15 13:55 124
f8deb5b9 Poul Sander 2022-01-15 13:55 125
.sr-only {
f8deb5b9 Poul Sander 2022-01-15 13:55 126
  position: absolute;
f8deb5b9 Poul Sander 2022-01-15 13:55 127
  width: 1px;
f8deb5b9 Poul Sander 2022-01-15 13:55 128
  height: 1px;
f8deb5b9 Poul Sander 2022-01-15 13:55 129
  margin: -1px;
f8deb5b9 Poul Sander 2022-01-15 13:55 130
  padding: 0;
f8deb5b9 Poul Sander 2022-01-15 13:55 131
  overflow: hidden;
f8deb5b9 Poul Sander 2022-01-15 13:55 132
  clip: rect(0,0,0,0);
f8deb5b9 Poul Sander 2022-01-15 13:55 133
  border: 0;
f8deb5b9 Poul Sander 2022-01-15 13:55 134
}
f8deb5b9 Poul Sander 2022-01-15 13:55 135
f8deb5b9 Poul Sander 2022-01-15 13:55 136
// Use in conjunction with .sr-only to only display content when it's focused.
f8deb5b9 Poul Sander 2022-01-15 13:55 137
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
f8deb5b9 Poul Sander 2022-01-15 13:55 138
// Credit: HTML5 Boilerplate
f8deb5b9 Poul Sander 2022-01-15 13:55 139
f8deb5b9 Poul Sander 2022-01-15 13:55 140
.sr-only-focusable {
f8deb5b9 Poul Sander 2022-01-15 13:55 141
  &:active,
f8deb5b9 Poul Sander 2022-01-15 13:55 142
  &:focus {
f8deb5b9 Poul Sander 2022-01-15 13:55 143
    position: static;
f8deb5b9 Poul Sander 2022-01-15 13:55 144
    width: auto;
f8deb5b9 Poul Sander 2022-01-15 13:55 145
    height: auto;
f8deb5b9 Poul Sander 2022-01-15 13:55 146
    margin: 0;
f8deb5b9 Poul Sander 2022-01-15 13:55 147
    overflow: visible;
f8deb5b9 Poul Sander 2022-01-15 13:55 148
    clip: auto;
f8deb5b9 Poul Sander 2022-01-15 13:55 149
  }
f8deb5b9 Poul Sander 2022-01-15 13:55 150
}
f8deb5b9 Poul Sander 2022-01-15 13:55 151
f8deb5b9 Poul Sander 2022-01-15 13:55 152
f8deb5b9 Poul Sander 2022-01-15 13:55 153
// iOS "clickable elements" fix for role="button"
f8deb5b9 Poul Sander 2022-01-15 13:55 154
//
f8deb5b9 Poul Sander 2022-01-15 13:55 155
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
f8deb5b9 Poul Sander 2022-01-15 13:55 156
// for traditionally non-focusable elements with role="button"
f8deb5b9 Poul Sander 2022-01-15 13:55 157
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
f8deb5b9 Poul Sander 2022-01-15 13:55 158
// Upstream patch for normalize.css submitted: https://github.com/necolas/normalize.css/pull/379 - remove this fix once that is merged
f8deb5b9 Poul Sander 2022-01-15 13:55 159
f8deb5b9 Poul Sander 2022-01-15 13:55 160
[role="button"] {
f8deb5b9 Poul Sander 2022-01-15 13:55 161
  cursor: pointer;
f8deb5b9 Poul Sander 2022-01-15 13:55 162
}