mirror of
https://github.com/primer/css.git
synced 2024-11-26 23:56:04 +03:00
Jon Rohan
commit
19fd8203ec
@ -1,6 +1,6 @@
|
||||
# [primer-css]( http://primercss.io )
|
||||
|
||||
**Version:** `2.7.0`
|
||||
**Version:** `3.0.0`
|
||||
|
||||
> Primer is the CSS toolkit that powers GitHub's front-end design. It's purposefully limited to common components to provide our developers with the most flexibility, and to keep GitHub uniquely *GitHubby*. It's built with SCSS and available via Bower, so it's easy to include all or part of it within your own project.
|
||||
|
||||
@ -11,17 +11,17 @@
|
||||
### css/primer.css
|
||||
|
||||
- **Total Stylesheets:** 1
|
||||
- **Total Stylesheet Size:** 32804
|
||||
- **Total Stylesheet Size:** 31700
|
||||
- **Total Media Queries:** 1
|
||||
- **Total Rules:** 468
|
||||
- **Selectors Per Rule:** 1.4294871794871795
|
||||
- **Total Selectors:** 669
|
||||
- **Identifiers Per Selector:** 2.007473841554559
|
||||
- **Specificity Per Selector:** 15.681614349775785
|
||||
- **Top Selector Specificity:** 43
|
||||
- **Top Selector Specificity Selector:** dl.form.warn dd.warning::after
|
||||
- **Total Rules:** 462
|
||||
- **Selectors Per Rule:** 1.3484848484848484
|
||||
- **Total Selectors:** 623
|
||||
- **Identifiers Per Selector:** 1.768860353130016
|
||||
- **Specificity Per Selector:** 15.296950240770466
|
||||
- **Top Selector Specificity:** 41
|
||||
- **Top Selector Specificity Selector:** .form-group.warn .warning::after
|
||||
- **Total Id Selectors:** 0
|
||||
- **Total Identifiers:** 1343
|
||||
- **Total Declarations:** 1036
|
||||
- **Total Unique Colors:** 82
|
||||
- **Total Important Keywords:** 156
|
||||
- **Total Identifiers:** 1102
|
||||
- **Total Declarations:** 1029
|
||||
- **Total Unique Colors:** 73
|
||||
- **Total Important Keywords:** 157
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -78,7 +78,7 @@
|
||||
|
||||
<script src="{{ site.baseurl }}/js/anchor.min.js"></script>
|
||||
<script>
|
||||
var selector = '.markdown-body h2, .markdown-body h3';
|
||||
var selector = '.markdown-body > h2, .markdown-body > h3';
|
||||
anchors.options = {
|
||||
placement: 'left',
|
||||
class: 'anchor-link'
|
||||
|
||||
@ -23,13 +23,13 @@ Wrap some content in the outer `.blankslate` wrapper to give it the blankslate a
|
||||
|
||||
## With Octicons
|
||||
|
||||
When it helps the message, include `.mega-octicon`s as the first elements in the blank slate. Be sure to use relevant icons.
|
||||
When it helps the message, include (relevant) icons in your blank slate. Add `.blankslate-icon` to any `.mega-octicon`s as the first elements in the blankslate, like so.
|
||||
|
||||
{% example html %}
|
||||
<div class="blankslate">
|
||||
<span class="mega-octicon octicon-git-commit"></span>
|
||||
<span class="mega-octicon octicon-tag"></span>
|
||||
<span class="mega-octicon octicon-git-branch"></span>
|
||||
<span class="mega-octicon octicon-git-commit blankslate-icon"></span>
|
||||
<span class="mega-octicon octicon-tag blankslate-icon"></span>
|
||||
<span class="mega-octicon octicon-git-branch blankslate-icon"></span>
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
@ -44,7 +44,7 @@ Add an additional optional class to the `.blankslate` to change its appearance.
|
||||
Narrows the blankslate container to not occupy the entire available width.
|
||||
|
||||
{% example html %}
|
||||
<div class="blankslate has-fixed-width">
|
||||
<div class="blankslate blankslate-fixed-width">
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
@ -55,7 +55,7 @@ Narrows the blankslate container to not occupy the entire available width.
|
||||
Removes the `border-radius` on the top corners.
|
||||
|
||||
{% example html %}
|
||||
<div class="blankslate capped">
|
||||
<div class="blankslate blankslate-capped">
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
@ -66,7 +66,18 @@ Removes the `border-radius` on the top corners.
|
||||
Significantly increases the vertical padding.
|
||||
|
||||
{% example html %}
|
||||
<div class="blankslate spacious">
|
||||
<div class="blankslate blankslate-spacious">
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Large
|
||||
|
||||
Increases the size of the text in the blankslate
|
||||
|
||||
{% example html %}
|
||||
<div class="blankslate blankslate-large">
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
@ -77,7 +88,7 @@ Significantly increases the vertical padding.
|
||||
Removes the `background-color` and `border`.
|
||||
|
||||
{% example html %}
|
||||
<div class="blankslate clean-background">
|
||||
<div class="blankslate blankslate-clean-background">
|
||||
<h3>This is a blank slate</h3>
|
||||
<p>Use it to provide information when no dynamic content exists.</p>
|
||||
</div>
|
||||
|
||||
@ -154,13 +154,11 @@ Have a hankering for a series of buttons that are attached to one another? Wrap
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
Add `.button_to` to `<form>`s within `.btn-group`s for proper spacing and rounded corners.
|
||||
|
||||
**Heads up!** This class name is inconsistent and will change in the next major version.
|
||||
Add `.btn-group-form` to `<form>`s within `.btn-group`s for proper spacing and rounded corners.
|
||||
|
||||
{% example html %}
|
||||
<div class="btn-group">
|
||||
<form class="button_to">
|
||||
<form class="btn-group-form">
|
||||
<button class="btn" type="button">Button in a form</button>
|
||||
</form>
|
||||
<button class="btn" type="button">Button</button>
|
||||
@ -174,7 +172,7 @@ Use `.hidden-text-expander` to indicate and toggle hidden text.
|
||||
|
||||
{% example html %}
|
||||
<span class="hidden-text-expander">
|
||||
<a href="#">…</a>
|
||||
<button type="button" class="ellipsis-expander">…</button>
|
||||
</span>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
@ -242,6 +242,10 @@ body {
|
||||
// Examples
|
||||
//
|
||||
|
||||
.highlight {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.docs-example {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
@ -250,6 +254,13 @@ body {
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
|
||||
// Undo `.markdown-body`
|
||||
p,
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
+ .highlight {
|
||||
margin-top: -1px;
|
||||
border: 1px solid #e5e5e5;
|
||||
@ -288,12 +299,12 @@ body {
|
||||
// Override Markdown styles to restore values from `_type.scss`
|
||||
ul,
|
||||
ol {
|
||||
padding: 0;
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dl.form {
|
||||
.form-group {
|
||||
margin: 15px 0;
|
||||
|
||||
&:first-child {
|
||||
|
||||
@ -28,10 +28,10 @@ Form controls in Primer currently have no basic layout specified (this is by des
|
||||
{% example html %}
|
||||
<form>
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name">
|
||||
<input class="form-control" type="text" id="name">
|
||||
|
||||
<label for="email">Email address</label>
|
||||
<input type="email" id="email">
|
||||
<input class="form-control" type="email" id="email">
|
||||
|
||||
<label>
|
||||
<input type="checkbox"> Remember me
|
||||
@ -54,8 +54,8 @@ Textual form controls have a white background by default. You can change this to
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<input type="text" placeholder="Default input">
|
||||
<input class="input-contrast" type="text" placeholder="Input with contrast">
|
||||
<input class="form-control" type="text" placeholder="Default input">
|
||||
<input class="form-control input-contrast" type="text" placeholder="Input with contrast">
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
@ -63,11 +63,11 @@ Textual form controls have a white background by default. You can change this to
|
||||
|
||||
Make inputs smaller, larger, or full-width with an additional class.
|
||||
|
||||
### Mini
|
||||
### Small
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<input class="input-mini" type="text" placeholder="Mini input">
|
||||
<input class="form-control input-sm" type="text" placeholder="Small input">
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
@ -75,7 +75,7 @@ Make inputs smaller, larger, or full-width with an additional class.
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<input class="input-large" type="text" placeholder="Large input">
|
||||
<input class="form-control input-lg" type="text" placeholder="Large input">
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
@ -83,7 +83,7 @@ Make inputs smaller, larger, or full-width with an additional class.
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<input class="input-block" type="text" placeholder="Full-width input">
|
||||
<input class="form-control input-block" type="text" placeholder="Full-width input">
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
@ -93,25 +93,7 @@ Primer adds light `height` and `vertical-align` styles to `<select>`s for all br
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<select>
|
||||
<option>Choose an option</option>
|
||||
<option>Git</option>
|
||||
<option>Subversion</option>
|
||||
<option>Social Coding</option>
|
||||
<option>Beets</option>
|
||||
<option>Bears</option>
|
||||
<option>Battlestar Galactica</option>
|
||||
</select>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
### Custom
|
||||
|
||||
Custom `<select>`s are also available—just add `.select`. **Only available in latest WebKit, Firefox, and IE browsers.**
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<select class="select">
|
||||
<select class="form-select">
|
||||
<option>Choose an option</option>
|
||||
<option>Git</option>
|
||||
<option>Subversion</option>
|
||||
@ -128,7 +110,7 @@ Custom `<select>`s are also available—just add `.select`. **Only available in
|
||||
Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).
|
||||
|
||||
{% example html %}
|
||||
<select class="select-sm">
|
||||
<select class="form-select select-sm">
|
||||
<option>Choose an option</option>
|
||||
<option>Git</option>
|
||||
<option>Subversion</option>
|
||||
@ -138,7 +120,7 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
|
||||
<option>Battlestar Galactica</option>
|
||||
</select>
|
||||
|
||||
<select class="select select-sm">
|
||||
<select class="form-select select-sm">
|
||||
<option>Choose an option</option>
|
||||
<option>Git</option>
|
||||
<option>Subversion</option>
|
||||
@ -153,15 +135,15 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<dl class="form">
|
||||
<dl class="form-group">
|
||||
<dt><label>Example Text</label></dt>
|
||||
<dd><input type="text" value="Example Value"></dd>
|
||||
<dd><input class="form-control" type="text" value="Example Value"></dd>
|
||||
</dl>
|
||||
|
||||
<dl class="form">
|
||||
<dt><label>Example Label</label></dt>
|
||||
<dl class="form-group">
|
||||
<dt><label>Example Select</label></dt>
|
||||
<dd>
|
||||
<select class="select">
|
||||
<select class="form-select">
|
||||
<option>Choose an option</option>
|
||||
<option>Git</option>
|
||||
<option>Subversion</option>
|
||||
@ -172,24 +154,31 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
|
||||
</select>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<dl class="form-group">
|
||||
<dt><label>Example Textarea</label></dt>
|
||||
<dd>
|
||||
<textarea class="form-control"></textarea>
|
||||
</dd>
|
||||
</dl>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
## Form group validation
|
||||
|
||||
Convey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class="form">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.
|
||||
Convey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class="form-group">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<dl class="form errored">
|
||||
<dl class="form-group errored">
|
||||
<dt><label>Example Text</label></dt>
|
||||
<dd><input type="text" value="Example Value"></dd>
|
||||
<dd><input class="form-control" type="text" value="Example Value"></dd>
|
||||
<dd class="error">This example input has an error.</dd>
|
||||
</dl>
|
||||
<br>
|
||||
<dl class="form warn">
|
||||
<dl class="form-group warn">
|
||||
<dt><label>Example Text</label></dt>
|
||||
<dd><input type="text" value="Example Value"></dd>
|
||||
<dd><input class="form-control" type="text" value="Example Value"></dd>
|
||||
<dd class="warning">This example input has a warning.</dd>
|
||||
</dl>
|
||||
</form>
|
||||
@ -233,7 +222,7 @@ Attached an input and button to one another.
|
||||
{% example html %}
|
||||
<form>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Username">
|
||||
<input class="form-control" type="text" placeholder="Username">
|
||||
<span class="input-group-button">
|
||||
<button class="btn">
|
||||
<span class="octicon octicon-clippy"></span>
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
padding: 15px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #246;
|
||||
background-color: #e2eef9;
|
||||
border: 1px solid #bac6d3;
|
||||
color: $flash-text-blue;
|
||||
background-color: $flash-bg-blue;
|
||||
border: 1px solid $flash-border-blue;
|
||||
border-radius: 3px;
|
||||
|
||||
p:last-child {
|
||||
@ -53,15 +53,15 @@
|
||||
//
|
||||
|
||||
.flash-warn {
|
||||
color: #4c4a42;
|
||||
background-color: #fff9ea;
|
||||
border-color: #dfd8c2;
|
||||
color: $flash-text-yellow;
|
||||
background-color: $flash-bg-yellow;
|
||||
border-color: $flash-border-yellow;
|
||||
}
|
||||
|
||||
.flash-error {
|
||||
color: #911;
|
||||
background-color: #fcdede;
|
||||
border-color: #d2b2b2;
|
||||
color: $flash-text-red;
|
||||
background-color: $flash-bg-red;
|
||||
border-color: $flash-border-red;
|
||||
}
|
||||
|
||||
.flash-full {
|
||||
|
||||
@ -9,67 +9,57 @@
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&.clean-background {
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.capped {
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
&.spacious {
|
||||
padding: 100px 60px 120px;
|
||||
}
|
||||
|
||||
&.has-fixed-width {
|
||||
width: 485px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&.large-format {
|
||||
h3 {
|
||||
margin: 0.75em 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
|
||||
&.has-fixed-width {
|
||||
width: 540px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.mega-octicon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 40px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.octicon-inbox {
|
||||
font-size: 48px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 2px 5px 3px;
|
||||
font-size: 14px;
|
||||
background: $bg-white;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
> .mega-octicon { color: #aaa; }
|
||||
|
||||
.mega-octicon + .mega-octicon { margin-left: 10px; }
|
||||
|
||||
.tabnav + & { margin-top: 20px; }
|
||||
|
||||
.context-loader.large-format-loader { padding-top: 50px; }
|
||||
}
|
||||
|
||||
.blankslate-icon {
|
||||
margin-right: 5px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 5px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.blankslate-capped {
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
.blankslate-spacious {
|
||||
padding: 100px 60px 120px;
|
||||
}
|
||||
|
||||
// was .has-fixed-width
|
||||
.blankslate-narrow {
|
||||
width: 485px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// was .large-format
|
||||
.blankslate-large {
|
||||
h3 {
|
||||
margin: 0.75em 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
|
||||
&.has-fixed-width {
|
||||
width: 540px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// was .clean-background
|
||||
.blankslate-clean-background {
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
79
scss/_button-group.scss
Normal file
79
scss/_button-group.scss
Normal file
@ -0,0 +1,79 @@
|
||||
// Button group
|
||||
//
|
||||
// A button group is a series of buttons laid out next to each other, all part
|
||||
// of one visual button, but separated by rules to be separate.
|
||||
// scss-lint:disable NestingDepth
|
||||
.btn-group {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@include clearfix();
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
float: left;
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:first-child:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
// Bring any button into forefront for proper borders given negative margin below
|
||||
&:hover,
|
||||
&:active,
|
||||
&.selected {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// Tuck buttons into one another to prevent double border
|
||||
+ .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn + .btn-group-form,
|
||||
.btn-group-form + .btn,
|
||||
.btn-group-form + .btn-group-form {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.btn-group-form {
|
||||
float: left;
|
||||
|
||||
.btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.btn {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.btn {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Proper spacing for multiple button groups (a la, gollum editor)
|
||||
.btn-group + .btn-group,
|
||||
.btn-group + .btn {
|
||||
margin-left: 5px;
|
||||
}
|
||||
@ -312,83 +312,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
// Button group
|
||||
//
|
||||
// A button group is a series of buttons laid out next to each other, all part
|
||||
// of one visual button, but separated by rules to be separate.
|
||||
.btn-group {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@include clearfix();
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
float: left;
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:first-child:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
// Bring any button into forefront for proper borders given negative margin below
|
||||
&:hover,
|
||||
&:active,
|
||||
&.selected {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// Tuck buttons into one another to prevent double border
|
||||
+ .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn + .btn-form,
|
||||
.btn-form + .btn,
|
||||
.btn-form + .btn-form {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.btn-form {
|
||||
float: left;
|
||||
|
||||
.btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:first-child .btn {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
&:last-child .btn {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Proper spacing for multiple button groups (a la, gollum editor)
|
||||
.btn-group + .btn-group,
|
||||
.btn-group + .btn {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
// Radio buttons
|
||||
//
|
||||
// Buttons backed by radio or checkbox control. Requires the use of `.hidden`
|
||||
|
||||
214
scss/_form-group.scss
Normal file
214
scss/_form-group.scss
Normal file
@ -0,0 +1,214 @@
|
||||
// Form groups
|
||||
//
|
||||
// Typical form groups - `<dl.form-group>` with a `<dt>` containing the label and
|
||||
// `<dd> containing the form elements.
|
||||
// scss-lint:disable NestingDepth
|
||||
.form-group {
|
||||
margin: 15px 0;
|
||||
|
||||
// Text fields
|
||||
.form-control {
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
margin-right: 5px;
|
||||
background-color: $bg-gray-light;
|
||||
|
||||
&:focus {
|
||||
background-color: $bg-white;
|
||||
}
|
||||
|
||||
&.shorter { width: 130px; }
|
||||
|
||||
&.short { width: 250px; }
|
||||
|
||||
&.long { width: 100%; }
|
||||
}
|
||||
|
||||
// Textarea
|
||||
// scss-lint:disable QualifyingElement
|
||||
textarea.form-control {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
|
||||
&.short {
|
||||
height: 50px;
|
||||
min-height: 50px;
|
||||
}
|
||||
}
|
||||
// scss-lint:enable QualifyingElement
|
||||
|
||||
// The Label
|
||||
dt {
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.flattened dt {
|
||||
float: left;
|
||||
margin: 0;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
&.flattened dd {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
//
|
||||
// Form Elements
|
||||
//
|
||||
|
||||
dd {
|
||||
|
||||
h4 {
|
||||
margin: 4px 0 0;
|
||||
|
||||
&.is-error { color: $text-red; }
|
||||
|
||||
&.is-success { color: $text-green; }
|
||||
|
||||
+ .note {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Variants
|
||||
//
|
||||
|
||||
&.required {
|
||||
dt label::after {
|
||||
padding-left: 5px;
|
||||
color: $text-red;
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
|
||||
// Form AJAX states
|
||||
//
|
||||
// Form fields that need feedback for AJAX loading, success
|
||||
// states and errored states.
|
||||
.success,
|
||||
.error,
|
||||
.indicator {
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
opacity: 0.5;
|
||||
|
||||
.indicator {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.successful {
|
||||
.success {
|
||||
display: inline;
|
||||
color: $text-green;
|
||||
}
|
||||
}
|
||||
|
||||
// Form validation
|
||||
//
|
||||
// Our inline errors
|
||||
|
||||
&.warn,
|
||||
&.errored {
|
||||
.warning,
|
||||
.error {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: inline-block;
|
||||
max-width: 450px; // Keep our long errors readable
|
||||
padding: 5px 8px;
|
||||
margin: $spacer1 0 0;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 3px;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 10px;
|
||||
z-index: 15;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
content: " ";
|
||||
border: solid transparent;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-left: -1px;
|
||||
border-width: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.warn {
|
||||
.warning {
|
||||
color: $flash-text-yellow;
|
||||
background-color: $flash-bg-yellow;
|
||||
border-color: $flash-border-yellow;
|
||||
|
||||
&::after {
|
||||
border-bottom-color: $flash-bg-yellow;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-bottom-color: $flash-border-yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.errored {
|
||||
label {
|
||||
color: $text-red;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $flash-text-red;
|
||||
background-color: $flash-bg-red;
|
||||
border-color: $flash-border-red;
|
||||
|
||||
&::after {
|
||||
border-bottom-color: $flash-bg-red;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-bottom-color: $flash-border-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.note {
|
||||
min-height: 17px;
|
||||
margin: 4px 0 2px;
|
||||
font-size: 12px;
|
||||
color: $text-gray;
|
||||
|
||||
.spinner {
|
||||
margin-right: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
40
scss/_form-select.scss
Normal file
40
scss/_form-select.scss
Normal file
@ -0,0 +1,40 @@
|
||||
// Custom select
|
||||
//
|
||||
// Apply `.select` to any `<select>` element for custom styles.
|
||||
.form-select {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
// IE9 hacks to reduce padding
|
||||
// scss-lint:disable DuplicateProperty
|
||||
padding-right: 24px;
|
||||
padding-right: 8px \9;
|
||||
// scss-lint:enable DuplicateProperty
|
||||
background: $bg-white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 8px center;
|
||||
// IE9 hacks to hide the background-image
|
||||
background-image: none \9;
|
||||
background-size: 8px 10px;
|
||||
// Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec.
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
// Hides the default caret in IE11
|
||||
&::-ms-expand {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:not([multiple]) {
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-sm {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
font-size: 12px;
|
||||
|
||||
&:not([multiple]) {
|
||||
height: 26px;
|
||||
min-height: 26px;
|
||||
}
|
||||
}
|
||||
368
scss/_forms.scss
368
scss/_forms.scss
@ -16,14 +16,7 @@ label {
|
||||
}
|
||||
|
||||
.form-control,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
select,
|
||||
textarea {
|
||||
.form-select {
|
||||
min-height: 34px;
|
||||
padding: 7px 8px;
|
||||
font-size: 13px;
|
||||
@ -32,7 +25,7 @@ textarea {
|
||||
background-color: $bg-white;
|
||||
background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
|
||||
background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid $border-gray-dark;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
@ -40,33 +33,25 @@ textarea {
|
||||
&.focus,
|
||||
&:focus {
|
||||
border-color: #51a7e8;
|
||||
outline: none;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
&:not([multiple]) {
|
||||
height: 34px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// Inputs with contrast for easy light gray backgrounds against white.
|
||||
// input.class is needed here to increase specificity over input[…]
|
||||
input.input-contrast,
|
||||
.input-contrast {
|
||||
background-color: #fafafa;
|
||||
background-color: $bg-gray-light;
|
||||
|
||||
&:focus { background-color: $bg-white; }
|
||||
}
|
||||
|
||||
// Custom styling for HTML5 validation bubbles (WebKit only)
|
||||
::placeholder {
|
||||
color: #aaa;
|
||||
color: $text-gray-light;
|
||||
}
|
||||
|
||||
// Mini inputs, to match .minibutton
|
||||
input.input-mini {
|
||||
.input-sm {
|
||||
min-height: 26px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
@ -74,7 +59,7 @@ input.input-mini {
|
||||
}
|
||||
|
||||
// Large inputs
|
||||
input.input-large {
|
||||
.input-lg {
|
||||
padding: 6px 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -90,233 +75,6 @@ input.input-large {
|
||||
font-family: $mono-font;
|
||||
}
|
||||
|
||||
// Form groups
|
||||
//
|
||||
// Typical form groups - `<dl.form>` with a `<dt>` containing the label and
|
||||
// `<dd> containing the form elements.
|
||||
dl.form {
|
||||
margin: 15px 0;
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
select,
|
||||
textarea {
|
||||
background-color: #fafafa;
|
||||
|
||||
&:focus {
|
||||
background-color: $bg-white;
|
||||
}
|
||||
}
|
||||
|
||||
// The Label
|
||||
> dt {
|
||||
margin: 0 0 6px;
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
&.flattened > dt {
|
||||
float: left;
|
||||
margin: 0;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
&.flattened > dd {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
//
|
||||
// Form Elements
|
||||
//
|
||||
|
||||
> dd {
|
||||
// Text fields
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="url"] {
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
&.shorter { width: 130px; }
|
||||
|
||||
&.short { width: 250px; }
|
||||
|
||||
&.long { width: 100%; }
|
||||
}
|
||||
|
||||
// Textarea
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
|
||||
&.short {
|
||||
height: 50px;
|
||||
min-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 4px 0 0;
|
||||
|
||||
&.is-error { color: $text-red; }
|
||||
|
||||
&.is-success { color: $text-green; }
|
||||
|
||||
+ p.note {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Variants
|
||||
//
|
||||
|
||||
&.required {
|
||||
> dt > label::after {
|
||||
padding-left: 5px;
|
||||
color: #9f1006;
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
|
||||
// Form AJAX states
|
||||
//
|
||||
// Form fields that need feedback for AJAX loading, success
|
||||
// states and errored states.
|
||||
.success,
|
||||
.error,
|
||||
.indicator {
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
opacity: 0.5;
|
||||
|
||||
.indicator {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.successful {
|
||||
.success {
|
||||
display: inline;
|
||||
color: #390;
|
||||
}
|
||||
}
|
||||
|
||||
// Form validation
|
||||
//
|
||||
// Our inline errors
|
||||
|
||||
&.warn,
|
||||
&.errored {
|
||||
dd.warning,
|
||||
dd.error {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: inline-block;
|
||||
max-width: 450px; // Keep our long errors readable
|
||||
padding: 5px 8px;
|
||||
margin: 2px 0 0;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
dd.warning::after,
|
||||
dd.warning::before,
|
||||
dd.error::after,
|
||||
dd.error::before {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 10px;
|
||||
z-index: 15;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
content: " ";
|
||||
border: solid transparent;
|
||||
}
|
||||
|
||||
dd.warning::after,
|
||||
dd.error::after {
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
dd.warning::before,
|
||||
dd.error::before {
|
||||
margin-left: -1px;
|
||||
border-width: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.warn {
|
||||
dd.warning {
|
||||
color: #4e401e;
|
||||
background-color: #ffe5a7;
|
||||
border: 1px solid #e7ce94;
|
||||
|
||||
&::after {
|
||||
border-bottom-color: #ffe5a7;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-bottom-color: #cdb683;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.errored {
|
||||
> dt label {
|
||||
color: $text-red;
|
||||
}
|
||||
|
||||
dd.error {
|
||||
font-size: 13px;
|
||||
color: $text-white;
|
||||
background-color: #bf1515;
|
||||
border-color: #911;
|
||||
|
||||
&::after {
|
||||
border-bottom-color: #bf1515;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-bottom-color: #911;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.note {
|
||||
min-height: 17px;
|
||||
margin: 4px 0 2px;
|
||||
font-size: 12px;
|
||||
color: $text-gray;
|
||||
|
||||
.spinner {
|
||||
margin-right: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Checkboxes and Radiobuttons
|
||||
//
|
||||
@ -363,11 +121,11 @@ dl.form {
|
||||
margin: 15px 0;
|
||||
@include clearfix;
|
||||
|
||||
dl.form {
|
||||
.form-group {
|
||||
float: left;
|
||||
margin: 0 30px 0 0;
|
||||
|
||||
> dt {
|
||||
dt {
|
||||
label {
|
||||
display: inline-block;
|
||||
margin: 5px 0 0;
|
||||
@ -386,7 +144,7 @@ dl.form {
|
||||
margin: 28px 25px 0 -20px;
|
||||
}
|
||||
|
||||
select { margin-top: 5px; }
|
||||
.form-select { margin-top: 5px; }
|
||||
}
|
||||
|
||||
|
||||
@ -401,57 +159,6 @@ input::-webkit-inner-spin-button {
|
||||
|
||||
|
||||
// Input groups
|
||||
.input-group {
|
||||
display: table;
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"] + .btn {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// For when you want the input group to behave like inline-block.
|
||||
&.inline {
|
||||
display: inline-table;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group input,
|
||||
.input-group-button {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.input-group-button {
|
||||
width: 1%;
|
||||
vertical-align: middle; // Match the inputs
|
||||
}
|
||||
|
||||
.input-group input:first-child,
|
||||
.input-group-button:first-child .btn {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.input-group-button:first-child .btn {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.input-group input:last-child,
|
||||
.input-group-button:last-child .btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.input-group-button:last-child .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
@include clearfix;
|
||||
@ -469,62 +176,15 @@ input::-webkit-inner-spin-button {
|
||||
padding: 8px 10px;
|
||||
margin: 10px 0;
|
||||
font-size: 14px;
|
||||
color: $text-gray-dark;
|
||||
background: #ffffe2;
|
||||
border: 1px solid #e7e4c2;
|
||||
border-radius: 4px;
|
||||
color: $flash-text-yellow;
|
||||
background: $flash-bg-yellow;
|
||||
border: 1px solid $flash-border-yellow;
|
||||
border-radius: 3px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
strong { color: #000; }
|
||||
|
||||
a { font-weight: bold; }
|
||||
}
|
||||
|
||||
// Custom select
|
||||
//
|
||||
// Apply `.select` to any `<select>` element for custom styles.
|
||||
// scss-lint:disable PropertySortOrder
|
||||
.select {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
padding: 7px 24px 7px 8px;
|
||||
vertical-align: middle;
|
||||
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 8px center;
|
||||
background-size: 8px 10px;
|
||||
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.075);
|
||||
// Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec.
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
// IE9 hacks to hide the background-image and reduce padding
|
||||
padding-right: 8px \9;
|
||||
background-image: none \9;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #51a7e8;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5);
|
||||
}
|
||||
|
||||
// Hides the default caret in IE11
|
||||
&::-ms-expand {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
// scss-lint:enable PropertySortOrder
|
||||
|
||||
.select-sm {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
font-size: 12px;
|
||||
|
||||
&:not([multiple]) {
|
||||
height: 26px;
|
||||
min-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
51
scss/_input-group.scss
Normal file
51
scss/_input-group.scss
Normal file
@ -0,0 +1,51 @@
|
||||
.input-group {
|
||||
display: table;
|
||||
|
||||
.form-control {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
+ .btn {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// For when you want the input group to behave like inline-block.
|
||||
&.inline {
|
||||
display: inline-table;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group .form-control,
|
||||
.input-group-button {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.input-group-button {
|
||||
width: 1%;
|
||||
vertical-align: middle; // Match the inputs
|
||||
}
|
||||
|
||||
.input-group .form-control:first-child,
|
||||
.input-group-button:first-child .btn {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.input-group-button:first-child .btn {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.input-group .form-control:last-child,
|
||||
.input-group-button:last-child .btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.input-group-button:last-child .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
@ -18,20 +18,8 @@
|
||||
// Text hiding for image based text replacement.
|
||||
// Higher performance than -9999px because it only renders
|
||||
// the size of the actual text, not a full 9999px box.
|
||||
|
||||
@mixin hide-text() {
|
||||
overflow: hidden;
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Octicon bootstrap
|
||||
//
|
||||
// Quickly load the typography requirements for Octicons icon font.
|
||||
|
||||
@mixin icon-bootstrap($size) {
|
||||
font: normal normal #{$size}/1 "octicons";
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
@ -7,9 +7,9 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.1;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h1 { font-size: 30px; }
|
||||
@ -23,6 +23,11 @@ h6 { font-size: 11px; }
|
||||
// Body text
|
||||
// --------------------------------------------------
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 90%;
|
||||
}
|
||||
@ -49,7 +54,7 @@ blockquote {
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0;
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -48,6 +48,19 @@ $repo-private-text: #a1882b !default;
|
||||
$repo-private-bg: #fff9ea !default;
|
||||
$repo-private-icon: #e9dba5 !default;
|
||||
|
||||
// Alerts
|
||||
$flash-border-blue: #bac6d3 !default;
|
||||
$flash-bg-blue: #e2eef9 !default;
|
||||
$flash-text-blue: #246 !default;
|
||||
|
||||
$flash-border-yellow: #dfd8c2 !default;
|
||||
$flash-bg-yellow: #fff9ea !default;
|
||||
$flash-text-yellow: #4c4a42 !default;
|
||||
|
||||
$flash-border-red: #d2b2b2 !default;
|
||||
$flash-bg-red: #fcdede !default;
|
||||
$flash-text-red: #911 !default;
|
||||
|
||||
// Border colors
|
||||
$border-blue: #c5d5dd !default;
|
||||
$border-gray-dark: #ddd !default;
|
||||
|
||||
@ -19,15 +19,21 @@
|
||||
@import "base";
|
||||
@import "type";
|
||||
@import "layout";
|
||||
@import "forms";
|
||||
@import "utilities/utilities";
|
||||
|
||||
// Forms and buttons
|
||||
@import "forms";
|
||||
@import "form-select";
|
||||
@import "form-group";
|
||||
@import "buttons";
|
||||
@import "input-group";
|
||||
@import "button-group";
|
||||
|
||||
// Components
|
||||
@import "alerts";
|
||||
@import "avatars";
|
||||
@import "blankslate";
|
||||
@import "counter";
|
||||
@import "buttons";
|
||||
@import "menu";
|
||||
@import "tabnav";
|
||||
@import "filter-list";
|
||||
|
||||
@ -49,10 +49,10 @@
|
||||
//
|
||||
// Have a link you need to be gray to start, and blue on hover? Use this.
|
||||
.muted-link {
|
||||
color: $brand-gray !important;
|
||||
color: $text-gray !important;
|
||||
|
||||
&:hover {
|
||||
color: $brand-blue !important;
|
||||
color: $text-blue !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user