` all receive top and bottom margins. We nuke the top
+ * margin for easier control within type scales as it avoids margin collapsing.
+ */
+ & h1,
+ & h2,
+ & h3,
+ & h4,
+ & h5,
+ & h6 {
+ margin-top: 0;
+ margin-bottom: .5rem;
+ }
+
+ /* Reset margins on paragraphs
+ *
+ * Similarly, the top margin on `
`s get reset. However, we also reset the
+ * bottom margin to use `rem` units instead of `em`.
+ */
+ & p {
+ margin-top: 0;
+ margin-bottom: 1rem;
+ }
+
+ /* Abbreviations and acronyms */
+ & abbr[title],
+ /* Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 */
+ & abbr[data-original-title] {
+ cursor: help;
+ border-bottom: 1px dotted var(--abbr-border-color);
+ }
+
+ & address {
+ margin-bottom: 1rem;
+ font-style: normal;
+ line-height: inherit;
+ }
+
+ & ol,
+ & ul,
+ & dl {
+ margin-top: 0;
+ margin-bottom: 1rem;
+ }
+
+ & ol ol,
+ & ul ul,
+ & ol ul,
+ & ul ol {
+ margin-bottom: 0;
+ }
+
+ & dt {
+ font-weight: var(--dt-font-weight);
+ }
+
+ & dd {
+ margin-bottom: .5rem;
+ margin-left: 0; /* Undo browser default */
+ }
+
+ & blockquote {
+ margin: 0 0 1rem;
+ }
+
+ /**
+ * Links
+ */
+
+ & a {
+ color: var(--link-color);
+ text-decoration: var(--link-decoration);
+
+ &:focus,
+ &:hover {
+ color: var(--link-hover-color);
+ text-decoration: var(--link-hover-decoration);
+ }
+
+ &:focus {
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px;
+ }
+ }
+
+ /* And undo these styles for placeholder links/named anchors (without href)
+ * which have not been made explicitly keyboard-focusable (without tabindex).
+ * It would be more straightforward to just use a[href] in previous block, but that
+ * causes specificity issues in many other styles that are too complex to fix.
+ * See https://github.com/twbs/bootstrap/issues/19402
+ */
+
+ & a:not([href]):not([tabindex]) {
+ color: inherit;
+ text-decoration: none;
+
+ &:focus,
+ &:hover {
+ color: var(--link-hover-color);
+ text-decoration: var(--link-hover-decoration);
+ }
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ /**
+ * Code
+ */
+
+ & pre {
+ /* Remove browser default top margin */
+ margin-top: 0;
+ /* Reset browser default of `1em` to use `rem`s */
+ margin-bottom: 1rem;
+ /* Normalize v4 removed this property, causing `
` content to break out of wrapping code snippets */
+ overflow: auto;
+ }
+
+ /**
+ * Figures
+ */
+
+ & figure {
+ /* Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
+ * We reset that to create a better flow in-page.
+ */
+ margin: 0 0 1rem;
+ }
+
+ /**
+ * Images
+ */
+
+ & img {
+ /* By default, ``s are `inline-block`. This assumes that, and vertically
+ * centers them. This won't apply should you reset them to `block` level.
+ */
+ vertical-align: middle;
+ /* Note: ``s are deliberately not made responsive by default.
+ * For the rationale behind this, see the comments on the `.img-fluid` class.
+ */
+ }
+
+ /* iOS "clickable elements" fix for role="button"
+ *
+ * Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
+ * for traditionally non-focusable elements with role="button"
+ * see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+ */
+
+ & [role="button"] {
+ cursor: pointer;
+ }
+
+ /* Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
+ *
+ * In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
+ * DON'T remove the click delay when `` is present.
+ * However, they DO support removing the click delay via `touch-action: manipulation`.
+ * See:
+ * * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
+ * * http://caniuse.com/#feat=css-touch-action
+ * * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
+ */
+
+ & a,
+ & area,
+ & button,
+ & [role="button"],
+ & input,
+ & label,
+ & select,
+ & summary,
+ & textarea {
+ touch-action: manipulation;
+ }
+
+ /**
+ * Tables
+ */
+
+ & table {
+ /* No longer part of Normalize since v4 */
+ border-collapse: collapse;
+ /* Reset for nesting within parents with `background-color`. */
+ background-color: var(--table-bg);
+ }
+
+ & caption {
+ padding-top: var(--table-cell-padding);
+ padding-bottom: var(--table-cell-padding);
+ color: var(--text-muted);
+ text-align: left;
+ caption-side: bottom;
+ }
+
+ & th {
+ /* Centered by default, but left-align-ed to match the `td`s below. */
+ text-align: left;
+ }
+
+ /**
+ * Forms
+ */
+
+ & label {
+ /* Allow labels to use `margin` for spacing. */
+ display: inline-block;
+ margin-bottom: .5rem;
+ }
+
+ /* Work around a Firefox/IE bug where the transparent `button` background
+ * results in a loss of the default `button` focus styles.
+ *
+ * Credit: https://github.com/suitcss/base/
+ */
+ & button:focus {
+ outline: 1px dotted;
+ outline: 5px auto -webkit-focus-ring-color;
+ }
+
+ & input,
+ & button,
+ & select,
+ & textarea {
+ /* Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are */
+ /* properly inherited. However, `line-height` isn't inherited there. */
+ line-height: inherit;
+ }
+
+ & input[type="radio"],
+ & input[type="checkbox"] {
+ /* Apply a disabled cursor for radios and checkboxes.
+ *
+ * Note: Neither radios nor checkboxes can be readonly.
+ */
+ &:disabled {
+ cursor: var(--cursor-disabled);
+ }
+ }
+
+ & input[type="date"],
+ & input[type="time"],
+ & input[type="datetime-local"],
+ & input[type="month"] {
+ /* Remove the default appearance of temporal inputs to avoid a Mobile Safari
+ * bug where setting a custom line-height prevents text from being vertically
+ * centered within the input.
+ *
+ * Bug report: https://github.com/twbs/bootstrap/issues/11266
+ */
+ -webkit-appearance: listbox;
+ }
+
+ & textarea {
+ /* Textareas should really only resize vertically so they don't break their (horizontal) containers. */
+ resize: vertical;
+ }
+
+ & fieldset {
+ /* Chrome and Firefox set a `min-width: min-content;` on fieldsets,
+ * so we reset that to ensure it behaves more like a standard block element.
+ * See https://github.com/twbs/bootstrap/issues/12359.
+ */
+ min-width: 0;
+ /* Reset the default outline behavior of fieldsets so they don't affect page layout. */
+ padding: 0;
+ margin: 0;
+ border: 0;
+ }
+
+ & legend {
+ /* Reset the entire legend element to match the `fieldset` */
+ display: block;
+ width: 100%;
+ padding: 0;
+ margin-bottom: .5rem;
+ font-size: 1.5rem;
+ line-height: inherit;
+ }
+
+ & input[type="search"] {
+ /* This overrides the extra rounded corners on search inputs in iOS so that our
+ * `.form-control` class can properly style them. Note that this cannot simply
+ * be added to `.form-control` as it's not specific enough. For details, see
+ * https://github.com/twbs/bootstrap/issues/11586.
+ */
+ -webkit-appearance: none;
+ }
+
+ /* todo: needed? */
+ & output {
+ display: inline-block;
+ }
+
+ /* Always hide an element with the `hidden` HTML attribute (from PureCSS). */
+ & [hidden] {
+ display: none !important;
+ }
+ }
+}
+
diff --git a/ui/src/components/column/readme.md b/ui/src/components/column/readme.md
index 73363d69..0668b307 100644
--- a/ui/src/components/column/readme.md
+++ b/ui/src/components/column/readme.md
@@ -5,12 +5,13 @@
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
-const Grid = require('../grid');
+const Base = require('../base');
+const Container = require('../container');
const Row = require('../row');
const Column = require('./index');
const styles = {
- grid: {
+ container: {
backgroundColor: '#FFEBEE'
},
row: {
@@ -18,27 +19,19 @@ const styles = {
},
column: {
backgroundColor: '#B71C1C',
- textAlign: 'center'
- },
- p: {
+ textAlign: 'center',
color: 'white'
}
};
nmodule.exports = ReactDOM.renderToString(
-
+
-
-