Remove primer-css + sassc dependency
This commit is contained in:
Teemu Patja
parent
e29dc1ae8a
commit
441ed2a022
|
|
@ -1,8 +0,0 @@
|
|||
/* General Project Styles */
|
||||
|
||||
ul, li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
/*========== Desktop First Method ========== */
|
||||
|
||||
/* Large Devices, Wide Screens */
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
/* */
|
||||
}
|
||||
|
||||
/* Medium Devices, Desktops */
|
||||
|
||||
@media (max-width: 991px) {
|
||||
/* */
|
||||
}
|
||||
|
||||
/* Small Devices, Tablets */
|
||||
|
||||
@media (max-width: 767px) {
|
||||
/* */
|
||||
}
|
||||
|
||||
/* Extra Small Devices, Phones */
|
||||
|
||||
@media (max-width: 480px) {
|
||||
/* */
|
||||
}
|
||||
|
||||
/* Custom, iPhone Retina */
|
||||
|
||||
@media (max-width: 320px) {
|
||||
/* */
|
||||
}
|
||||
|
||||
/*========== Mobile First Method ========== */
|
||||
|
||||
/* Custom, iPhone Retina */
|
||||
|
||||
@media (min-width: 320px) {
|
||||
/* */
|
||||
}
|
||||
|
||||
/* Extra Small Devices, Phones */
|
||||
|
||||
@media (min-width: 480px) {
|
||||
/* */
|
||||
}
|
||||
|
||||
/* Small Devices, Tablets */
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* */
|
||||
}
|
||||
|
||||
/* Medium Devices, Desktops */
|
||||
|
||||
@media (min-width: 992px) {
|
||||
/* */
|
||||
}
|
||||
|
||||
/* Large Devices, Wide Screens */
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
/* */
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
// Colors
|
||||
|
||||
$background-color: #eef2f5;
|
||||
|
||||
$links: #4078c0;
|
||||
$links-gray: #666;
|
||||
|
||||
$tab-active: #5fc48d;
|
||||
|
||||
$lightgray: #e5e5e5;
|
||||
|
||||
$border-color: #eee;
|
||||
|
||||
$pagination: #a187d5;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
@import "primer-css/index";
|
||||
@import "base";
|
||||
|
||||
@import "vars";
|
||||
|
||||
@import "modules/header";
|
||||
@import "modules/links";
|
||||
@import "modules/nav";
|
||||
@import "modules/pagination";
|
||||
|
||||
@import "pages/home";
|
||||
@import "pages/issues";
|
||||
|
||||
@import "screen";
|
||||
|
||||
/* ALWAYS END */
|
||||
@import "media";
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
header.main-header {
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $border-color;
|
||||
background-color: $background-color;
|
||||
.main-link {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
header.sub-header {
|
||||
margin-bottom: 20px;
|
||||
padding-top: 20px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
background-color: $background-color;
|
||||
h1 {
|
||||
color: $links-gray;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
a {
|
||||
color: $links;
|
||||
}
|
||||
svg {
|
||||
fill: #bbb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
header.main-header {
|
||||
a {
|
||||
color: $links-gray;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.meta-link {
|
||||
color: $links-gray;
|
||||
font-size: 12px;
|
||||
}
|
||||
svg {
|
||||
fill: #ccc;
|
||||
}
|
||||
.octicon {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
margin-right: 2px;
|
||||
color: #ccc;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.repo-item-stats {
|
||||
a {
|
||||
margin-left: 8px;
|
||||
color: #888;
|
||||
text-decoration: none;
|
||||
svg {
|
||||
fill: #888;
|
||||
}
|
||||
&:hover {
|
||||
color: $links;
|
||||
svg {
|
||||
fill: $links;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-row-link {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: $links;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
.tabnav {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.tabnav-tab {
|
||||
padding: 8px 15px 11px;
|
||||
&.selected {
|
||||
border-width: 3px 1px 1px;
|
||||
border-color: $tab-active $lightgray transparent;
|
||||
font-weight: bold;
|
||||
svg {
|
||||
fill: #000;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-condensed {
|
||||
padding: 7px 13px 8px;
|
||||
color: #666;
|
||||
svg {
|
||||
fill: #bbb;
|
||||
}
|
||||
&.selected {
|
||||
color: #111;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.tabnav-actions {
|
||||
&.logged-in .tabnav-button {
|
||||
margin-right: -5px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.auto-search-group {
|
||||
input {
|
||||
border-radius: 0 3px 3px 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.octicon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
.paginate-container {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: inline-block;
|
||||
&::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.disabled, .disabled:hover {
|
||||
background-color: $background-color;
|
||||
color: #d3d3d3;
|
||||
cursor: default;
|
||||
}
|
||||
span:first-child {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
a:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
.current, .current:hover {
|
||||
z-index: 3;
|
||||
border-color: $pagination;
|
||||
background-color: $pagination;
|
||||
color: #fff;
|
||||
}
|
||||
a, span, em {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-left: -1px;
|
||||
padding: 7px 12px;
|
||||
border: 1px solid #e5e5e5;
|
||||
background: #fff;
|
||||
color: $pagination;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
.gap {
|
||||
background-color: #fafafa;
|
||||
color: #d3d3d3;
|
||||
cursor: default;
|
||||
&:hover {
|
||||
background-color: #fafafa;
|
||||
color: #d3d3d3;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,419 +0,0 @@
|
|||
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/**
|
||||
* 1. Change the default font family in all browsers (opinionated).
|
||||
* 2. Prevent adjustments of font size after orientation changes in IE and iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
* 2. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details, /* 1 */
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
main, /* 2 */
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
template, /* 1 */
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the outline on focused links when they are also active or hovered
|
||||
* in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change font properties to `inherit` in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the font weight unset by the previous rule.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the border, margin, and padding in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the text style of placeholders in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
h1.main-title {
|
||||
color: #333;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.flex-table-item {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.auto-search-group {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
fill: #bbb;
|
||||
}
|
||||
input {
|
||||
padding-left: 30px;
|
||||
width: 100%;
|
||||
background-color: $background-color;
|
||||
&:focus {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
form {
|
||||
margin-left: -7px;
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
.filters-search {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
.select-menu-button {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
color: #555;
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 4px solid;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
content: "";
|
||||
vertical-align: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.repo-item {
|
||||
position: relative;
|
||||
padding: 30px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.repo-item-stats {
|
||||
float: right;
|
||||
margin-top: 6px;
|
||||
color: #888;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.repo-item-description {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0;
|
||||
max-width: 550px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.repo-item-meta {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0;
|
||||
color: #888;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.members-box {
|
||||
float: right;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 20px;
|
||||
padding: 15px;
|
||||
max-width: 280px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.members-stats {
|
||||
float: right;
|
||||
margin-top: 3px;
|
||||
color: #767676;
|
||||
font-size: 14px;
|
||||
svg {
|
||||
fill: #767676;
|
||||
}
|
||||
}
|
||||
|
||||
.members-link {
|
||||
display: block;
|
||||
padding-bottom: 15px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
&:hover {
|
||||
color: $links;
|
||||
text-decoration: none;
|
||||
.members-stats {
|
||||
color: $links;
|
||||
text-decoration: none;
|
||||
}
|
||||
svg {
|
||||
fill: $links;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.member-avatar-group {
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
float: left;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
@ -1,159 +0,0 @@
|
|||
.pagehead-actions {
|
||||
position: relative;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subnav-search {
|
||||
position: relative;
|
||||
svg {
|
||||
fill: #bbb;
|
||||
}
|
||||
}
|
||||
|
||||
.subnav-links {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.table-list-header {
|
||||
border-bottom: 1px solid $lightgray;
|
||||
background-color: #f8f8f8;
|
||||
.btn-link {
|
||||
padding-top: 13px;
|
||||
padding-right: 15px;
|
||||
padding-bottom: 13px;
|
||||
color: #767676;
|
||||
text-decoration: none;
|
||||
svg {
|
||||
fill: #767676;
|
||||
}
|
||||
&:hover {
|
||||
color: #222;
|
||||
svg {
|
||||
fill: #222;
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
color: #222;
|
||||
font-weight: bold;
|
||||
svg {
|
||||
fill: #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-menu-button {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
color: #767676;
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 4px solid;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
content: "";
|
||||
vertical-align: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.issues-list-table {
|
||||
border: 1px solid $lightgray;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.issues-list, .issue {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.issue {
|
||||
border-top: 1px solid $border-color;
|
||||
a.muted-link {
|
||||
color: #767676;
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
&:hover {
|
||||
color: $links;
|
||||
svg {
|
||||
fill: $links;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.octicon {
|
||||
&.open {
|
||||
color: #6cc644;
|
||||
|
||||
fill: #6cc644;
|
||||
}
|
||||
&.closed {
|
||||
color: #bd2c00;
|
||||
|
||||
fill: #bd2c00;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.opened-by {
|
||||
a {
|
||||
color: inherit;
|
||||
&:hover {
|
||||
color: $links;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.labels {
|
||||
a.label {
|
||||
display: inline-block;
|
||||
padding: 3px 4px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.issue-meta-section {
|
||||
margin-right: 10px;
|
||||
.octicon {
|
||||
color: #ccc;
|
||||
vertical-align: bottom;
|
||||
|
||||
fill: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.task-progress {
|
||||
color: #767676;
|
||||
text-decoration: none;
|
||||
.progress-bar {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
height: 5px;
|
||||
background-color: #eee;
|
||||
vertical-align: 2px;
|
||||
.progress {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background-color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.issue-milestone {
|
||||
max-width: 240px;
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
/*!
|
||||
* Primer
|
||||
* http://primercss.io
|
||||
*
|
||||
* Released under MIT license. Copyright 2015 GitHub, Inc.
|
||||
*/
|
||||
// Primer master file
|
||||
//
|
||||
// Imports all Primer files in their intended order for easy mass-inclusion.
|
||||
// Should you need specific files, you can easily use separate `@import`s.
|
||||
// Global requirements
|
||||
@import "primer-support/index.scss";
|
||||
@import "primer-base/index.scss";
|
||||
@import "primer-utilities/index.scss";
|
||||
@import "primer-forms/index.scss";
|
||||
@import "primer-layout/index.scss";
|
||||
@import "primer-buttons/index.scss";
|
||||
@import "primer-alerts/index.scss";
|
||||
@import "primer-avatars/index.scss";
|
||||
@import "primer-blankslate/index.scss";
|
||||
@import "primer-navigation/index.scss";
|
||||
@import "primer-states/index.scss";
|
||||
@import "primer-tooltips/index.scss";
|
||||
@import "primer-markdown/index.scss";
|
||||
@import "primer-flex-table/index.scss";
|
||||
@import "primer-truncate/index.scss";
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// support files
|
||||
@import "../primer-support/index.scss";
|
||||
@import "./lib/flash.scss";
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
// Default flash
|
||||
.flash {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: $flash-text-blue;
|
||||
background-color: $flash-bg-blue;
|
||||
border: 1px solid $flash-border-blue;
|
||||
border-radius: 3px;
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Contain the flash messages
|
||||
.flash-messages {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
// Close button
|
||||
.flash-close {
|
||||
float: right;
|
||||
width: 34px;
|
||||
height: 44px;
|
||||
margin: -11px;
|
||||
line-height: 40px;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
// Undo `<button>` styles
|
||||
background: none;
|
||||
border: 0;
|
||||
appearance: none;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Action button
|
||||
.flash-action {
|
||||
float: right;
|
||||
margin-top: -4px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
//
|
||||
// Variations
|
||||
//
|
||||
|
||||
.flash-warn {
|
||||
color: $flash-text-yellow;
|
||||
background-color: $flash-bg-yellow;
|
||||
border-color: $flash-border-yellow;
|
||||
}
|
||||
|
||||
.flash-error {
|
||||
color: $flash-text-red;
|
||||
background-color: $flash-bg-red;
|
||||
border-color: $flash-border-red;
|
||||
}
|
||||
|
||||
.flash-full {
|
||||
margin-top: -1px;
|
||||
border-width: 1px 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.flash-with-icon {
|
||||
.container {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.flash-icon {
|
||||
float: left;
|
||||
margin-top: 3px;
|
||||
margin-left: -25px;
|
||||
}
|
||||
}
|
||||
|
||||
// Content within
|
||||
//
|
||||
// Reset margins on headings and paragraphs within alerts.
|
||||
.flash-content {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.warning {
|
||||
padding: 0.5em;
|
||||
margin-bottom: 0.8em;
|
||||
font-weight: bold;
|
||||
background-color: #fffccc;
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
@import "../primer-support/index.scss";
|
||||
|
||||
// Avatars
|
||||
@import "./lib/avatar.scss";
|
||||
@import "./lib/avatar-parent-child.scss";
|
||||
@import "./lib/avatar-stack.scss";
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
// .avatar-parent-child is when you see a small avatar at the bottom right
|
||||
// corner of a larger avatar.
|
||||
//
|
||||
// No Styleguide version
|
||||
.avatar-parent-child {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar-child {
|
||||
position: absolute;
|
||||
right: -15%;
|
||||
bottom: -9%;
|
||||
background-color: $bg-white; // For transparent backgrounds
|
||||
border-radius: 2px;
|
||||
box-shadow: -2px -2px 0 rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
// Stacked avatars can be used to show who is participating in thread when
|
||||
// there is limited space available.
|
||||
//
|
||||
// No styleguide references
|
||||
.avatar-stack {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: -15px;
|
||||
background-color: #fff;
|
||||
border-right: 1px solid #fff;
|
||||
border-radius: 2px;
|
||||
transition: margin 0.1s ease-in-out;
|
||||
|
||||
&:first-child {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
z-index: 1;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// When more than one avatar, margin-left will animate from -15 to 2, and reveal the stack
|
||||
&:hover .avatar {
|
||||
margin-right: 3px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
.avatar {
|
||||
display: inline-block;
|
||||
overflow: hidden; // Ensure page layout in Firefox should images fail to load
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.avatar-small { border-radius: 2px; }
|
||||
|
||||
.avatar-link {
|
||||
float: left;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// User for example on /stars and /user for grids of avatars
|
||||
.avatar-group-item {
|
||||
display: inline-block;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import "../primer-support/index.scss";
|
||||
@import "../../normalize.css/normalize";
|
||||
@import "./lib/base.scss";
|
||||
@import "./lib/typography-base.scss";
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $body-font;
|
||||
font-size: $body-font-size;
|
||||
line-height: $body-line-height;
|
||||
color: $text-gray-dark;
|
||||
background-color: $bg-white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $text-blue;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
// Horizontal lines
|
||||
//
|
||||
// TODO-MDO: Remove `.rule` from everywhere and replace with `<hr>`s
|
||||
hr,
|
||||
.rule {
|
||||
height: 0;
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
//
|
||||
// Remove most spacing between table cells.
|
||||
//
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
// Headings
|
||||
// --------------------------------------------------
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1 { @include h1; }
|
||||
h2 { @include h2; }
|
||||
h3 { @include h3; }
|
||||
h4 { @include h4; }
|
||||
h5 { @include h5; }
|
||||
h6 { @include h6; }
|
||||
|
||||
// Body text
|
||||
// --------------------------------------------------
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Lists
|
||||
// --------------------------------------------------
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
ul ul ol,
|
||||
ul ol ol,
|
||||
ol ul ol,
|
||||
ol ol ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Code
|
||||
// --------------------------------------------------
|
||||
|
||||
tt,
|
||||
code {
|
||||
font-family: $mono-font;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font: 12px $mono-font;
|
||||
}
|
||||
|
||||
// Octicons
|
||||
// --------------------------------------------------
|
||||
|
||||
// Move this over here as a temporary override to the octicons source repo
|
||||
// instead of updating that upstream.
|
||||
.octicon {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import "./lib/blankslate.scss";
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
// stylelint-disable selector-no-qualifying-type
|
||||
.blankslate {
|
||||
position: relative;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
|
||||
|
||||
code {
|
||||
padding: 2px 5px 3px;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@import "../primer-support/index.scss";
|
||||
@import "./lib/button.scss";
|
||||
@import "./lib/button-group.scss";
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
// 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-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;
|
||||
}
|
||||
|
|
@ -1,337 +0,0 @@
|
|||
// Shared styles
|
||||
.btn {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
font-size: $body-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 20px; // Specifically not inherit or `<body>` default
|
||||
color: $text-gray-dark;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: #eee;
|
||||
background-image: linear-gradient(#fcfcfc, #eee);
|
||||
border: 1px solid #d5d5d5;
|
||||
border-radius: 3px;
|
||||
appearance: none; // Corrects inability to style clickable `input` types in iOS.
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
// Darken for just a tad more contrast against the button background
|
||||
.counter {
|
||||
text-shadow: none;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
border-color: #51a7e8;
|
||||
outline: none;
|
||||
box-shadow: 0 0 5px rgba(81, 167, 232, 0.5);
|
||||
}
|
||||
|
||||
&:focus:hover,
|
||||
&.selected:focus {
|
||||
border-color: #51a7e8;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
text-decoration: none;
|
||||
background-color: #ddd;
|
||||
background-image: linear-gradient(#eee, #ddd);
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&.zeroclipboard-is-active {
|
||||
background-color: #dcdcdc;
|
||||
background-image: none;
|
||||
border-color: #b5b5b5;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background-color: darken(#dcdcdc, 5%);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
color: rgba(102, 102, 102, 0.5);
|
||||
cursor: default;
|
||||
background-color: rgba(229, 229, 229, 0.5);
|
||||
background-image: none;
|
||||
border-color: rgba(197, 197, 197, 0.5);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Green primary button
|
||||
.btn-primary {
|
||||
color: $text-white;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
|
||||
background-color: #60b044;
|
||||
background-image: linear-gradient(#8add6d, #60b044);
|
||||
border-color: darken(#60b044, 2%);
|
||||
|
||||
.counter {
|
||||
color: #60b044;
|
||||
background-color: $bg-white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $text-white;
|
||||
background-color: darken(#60b044, 5%);
|
||||
background-image: linear-gradient(darken(#8add6d, 5%), darken(#60b044, 5%));
|
||||
border-color: #4a993e;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected {
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
|
||||
background-color: darken(#60b044, 5%);
|
||||
background-image: none;
|
||||
border-color: darken(#4a993e, 5%);
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background-color: darken(#60b044, 10%);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
color: #fefefe;
|
||||
background-color: #add39f;
|
||||
background-image: linear-gradient(#c3ecb4, #add39f);
|
||||
border-color: #b9dcac #b9dcac #a7c89b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Red danger button
|
||||
.btn-danger {
|
||||
color: #900;
|
||||
|
||||
&:hover {
|
||||
color: $text-white;
|
||||
background-color: #b33630;
|
||||
background-image: linear-gradient(#dc5f59, #b33630);
|
||||
border-color: #cd504a;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected {
|
||||
color: $text-white;
|
||||
background-color: #b33630;
|
||||
background-image: none;
|
||||
border-color: darken(#cd504a, 15%);
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background-color: darken(#b33630, 5%);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
color: #cb7f7f;
|
||||
background-color: #efefef;
|
||||
background-image: linear-gradient(#fefefe, #efefef);
|
||||
border-color: #e1e1e1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.selected {
|
||||
.counter {
|
||||
color: #b33630;
|
||||
background-color: $bg-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Outline button
|
||||
//
|
||||
// For when we need a linky-action that's not too heavy in busier
|
||||
// areas like conversation timelines.
|
||||
.btn-outline {
|
||||
color: $text-blue;
|
||||
background-color: $bg-white; // Reset default gradient backgrounds and colors
|
||||
background-image: none;
|
||||
border: 1px solid #e5e5e5;
|
||||
|
||||
.counter {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.selected,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
color: $text-white;
|
||||
background-color: $bg-blue;
|
||||
background-image: none;
|
||||
border-color: $blue;
|
||||
|
||||
.counter {
|
||||
color: $text-blue;
|
||||
background-color: $bg-white;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background-color: darken($blue, 5%);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
color: $text-gray;
|
||||
background-color: $bg-white;
|
||||
background-image: none;
|
||||
border-color: #e5e5e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Social button count
|
||||
.btn-with-count {
|
||||
float: left;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
// Minibutton overrides
|
||||
//
|
||||
// Tweak `line-height` to make them smaller.
|
||||
.btn-sm {
|
||||
padding: 3px 10px;
|
||||
font-size: $font-size-small;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
// Hidden text button
|
||||
//
|
||||
// Use `.hidden-text-expander` to indicate and expand hidden text.
|
||||
.hidden-text-expander {
|
||||
display: block;
|
||||
|
||||
&.inline {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-text-expander a,
|
||||
.ellipsis-expander {
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
padding: 0 5px 5px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 6px;
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
background: #ddd;
|
||||
border: 0;
|
||||
border-radius: 1px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $text-white;
|
||||
background-color: #4183c4;
|
||||
}
|
||||
}
|
||||
|
||||
// Social count bubble
|
||||
//
|
||||
// A container that is used for social bubbles counts.
|
||||
.social-count {
|
||||
float: left;
|
||||
padding: 3px 7px;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 20px;
|
||||
color: $text-gray-dark;
|
||||
vertical-align: middle;
|
||||
background-color: $bg-white;
|
||||
border: 1px solid #ddd;
|
||||
border-left: 0;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $text-blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Full-width button
|
||||
//
|
||||
// These buttons expand to the full width of their parent container
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Radio buttons
|
||||
//
|
||||
// Buttons backed by radio or checkbox control. Requires the use of `.hidden`
|
||||
// on the `input` to properly hide it.
|
||||
.btn-link {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: $text-blue;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
appearance: none; // Corrects inability to style clickable `input` types in iOS.
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none; // Prevents the blue ring when clicked.
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import "./lib/flex-table.scss";
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
// Flex table is a module for creating dynamically resizable elements that
|
||||
// always sit on the same horizontal line (e.g., they never wrap). Using
|
||||
// tables means it's cross browser friendly.
|
||||
|
||||
.flex-table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
// Place this on every "cell"
|
||||
.flex-table-item {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Place this on the largest or most important "cell"
|
||||
.flex-table-item-primary {
|
||||
width: 99%;
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@import "../primer-support/index.scss";
|
||||
@import "./lib/form-control.scss";
|
||||
@import "./lib/form-select.scss";
|
||||
@import "./lib/form-group.scss";
|
||||
@import "./lib/form-validation.scss";
|
||||
|
|
@ -1,192 +0,0 @@
|
|||
// Needs refactoring
|
||||
// stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors
|
||||
// Base form controls
|
||||
//
|
||||
// Overrides for common inputs for easier styling.
|
||||
|
||||
// Disable ligatures in editable areas due to https://github.com/github/github/issues/56941
|
||||
input,
|
||||
textarea {
|
||||
font-feature-settings: "liga" 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
min-height: 34px;
|
||||
padding: 6px 8px;
|
||||
font-size: $body-font-size;
|
||||
line-height: 20px;
|
||||
color: $text-gray-dark;
|
||||
vertical-align: middle;
|
||||
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 $border-gray-dark;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
|
||||
// Inputs with contrast for easy light gray backgrounds against white.
|
||||
.input-contrast {
|
||||
background-color: $bg-gray-light;
|
||||
|
||||
&:focus { background-color: $bg-white; }
|
||||
}
|
||||
|
||||
// Custom styling for HTML5 validation bubbles (WebKit only)
|
||||
::placeholder {
|
||||
color: $text-gray-light;
|
||||
}
|
||||
|
||||
// Mini inputs, to match .minibutton
|
||||
.input-sm {
|
||||
min-height: 28px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
font-size: $font-size-small;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
// Large inputs
|
||||
.input-lg {
|
||||
padding: 6px 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
// Full-width inputs
|
||||
.input-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Inputs with monospace text
|
||||
.input-monospace {
|
||||
font-family: $mono-font;
|
||||
}
|
||||
|
||||
// Checkboxes and Radiobuttons
|
||||
//
|
||||
// For checkboxes and radio button selections.
|
||||
.form-checkbox {
|
||||
padding-left: 20px;
|
||||
margin: 15px 0;
|
||||
vertical-align: middle;
|
||||
|
||||
label {
|
||||
em.highlight {
|
||||
position: relative;
|
||||
left: -4px;
|
||||
padding: 2px 4px;
|
||||
font-style: normal;
|
||||
background: #fffbdc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
float: left;
|
||||
margin: 5px 0 0 -20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.note {
|
||||
display: block;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
// Field groups
|
||||
//
|
||||
// Wrap field groups in `<div.hfields>` to lay them out horizontally - great for
|
||||
// the top of pages with autosave.
|
||||
.hfields {
|
||||
margin: 15px 0;
|
||||
@include clearfix;
|
||||
|
||||
.form-group {
|
||||
float: left;
|
||||
margin: 0 30px 0 0;
|
||||
|
||||
dt {
|
||||
label {
|
||||
display: inline-block;
|
||||
margin: 5px 0 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
float: left;
|
||||
margin: 28px 25px 0 -20px;
|
||||
}
|
||||
|
||||
.form-select { margin-top: 5px; }
|
||||
}
|
||||
|
||||
// Hide the up/down buttons in <input type="number"> in the login form, the
|
||||
// input is used for two-factor auth codes, type="number" makes it more usable
|
||||
// on phones
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
margin: 0;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
// Input groups
|
||||
|
||||
.form-actions {
|
||||
@include clearfix;
|
||||
|
||||
.btn {
|
||||
float: right;
|
||||
|
||||
+ .btn {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-warning {
|
||||
padding: 8px 10px;
|
||||
margin: 10px 0;
|
||||
font-size: 14px;
|
||||
color: $flash-text-yellow;
|
||||
background: $flash-bg-yellow;
|
||||
border: 1px solid $flash-border-yellow;
|
||||
border-radius: 3px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a { font-weight: bold; }
|
||||
}
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
// Form groups
|
||||
//
|
||||
// Typical form groups - `<dl.form-group>` with a `<dt>` containing the label and
|
||||
// `<dd> containing the form elements.
|
||||
// stylelint-disable selector-max-compound-selectors
|
||||
.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
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
textarea.form-control {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
|
||||
&.short {
|
||||
height: 50px;
|
||||
min-height: 50px;
|
||||
}
|
||||
}
|
||||
// stylelint-enable selector-no-qualifying-type
|
||||
|
||||
// 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
|
||||
//
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
dd {
|
||||
h4 {
|
||||
margin: 4px 0 0;
|
||||
|
||||
&.is-error { color: $text-red; }
|
||||
|
||||
&.is-success { color: $text-green; }
|
||||
|
||||
+ .note {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// stylelint-enable selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// 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: $spacer-1 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
// Custom select
|
||||
//
|
||||
// Apply `.select` to any `<select>` element for custom styles.
|
||||
.form-select {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
height: 34px;
|
||||
// IE9 hacks to reduce padding
|
||||
padding-right: 24px;
|
||||
padding-right: 8px \9;
|
||||
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;
|
||||
appearance: none;
|
||||
|
||||
// Hides the default caret in IE11
|
||||
&::-ms-expand {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.select-sm {
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
font-size: $font-size-small;
|
||||
|
||||
&[multiple] {
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,395 +0,0 @@
|
|||
// Needs refactoring
|
||||
// stylelint-disable selector-no-qualifying-type, selector-no-type
|
||||
dl.form-group > dd {
|
||||
.form-control {
|
||||
&.is-autocheck-loading,
|
||||
&.is-autocheck-successful,
|
||||
&.is-autocheck-errored {
|
||||
padding-right: 30px; // Leave some space for our validation icons
|
||||
}
|
||||
|
||||
&.is-autocheck-loading {
|
||||
background-image: url("/images/spinners/octocat-spinner-16px.gif");
|
||||
}
|
||||
|
||||
&.is-autocheck-successful {
|
||||
background-image: url("/images/modules/ajax/success.png");
|
||||
}
|
||||
|
||||
&.is-autocheck-errored {
|
||||
background-image: url("/images/modules/ajax/error.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Retinization of form validation icons that aren't octicons yet
|
||||
@include retina-media-query {
|
||||
dl.form-group > dd {
|
||||
.form-control {
|
||||
&.is-autocheck-loading,
|
||||
&.is-autocheck-successful,
|
||||
&.is-autocheck-errored {
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
&.is-autocheck-loading {
|
||||
background-image: url("/images/spinners/octocat-spinner-32.gif");
|
||||
}
|
||||
|
||||
&.is-autocheck-successful {
|
||||
background-image: url("/images/modules/ajax/success@2x.png");
|
||||
}
|
||||
|
||||
&.is-autocheck-errored {
|
||||
background-image: url("/images/modules/ajax/error@2x.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Credit cards
|
||||
//
|
||||
// A selector for credit cards. Shows all credit cards we have available and
|
||||
// dims the non-selected ones.
|
||||
|
||||
.form-cards {
|
||||
height: 31px;
|
||||
margin: 0 0 15px;
|
||||
|
||||
.card {
|
||||
float: left;
|
||||
width: 47px;
|
||||
height: 31px;
|
||||
text-indent: -9999px;
|
||||
background-image: url("/images/modules/pricing/credit-cards-@1x.png");
|
||||
background-position: 0 0;
|
||||
opacity: 0.6;
|
||||
|
||||
&.visa { background-position: 0 0; }
|
||||
|
||||
&.amex { background-position: -50px 0; }
|
||||
|
||||
&.mastercard { background-position: -100px 0; }
|
||||
|
||||
&.discover { background-position: -150px 0; }
|
||||
|
||||
&.jcb { background-position: -200px 0; }
|
||||
|
||||
&.dinersclub { background-position: -250px 0; }
|
||||
|
||||
&.enabled { opacity: 1; }
|
||||
|
||||
&.disabled { opacity: 0.2; }
|
||||
}
|
||||
|
||||
> .cards {
|
||||
margin: 0;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
margin: 0 4px 0 0;
|
||||
list-style-type: none;
|
||||
|
||||
&.text {
|
||||
line-height: 31px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include retina-media-query {
|
||||
.form-cards > .cards .card {
|
||||
background-image: url("/images/modules/pricing/credit-cards-@2x.png");
|
||||
background-size: 300px 31px;
|
||||
}
|
||||
}
|
||||
|
||||
// Inline verification
|
||||
// This overrides primer's inline form stuff
|
||||
.status-indicator {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 5px;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
.octicon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.status-indicator-success {
|
||||
width: 12px;
|
||||
margin-left: 7px;
|
||||
|
||||
// Override primer
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.octicon-check {
|
||||
display: inline-block;
|
||||
color: $green;
|
||||
fill: $green;
|
||||
}
|
||||
|
||||
.octicon-x {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.status-indicator-failed {
|
||||
margin-left: 7px;
|
||||
|
||||
// Override primer
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.octicon-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.octicon-x {
|
||||
display: inline-block;
|
||||
color: $text-red;
|
||||
fill: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.status-indicator-loading {
|
||||
width: 16px;
|
||||
background: url("/images/spinners/octocat-spinner-32-EAF2F5.gif") 0 0 no-repeat;
|
||||
background-size: 16px;
|
||||
}
|
||||
|
||||
.inline-form {
|
||||
display: inline-block;
|
||||
|
||||
.btn-plain {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Drag and drop
|
||||
//
|
||||
// Previously part of `_forms.scss` in Primer. Needs accounting for.
|
||||
|
||||
.drag-and-drop {
|
||||
padding: 7px 10px;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
color: $text-gray;
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #ccc;
|
||||
border-top: 0;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
|
||||
.default,
|
||||
.loading,
|
||||
.error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $text-red;
|
||||
}
|
||||
|
||||
// Spinner
|
||||
img {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.is-default .drag-and-drop .default {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-uploading .drag-and-drop .loading {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-bad-file .drag-and-drop .bad-file {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-duplicate-filename .drag-and-drop .duplicate-filename {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-too-big .drag-and-drop .too-big {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-hidden-file .drag-and-drop .hidden-file {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-empty .drag-and-drop .empty {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-bad-permissions .drag-and-drop .bad-permissions {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-repository-required .drag-and-drop .repository-required {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.drag-and-drop-error-info {
|
||||
font-weight: normal;
|
||||
color: $text-gray;
|
||||
|
||||
a {
|
||||
color: $text-blue;
|
||||
}
|
||||
}
|
||||
|
||||
.is-failed .drag-and-drop .failed-request {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.manual-file-chooser {
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
padding: 5px;
|
||||
margin-left: -80px;
|
||||
cursor: pointer;
|
||||
opacity: 0.0001;
|
||||
}
|
||||
|
||||
.manual-file-chooser:hover + .manual-file-chooser-text {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.btn {
|
||||
// align manual-file-chooser inside a button
|
||||
.manual-file-chooser {
|
||||
top: 0;
|
||||
padding: 0;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
// Focused Textarea styles
|
||||
.upload-enabled textarea {
|
||||
display: block;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.focused .drag-and-drop {
|
||||
border-color: #51a7e8;
|
||||
box-shadow: rgba(#51a7e8, 0.5) 0 0 3px;
|
||||
}
|
||||
|
||||
// Dropping a file on top
|
||||
.dragover textarea,
|
||||
.dragover .drag-and-drop {
|
||||
box-shadow: rgba(#c9ff00, 1) 0 0 3px;
|
||||
}
|
||||
|
||||
.write-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Form style with a write and a preview tab
|
||||
.previewable-comment-form {
|
||||
position: relative;
|
||||
|
||||
.tabnav {
|
||||
position: relative;
|
||||
padding: 10px 10px 0;
|
||||
}
|
||||
|
||||
.comment {
|
||||
border: 1px solid #cacaca;
|
||||
}
|
||||
|
||||
.comment-form-error { margin-bottom: 10px; }
|
||||
|
||||
.write-content,
|
||||
.preview-content {
|
||||
display: none;
|
||||
padding: 0 0 10px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
&.write-selected .write-content,
|
||||
&.preview-selected .preview-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
max-height: 500px;
|
||||
padding: 10px;
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
// Used in our boxed-group-less form styles. Give the sumbit button enough space
|
||||
// to breathe without the need for the extra hr.
|
||||
.form-action-spacious {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
// A two column form, with a .main and a .sidebar column
|
||||
//
|
||||
// Override some `.timeline-comment-wrapper` defaults.
|
||||
// The `div` is needed to be more specific than the other class.
|
||||
div.composer {
|
||||
margin-top: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Override the previewable comment form defaults
|
||||
.composer .comment-form-textarea {
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.composer .tabnav { margin: 0 0 10px; }
|
||||
|
||||
// Misc CSS
|
||||
//
|
||||
// Previously part of `_forms.scss` in Primer. Needs accounting for.
|
||||
|
||||
h2.account {
|
||||
margin: 15px 0 0;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
p.explain {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
strong {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
margin-right: 5px;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.minibutton {
|
||||
top: -4px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
// fix for chrome bug, see https://github.com/github/github/issues/53931
|
||||
.form-group label {
|
||||
position: static;
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import "../primer-support/index.scss";
|
||||
@import "./lib/container.scss";
|
||||
@import "./lib/columns.scss";
|
||||
@import "./lib/grid.scss";
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
// Grid system
|
||||
//
|
||||
// Create rows with `.columns` to clear the floated columns and outdent the
|
||||
// padding on `.column`s with negative margin for alignment.
|
||||
|
||||
.columns {
|
||||
margin-right: -$grid-gutter;
|
||||
margin-left: -$grid-gutter;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// Base class for every column (requires a column width from below)
|
||||
.column {
|
||||
float: left;
|
||||
padding-right: $grid-gutter;
|
||||
padding-left: $grid-gutter;
|
||||
}
|
||||
|
||||
// Column widths
|
||||
.one-third {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.two-thirds {
|
||||
width: 66.666667%;
|
||||
}
|
||||
|
||||
.one-fourth {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.one-half {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.three-fourths {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.one-fifth {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.four-fifths {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
// Single column hack
|
||||
.single-column {
|
||||
padding-right: $grid-gutter;
|
||||
padding-left: $grid-gutter;
|
||||
}
|
||||
|
||||
// Equal width columns via table sorcery.
|
||||
.table-column {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
padding-right: $grid-gutter;
|
||||
padding-left: $grid-gutter;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
// Centers content horizontally. Can be used inside or outside the grid.
|
||||
.centered {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
// Fixed-width, centered column for site content.
|
||||
// This will be deprecated and replaced with container-lg in future
|
||||
.container {
|
||||
width: $container-width;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// Handy container styles that match our breakpoints
|
||||
// 768px
|
||||
.container-md {
|
||||
max-width: $container-md;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// 1004px - this matches the current fixed width: 980px + padding: px-3
|
||||
.container-lg {
|
||||
max-width: $container-lg;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// 1280px
|
||||
.container-xl {
|
||||
max-width: $container-xl;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
@include clearfix;
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
// Optional offset options to work with grid.scss
|
||||
|
||||
// Offset Columns
|
||||
.offset-1 { margin-left: (1 / 12 * 100%); }
|
||||
.offset-2 { margin-left: (2 / 12 * 100%); }
|
||||
.offset-3 { margin-left: (3 / 12 * 100%); }
|
||||
.offset-4 { margin-left: (4 / 12 * 100%); }
|
||||
.offset-5 { margin-left: (5 / 12 * 100%); }
|
||||
.offset-6 { margin-left: (6 / 12 * 100%); }
|
||||
.offset-7 { margin-left: (7 / 12 * 100%); }
|
||||
.offset-8 { margin-left: (8 / 12 * 100%); }
|
||||
.offset-9 { margin-left: (9 / 12 * 100%); }
|
||||
.offset-10 { margin-left: (10 / 12 * 100%); }
|
||||
.offset-11 { margin-left: (11 / 12 * 100%); }
|
||||
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
@include breakpoint($breakpoint) {
|
||||
.offset-#{$breakpoint}-1 { margin-left: (1 / 12 * 100%); }
|
||||
.offset-#{$breakpoint}-2 { margin-left: (2 / 12 * 100%); }
|
||||
.offset-#{$breakpoint}-3 { margin-left: (3 / 12 * 100%); }
|
||||
.offset-#{$breakpoint}-4 { margin-left: (4 / 12 * 100%); }
|
||||
.offset-#{$breakpoint}-5 { margin-left: (5 / 12 * 100%); }
|
||||
.offset-#{$breakpoint}-6 { margin-left: (6 / 12 * 100%); }
|
||||
.offset-#{$breakpoint}-7 { margin-left: (7 / 12 * 100%); }
|
||||
.offset-#{$breakpoint}-8 { margin-left: (8 / 12 * 100%); }
|
||||
.offset-#{$breakpoint}-9 { margin-left: (9 / 12 * 100%); }
|
||||
.offset-#{$breakpoint}-10 { margin-left: (10 / 12 * 100%); }
|
||||
.offset-#{$breakpoint}-11 { margin-left: (11 / 12 * 100%); }
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
// GRID
|
||||
// stylelint-disable block-closing-brace-newline-after, declaration-block-properties-order, declaration-block-semicolon-newline-after, declaration-block-single-line-max-declarations
|
||||
|
||||
// Columns
|
||||
.col-1 { width: (1 / 12 * 100%); }
|
||||
.col-2 { width: (2 / 12 * 100%); }
|
||||
.col-3 { width: (3 / 12 * 100%); }
|
||||
.col-4 { width: (4 / 12 * 100%); }
|
||||
.col-5 { width: (5 / 12 * 100%); }
|
||||
.col-6 { width: (6 / 12 * 100%); }
|
||||
.col-7 { width: (7 / 12 * 100%); }
|
||||
.col-8 { width: (8 / 12 * 100%); }
|
||||
.col-9 { width: (9 / 12 * 100%); }
|
||||
.col-10 { width: (10 / 12 * 100%); }
|
||||
.col-11 { width: (11 / 12 * 100%); }
|
||||
.col-12 { width: 100%; }
|
||||
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
@include breakpoint($breakpoint) {
|
||||
.col-#{$breakpoint}-1 { width: ( 1 / 12 * 100%); }
|
||||
.col-#{$breakpoint}-2 { width: ( 2 / 12 * 100%); }
|
||||
.col-#{$breakpoint}-3 { width: ( 3 / 12 * 100%); }
|
||||
.col-#{$breakpoint}-4 { width: ( 4 / 12 * 100%); }
|
||||
.col-#{$breakpoint}-5 { width: ( 5 / 12 * 100%); }
|
||||
.col-#{$breakpoint}-6 { width: ( 6 / 12 * 100%); }
|
||||
.col-#{$breakpoint}-7 { width: ( 7 / 12 * 100%); }
|
||||
.col-#{$breakpoint}-8 { width: ( 8 / 12 * 100%); }
|
||||
.col-#{$breakpoint}-9 { width: ( 9 / 12 * 100%); }
|
||||
.col-#{$breakpoint}-10 { width: ( 10 / 12 * 100%); }
|
||||
.col-#{$breakpoint}-11 { width: ( 11 / 12 * 100%); }
|
||||
.col-#{$breakpoint}-12 { width: 100%; }
|
||||
}
|
||||
}
|
||||
|
||||
// Gutters apply padding and a negative margin to the outside of the container
|
||||
@mixin gutters ($gutter-width: $spacer3) {
|
||||
margin-right: -$gutter-width;
|
||||
margin-left: -$gutter-width;
|
||||
|
||||
> [class*="col-"] {
|
||||
padding-right: $gutter-width !important;
|
||||
padding-left: $gutter-width !important;
|
||||
}
|
||||
}
|
||||
|
||||
.gut-sm { @include gutters($spacer-2); }
|
||||
.gut-md { @include gutters($spacer-3); }
|
||||
.gut-lg { @include gutters($spacer-4); }
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@import "../primer-support/index.scss";
|
||||
@import "./lib/markdown-body.scss";
|
||||
@import "./lib/headings.scss";
|
||||
@import "./lib/lists.scss";
|
||||
@import "./lib/tables.scss";
|
||||
@import "./lib/images.scss";
|
||||
@import "./lib/code.scss";
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
.markdown-body {
|
||||
// Inline code snippets
|
||||
code,
|
||||
tt {
|
||||
padding: 0;
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.2em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
border-radius: 3px; // don't add padding, gives scrollbars
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
letter-spacing: -0.2em; // this creates padding
|
||||
content: "\00a0";
|
||||
}
|
||||
|
||||
br { display: none; }
|
||||
}
|
||||
|
||||
del code { text-decoration: inherit; }
|
||||
|
||||
pre {
|
||||
word-wrap: normal;
|
||||
|
||||
// Code tags within code blocks (<pre>s)
|
||||
> code {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
word-break: normal;
|
||||
white-space: pre;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
margin-bottom: $margin;
|
||||
|
||||
pre {
|
||||
margin-bottom: 0;
|
||||
word-break: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight pre,
|
||||
pre {
|
||||
padding: $margin;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre code,
|
||||
pre tt {
|
||||
display: inline;
|
||||
max-width: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
line-height: inherit;
|
||||
word-wrap: normal;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
// Needs refactoring
|
||||
// stylelint-disable selector-max-compound-selectors, selector-max-specificity
|
||||
.markdown-body {
|
||||
// Headings
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: ($margin * 1.5);
|
||||
margin-bottom: $margin;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: $lh-condensed;
|
||||
|
||||
.octicon-link {
|
||||
color: #000;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover .anchor {
|
||||
text-decoration: none;
|
||||
|
||||
.octicon-link {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
tt,
|
||||
code {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.85em;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
// Need to target base styles
|
||||
// stylelint-disable selector-max-compound-selectors, selector-no-qualifying-type, primer/selector-no-utility
|
||||
.markdown-body {
|
||||
// Images & Stuff
|
||||
img {
|
||||
max-width: 100%;
|
||||
// because we put padding on the images to hide header lines, and some people
|
||||
// specify the width of their images in their markdown.
|
||||
box-sizing: content-box;
|
||||
background-color: #fff;
|
||||
|
||||
&[align=right] {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
&[align=left] {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji {
|
||||
max-width: none;
|
||||
vertical-align: text-top;
|
||||
// Override `<img>` styles so Emjois don't clash with zebra striping in our tables
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Gollum Image Tags
|
||||
|
||||
// Framed
|
||||
span.frame {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
float: left;
|
||||
width: auto;
|
||||
padding: 7px;
|
||||
margin: 13px 0 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
span img {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
span span {
|
||||
display: block;
|
||||
padding: 5px 0 0;
|
||||
clear: both;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
span.align-center {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
margin: 13px auto 0;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
span img {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
span.align-right {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
margin: 13px 0 0;
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span img {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
span.float-left {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 13px;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
margin: 13px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
span.float-right {
|
||||
display: block;
|
||||
float: right;
|
||||
margin-left: 13px;
|
||||
overflow: hidden;
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
margin: 13px auto 0;
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
// Base styles
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
.markdown-body {
|
||||
|
||||
// Lists, Blockquotes & Such
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
|
||||
&.no-list {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Did someone complain about list spacing? Encourage them
|
||||
// to create the spacing with their markdown formatting.
|
||||
// List behavior should be controled by the markup, not the css.
|
||||
//
|
||||
// For lists with padding between items, use blank
|
||||
// lines between items. This will generate paragraphs with
|
||||
// padding to space things out.
|
||||
//
|
||||
// - item
|
||||
//
|
||||
// - item
|
||||
//
|
||||
// - item
|
||||
//
|
||||
// For list without padding, don't use blank lines.
|
||||
//
|
||||
// - item
|
||||
// - item
|
||||
// - item
|
||||
//
|
||||
// Modifying the css to emulate these behaviors merely brakes
|
||||
// one case in the process of solving another. Don't change
|
||||
// this unless it's really really a bug.
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li > p {
|
||||
margin-top: $margin;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 0;
|
||||
|
||||
dt {
|
||||
padding: 0;
|
||||
margin-top: $margin;
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
padding: 0 $margin;
|
||||
margin-bottom: $margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
// All of our block level items should have the same margin
|
||||
$margin: 16px;
|
||||
|
||||
// This is styling for generic markdownized text. Anything you put in a
|
||||
// container with .markdown-body on it should render generally well. It also
|
||||
// includes some GitHub Flavored Markdown specific styling (like @mentions)
|
||||
.markdown-body {
|
||||
font-family: $body-font;
|
||||
font-size: 16px;
|
||||
line-height: $body-line-height;
|
||||
word-wrap: break-word;
|
||||
|
||||
// Clearfix on the markdown body
|
||||
&::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
> *:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
> *:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
// Anchors like <a name="examples">. These sometimes end up wrapped around
|
||||
// text when users mistakenly forget to close the tag or use self-closing tag
|
||||
// syntax. We don't want them to appear like links.
|
||||
// FIXME: a:not(:link):not(:visited) would be a little clearer here (and
|
||||
// possibly faster to match), but it breaks styling of <a href> elements due
|
||||
// to https://bugs.webkit.org/show_bug.cgi?id=142737.
|
||||
a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Link Colors
|
||||
.absent {
|
||||
color: #c00;
|
||||
}
|
||||
|
||||
.anchor {
|
||||
float: left;
|
||||
padding-right: 4px;
|
||||
margin-left: -20px;
|
||||
line-height: 1;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
blockquote,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
table,
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: $margin;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0.25em;
|
||||
padding: 0;
|
||||
margin: ($margin * 1.5) 0;
|
||||
background-color: #e7e7e7;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 0 1em;
|
||||
color: #777;
|
||||
border-left: 0.25em solid #ddd;
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #555;
|
||||
vertical-align: middle;
|
||||
background-color: #fcfcfc;
|
||||
border: solid 1px #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbb;
|
||||
}
|
||||
|
||||
.loweralpha {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
// Needs refactoring
|
||||
.markdown-body {
|
||||
// Tables
|
||||
table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
// For Firefox to horizontally scroll wider tables.
|
||||
word-break: normal;
|
||||
word-break: keep-all;
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@import "../primer-support/index.scss";
|
||||
// Navigation
|
||||
@import "./lib/counter.scss";
|
||||
@import "./lib/menu.scss";
|
||||
@import "./lib/tabnav.scss";
|
||||
@import "./lib/filter-list.scss";
|
||||
@import "./lib/subnav.scss";
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
.counter {
|
||||
display: inline-block;
|
||||
padding: 2px 5px;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 1;
|
||||
color: #666;
|
||||
background-color: #eee;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
// Filters list
|
||||
//
|
||||
// A vertical list of filters.
|
||||
.filter-list {
|
||||
list-style-type: none;
|
||||
|
||||
&.small .filter-item {
|
||||
padding: 4px 10px;
|
||||
margin: 0 0 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&.pjax-active .filter-item {
|
||||
color: $text-gray;
|
||||
background-color: transparent;
|
||||
|
||||
&.pjax-active {
|
||||
color: $text-white;
|
||||
background-color: $bg-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 5px;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
color: $text-gray;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $text-white;
|
||||
background-color: $bg-blue;
|
||||
}
|
||||
|
||||
.count {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bar {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 0;
|
||||
bottom: 2px;
|
||||
z-index: -1;
|
||||
display: inline-block;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
// Side menu
|
||||
//
|
||||
// A menu on the side of a page, defaults to left side. e.g. github.com/about
|
||||
|
||||
.menu {
|
||||
margin-bottom: 15px;
|
||||
list-style: none;
|
||||
background-color: $bg-white;
|
||||
border: 1px solid #d8d8d8;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 8px 10px;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
|
||||
&::before { border-top-left-radius: 2px; }
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
|
||||
&::before { border-bottom-left-radius: 2px; }
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
cursor: default;
|
||||
background-color: $bg-white;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
content: "";
|
||||
background-color: #d26911;
|
||||
}
|
||||
}
|
||||
|
||||
.octicon {
|
||||
width: 16px;
|
||||
margin-right: 5px;
|
||||
color: $text-gray-dark;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.counter {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.menu-warning {
|
||||
float: right;
|
||||
color: #d26911;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&.alert {
|
||||
.counter {
|
||||
color: $text-red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-heading {
|
||||
display: block;
|
||||
padding: 8px 10px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
color: #555;
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
// Needs refactoring
|
||||
// Sub nav
|
||||
.subnav {
|
||||
margin-bottom: 20px;
|
||||
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.subnav-bordered {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.subnav-flush {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.subnav-item {
|
||||
position: relative;
|
||||
float: left;
|
||||
padding: 6px 14px;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 20px;
|
||||
color: #666;
|
||||
border: 1px solid #e5e5e5;
|
||||
|
||||
+ .subnav-item {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&.selected:hover,
|
||||
&.selected:focus {
|
||||
z-index: 2;
|
||||
color: #fff;
|
||||
background-color: $bg-blue;
|
||||
border-color: $blue;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.subnav-search {
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.subnav-search-input {
|
||||
width: 320px;
|
||||
padding-left: 30px;
|
||||
color: $text-gray;
|
||||
border-color: #d5d5d5;
|
||||
}
|
||||
|
||||
.subnav-search-input-wide {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.subnav-search-icon {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 8px;
|
||||
display: block;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.subnav-search-context {
|
||||
.btn {
|
||||
color: #555;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.selected {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
+ .subnav-search {
|
||||
margin-left: -1px;
|
||||
|
||||
.subnav-search-input {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.select-menu-modal-holder {
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.select-menu-modal {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.select-menu-item-icon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.subnav-spacer-right {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
// Outer wrapper
|
||||
.tabnav {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
.counter {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabnav-tabs {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.tabnav-tab {
|
||||
display: inline-block;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-bottom: 0;
|
||||
|
||||
&.selected {
|
||||
color: $text-gray-dark;
|
||||
background-color: $bg-white;
|
||||
border-color: #ddd;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabnav extras
|
||||
//
|
||||
// Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
|
||||
// inline text or links.
|
||||
|
||||
.tabnav-extra {
|
||||
display: inline-block;
|
||||
padding-top: 10px;
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
> .octicon {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// When tabnav-extra are anchors
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
a.tabnav-extra:hover {
|
||||
color: $text-blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
// stylelint-enable selector-no-qualifying-type
|
||||
|
||||
// Tabnav buttons
|
||||
//
|
||||
// For when there are multiple buttons, space them out appropriately. Requires
|
||||
// the buttons to be floated or inline-block.
|
||||
|
||||
.tabnav-btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import "../primer-support/index.scss";
|
||||
@import "./lib/states.scss";
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
// A rounded corner box containing a label "open" or "closed"
|
||||
// Without a state it is grey.
|
||||
//
|
||||
// open - $green background
|
||||
// reopened - $green background
|
||||
// closed - $red background
|
||||
// merged - $purple background
|
||||
// renamed - $orange background
|
||||
//
|
||||
// No styleguide reference
|
||||
.state {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 20px;
|
||||
color: $text-white;
|
||||
text-align: center;
|
||||
background-color: $gray-light;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.state-open,
|
||||
.state-proposed,
|
||||
.state-reopened {
|
||||
background-color: $bg-green;
|
||||
}
|
||||
|
||||
.state-merged { background-color: $bg-purple; }
|
||||
|
||||
.state-closed { background-color: $bg-red; }
|
||||
|
||||
.state-renamed { background-color: $status-renamed; }
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
// variables
|
||||
@import "./lib/variables.scss";
|
||||
|
||||
// mixins
|
||||
@import "./lib/mixins/typography.scss";
|
||||
@import "./lib/mixins/layout.scss";
|
||||
@import "./lib/mixins/misc.scss";
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
// Responsive media queries
|
||||
|
||||
@mixin breakpoint($breakpoint) {
|
||||
// Retrieves the value from the key
|
||||
$value: map-get($breakpoints, $breakpoint);
|
||||
|
||||
// If the key exists in the map
|
||||
@if $value != null {
|
||||
// Prints a media query based on the value
|
||||
@media (min-width: $value) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// If the key doesn't exist in the map
|
||||
@else {
|
||||
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
||||
+ "Please make sure it is defined in `$breakpoints` map.";
|
||||
}
|
||||
}
|
||||
|
||||
// Retina media query
|
||||
|
||||
@mixin retina-media-query {
|
||||
@media
|
||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
only screen and (min--moz-device-pixel-ratio: 2),
|
||||
only screen and (-moz-min-device-pixel-ratio: 2),
|
||||
only screen and (-o-min-device-pixel-ratio: 2/1),
|
||||
only screen and (min-device-pixel-ratio: 2),
|
||||
only screen and (min-resolution: 192dpi),
|
||||
only screen and (min-resolution: 2dppx) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Clearfix
|
||||
//
|
||||
// Clears floats via mixin.
|
||||
|
||||
@mixin clearfix {
|
||||
&::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
// Generate a two-color caret for any element.
|
||||
@mixin double-caret($foreground: #fff, $background: #ddd) {
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 100%;
|
||||
left: -16px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
content: " ";
|
||||
border-color: transparent;
|
||||
border-style: solid solid outset;
|
||||
}
|
||||
|
||||
&::after {
|
||||
margin-top: 1px;
|
||||
margin-left: 2px;
|
||||
border-width: 7px;
|
||||
border-right-color: $foreground;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-width: 8px;
|
||||
border-right-color: $background;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
// 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;
|
||||
}
|
||||
|
||||
// Heading mixins for use within components
|
||||
// These match heading utilities in utilities/typography
|
||||
@mixin h1 {
|
||||
font-size: $h1-size;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
@mixin h2 {
|
||||
font-size: $h2-size;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
@mixin h3 {
|
||||
font-size: $h3-size;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
@mixin h4 {
|
||||
font-size: $h4-size;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
@mixin h5 {
|
||||
font-size: $h5-size;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
@mixin h6 {
|
||||
font-size: $h6-size;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
// Responsive heading mixins
|
||||
// There are no responsive mixins for h5 and h6 because they are small
|
||||
// and don't need to be smaller on mobile.
|
||||
@mixin h1-reponsive {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
|
||||
// Up to 32px in future
|
||||
@include breakpoint(md) { font-size: 30px; }
|
||||
|
||||
}
|
||||
|
||||
@mixin h2-responsive {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
|
||||
// Up to 22px or 24px in future
|
||||
@include breakpoint(md) { font-size: 21px; }
|
||||
}
|
||||
|
||||
@mixin h3-responsive {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
||||
@include breakpoint(md) { font-size: 16px; }
|
||||
|
||||
}
|
||||
|
||||
@mixin h4-responsive {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
|
||||
@include breakpoint(md) { font-size: 14px; }
|
||||
|
||||
}
|
||||
|
|
@ -1,179 +0,0 @@
|
|||
// variables
|
||||
// stylelint-disable declaration-bang-space-before
|
||||
// These are our margin and padding utility spacers. The default step size we
|
||||
// use is 6px. This gives us a key of:
|
||||
// 0 => 0px
|
||||
// 1 => 3px
|
||||
// 2 => 6px
|
||||
// 3 => 12px
|
||||
// 4 => 24px
|
||||
// 5 => 36px
|
||||
$spacer: 6px !default;
|
||||
$spacers: (
|
||||
0,
|
||||
round($spacer / 2),
|
||||
$spacer,
|
||||
$spacer * 2,
|
||||
$spacer * 4,
|
||||
$spacer * 6,
|
||||
$spacer * 8
|
||||
) !default;
|
||||
|
||||
// Aliases for easy use
|
||||
$spacer-1: nth($spacers, 2) !default; // 3px
|
||||
$spacer-2: nth($spacers, 3) !default; // 6px
|
||||
$spacer-3: nth($spacers, 4) !default; // 12px
|
||||
$spacer-4: nth($spacers, 5) !default; // 24px
|
||||
$spacer-5: nth($spacers, 6) !default; // 36px
|
||||
$spacer-6: nth($spacers, 7) !default; // 48px
|
||||
|
||||
$container-width: 980px !default;
|
||||
$grid-gutter: 10px !default;
|
||||
|
||||
// breakpoints
|
||||
$width-xs: 0;
|
||||
$width-sm: 544px;
|
||||
$width-md: 768px;
|
||||
$width-lg: 1004px;
|
||||
$width-xl: 1280px;
|
||||
|
||||
// New responsive container-width
|
||||
$container-md: $width-md !default;
|
||||
$container-lg: $width-lg !default;
|
||||
$container-xl: $width-xl !default;
|
||||
|
||||
// Breakpoints
|
||||
$breakpoints: (
|
||||
// Small screen / phone
|
||||
sm: $width-sm,
|
||||
// Medium screen / tablet
|
||||
md: $width-md,
|
||||
// Large screen / desktop (980 + (12 * 2)) <= container + gutters
|
||||
lg: $width-lg,
|
||||
// Extra large screen / wide desktop
|
||||
xl: $width-xl
|
||||
) !default;
|
||||
|
||||
// ---- Colors ----
|
||||
|
||||
// Brand
|
||||
$blue: #4078c0 !default;
|
||||
$gray-dark: #333 !default;
|
||||
$gray-light: #999 !default;
|
||||
$gray: #767676 !default;
|
||||
$green: #6cc644 !default;
|
||||
$orange: #c9510c !default;
|
||||
$purple: #6e5494 !default;
|
||||
$red: #bd2c00 !default;
|
||||
$white: #fff !default;
|
||||
|
||||
// State indicators.
|
||||
$status-renamed: #fffa5d !default;
|
||||
$status-pending: #cea61b !default;
|
||||
|
||||
// Repository type colors
|
||||
$repo-private-text: #4c4a42 !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;
|
||||
$border-gray-light: #eee !default;
|
||||
$border-gray: #e5e5e5 !default;
|
||||
|
||||
// Background colors
|
||||
$bg-blue-light: #f2f8fa !default;
|
||||
$bg-blue: $blue !default;
|
||||
$bg-gray-dark: $gray-dark !default;
|
||||
$bg-gray-light: #fafafa !default;
|
||||
$bg-gray: #f5f5f5 !default;
|
||||
$bg-green: $green !default;
|
||||
$bg-orange: $orange !default;
|
||||
$bg-purple: $purple !default;
|
||||
$bg-red: $red !default;
|
||||
$bg-white: $white !default;
|
||||
|
||||
// Text colors
|
||||
$text-blue: $blue !default;
|
||||
$text-gray-dark: $gray-dark !default;
|
||||
$text-gray-light: $gray-light !default;
|
||||
$text-gray: $gray !default;
|
||||
$text-green: darken($green, 10%) !default;
|
||||
$text-orange: $orange !default;
|
||||
$text-purple: $purple !default;
|
||||
$text-red: $red !default;
|
||||
$text-white: $white !default;
|
||||
|
||||
// Border size
|
||||
$border-width: 1px !default;
|
||||
$border-color: $border-gray !default;
|
||||
$border-style: solid !default;
|
||||
$border: $border-width $border-color $border-style !default;
|
||||
$border-radius: 3px !default;
|
||||
|
||||
// Heading sizes
|
||||
$h00-size: 48px !default;
|
||||
$h0-size: 40px !default;
|
||||
$h1-size: 32px !default;
|
||||
$h2-size: 24px !default;
|
||||
$h3-size: 20px !default;
|
||||
$h4-size: 16px !default;
|
||||
$h5-size: 14px !default;
|
||||
$h6-size: 12px !default;
|
||||
|
||||
$font-weight-bold: 600 !default;
|
||||
$font-weight-light: 300 !default;
|
||||
|
||||
$font-size-small: 12px !default;
|
||||
|
||||
$lh-condensed-ultra: 1 !default;
|
||||
$lh-condensed: 1.25 !default;
|
||||
$lh-default: 1.5 !default;
|
||||
|
||||
// Font stacks
|
||||
$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
|
||||
// Monospace font stack
|
||||
$mono-font: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
|
||||
|
||||
// The base body size
|
||||
$body-font-size: 14px !default;
|
||||
$body-line-height: $lh-default !default;
|
||||
|
||||
// Tooltips
|
||||
$tooltip-max-width: 250px !default;
|
||||
$tooltip-background-color: rgba(0, 0, 0, 0.8) !default;
|
||||
$tooltip-text-color: #fff !default;
|
||||
$tooltip-delay: 0.4s !default;
|
||||
$tooltip-duration: 0.1s !default;
|
||||
|
||||
$blob-inner-border: #eee;
|
||||
|
||||
$commitBackgroundColor: #f2f9fc;
|
||||
|
||||
$conversationListBorderColor: #eee;
|
||||
|
||||
$exploregrid-item-border-radius: 4px;
|
||||
|
||||
$stats-switcher-py: 10px;
|
||||
// Future proof this `height` value by finding the computed line-height, then
|
||||
// adding the total value of the vertical padding. This var is used to toggle
|
||||
// between the stats bar and language breakdown.
|
||||
$stats-viewport-height: ($body-font-size * $body-line-height) + ($stats-switcher-py * 2);
|
||||
|
||||
$min_tab_size: 1;
|
||||
$max_tab_size: 12;
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import "../primer-support/index.scss";
|
||||
@import "./lib/tooltips.scss";
|
||||
|
|
@ -1,281 +0,0 @@
|
|||
.tooltipped {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// This is the tooltip bubble
|
||||
.tooltipped::after {
|
||||
position: absolute;
|
||||
z-index: 1000000;
|
||||
display: none;
|
||||
padding: 5px 8px;
|
||||
font: normal normal 11px/1.5 $body-font;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
color: $tooltip-text-color;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: break-word;
|
||||
white-space: pre;
|
||||
pointer-events: none;
|
||||
content: attr(aria-label);
|
||||
background: $tooltip-background-color;
|
||||
border-radius: 3px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// This is the tooltip arrow
|
||||
.tooltipped::before {
|
||||
position: absolute;
|
||||
z-index: 1000001;
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: $tooltip-background-color;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border: 5px solid transparent;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// delay animation for tooltip
|
||||
@keyframes tooltip-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// This will indicate when we'll activate the tooltip
|
||||
.tooltipped:hover,
|
||||
.tooltipped:active,
|
||||
.tooltipped:focus {
|
||||
&::before,
|
||||
&::after {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
animation-name: tooltip-appear;
|
||||
animation-duration: $tooltip-duration;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: ease-in;
|
||||
animation-delay: $tooltip-delay;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltipped-no-delay:hover,
|
||||
.tooltipped-no-delay:active,
|
||||
.tooltipped-no-delay:focus {
|
||||
&::before,
|
||||
&::after {
|
||||
opacity: 1;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltipped-multiline:hover,
|
||||
.tooltipped-multiline:active,
|
||||
.tooltipped-multiline:focus {
|
||||
&::after {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltipped south
|
||||
.tooltipped-s,
|
||||
.tooltipped-se,
|
||||
.tooltipped-sw {
|
||||
&::after {
|
||||
top: 100%;
|
||||
right: 50%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: auto;
|
||||
right: 50%;
|
||||
bottom: -5px;
|
||||
margin-right: -5px;
|
||||
border-bottom-color: $tooltip-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltipped-se {
|
||||
&::after {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
margin-left: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltipped-sw::after {
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
// Tooltips above the object
|
||||
.tooltipped-n,
|
||||
.tooltipped-ne,
|
||||
.tooltipped-nw {
|
||||
&::after {
|
||||
right: 50%;
|
||||
bottom: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: -5px;
|
||||
right: 50%;
|
||||
bottom: auto;
|
||||
margin-right: -5px;
|
||||
border-top-color: $tooltip-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltipped-ne {
|
||||
&::after {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
margin-left: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltipped-nw::after {
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
// Move the tooltip body to the center of the object.
|
||||
.tooltipped-s::after,
|
||||
.tooltipped-n::after {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
// Tooltipped to the left
|
||||
.tooltipped-w {
|
||||
&::after {
|
||||
right: 100%;
|
||||
bottom: 50%;
|
||||
margin-right: 5px;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 50%;
|
||||
bottom: 50%;
|
||||
left: -5px;
|
||||
margin-top: -5px;
|
||||
border-left-color: $tooltip-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
// tooltipped to the right
|
||||
.tooltipped-e {
|
||||
&::after {
|
||||
bottom: 50%;
|
||||
left: 100%;
|
||||
margin-left: 5px;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 50%;
|
||||
right: -5px;
|
||||
bottom: 50%;
|
||||
margin-top: -5px;
|
||||
border-right-color: $tooltip-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Multiline tooltips
|
||||
//
|
||||
// `.tooltipped-multiline` Add this class when you have long content.
|
||||
// The downside is you cannot preformat the text with newlines and `[w,e]`
|
||||
// are always `$tooltip-max-width` wide.
|
||||
.tooltipped-multiline {
|
||||
&::after {
|
||||
width: max-content;
|
||||
max-width: $tooltip-max-width;
|
||||
word-break: break-word;
|
||||
word-wrap: normal;
|
||||
white-space: pre-line;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
&.tooltipped-s::after,
|
||||
&.tooltipped-n::after {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&.tooltipped-w::after,
|
||||
&.tooltipped-e::after {
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 0\0) {
|
||||
// IE11
|
||||
.tooltipped-multiline::after {
|
||||
width: $tooltip-max-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Sticky tooltips
|
||||
//
|
||||
// Always show the tooltip.
|
||||
.tooltipped-sticky {
|
||||
&::before,
|
||||
&::after {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.tooltipped-multiline {
|
||||
&::after {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Alert tooltips
|
||||
//
|
||||
// Colors for different alert states.
|
||||
@mixin colorizeTooltip($text-color, $background-color) {
|
||||
&::after {
|
||||
color: $text-color;
|
||||
background: $background-color;
|
||||
}
|
||||
|
||||
.tooltipped-s,
|
||||
.tooltipped-se,
|
||||
.tooltipped-sw {
|
||||
&::before {
|
||||
border-bottom-color: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltipped-n,
|
||||
&.tooltipped-ne,
|
||||
&.tooltipped-nw {
|
||||
&::before {
|
||||
border-top-color: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltipped-e::before {
|
||||
border-right-color: $background-color;
|
||||
}
|
||||
|
||||
&.tooltipped-w::before {
|
||||
border-left-color: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include retina-media-query {
|
||||
.tooltipped-w::after {
|
||||
// weird bug on retina
|
||||
margin-right: 4.5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import "./lib/truncate.scss";
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
// Truncate
|
||||
//
|
||||
// css-truncate will shorten text with an ellipsis.
|
||||
|
||||
.css-truncate {
|
||||
// Truncate double target
|
||||
//
|
||||
// css-truncate will shorten text with an ellipsis. The maximum width
|
||||
// of the truncated text can be changed by overriding the max-width
|
||||
// of the .css-truncate-target
|
||||
&.css-truncate-target,
|
||||
.css-truncate-target {
|
||||
display: inline-block;
|
||||
max-width: 125px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.expandable.zeroclipboard-is-hover .css-truncate-target,
|
||||
&.expandable.zeroclipboard-is-hover.css-truncate-target,
|
||||
&.expandable:hover .css-truncate-target,
|
||||
&.expandable:hover.css-truncate-target {
|
||||
max-width: 10000px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
@import "../primer-support/index.scss";
|
||||
// utilities
|
||||
@import "./lib/animations.scss";
|
||||
@import "./lib/border.scss";
|
||||
@import "./lib/colors.scss";
|
||||
@import "./lib/layout.scss";
|
||||
@import "./lib/margin.scss";
|
||||
@import "./lib/padding.scss";
|
||||
@import "./lib/typography.scss";
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
// This file contains reusable animations for github.
|
||||
|
||||
// Fade in
|
||||
// A class to fade in an element on the page.
|
||||
.anim-fade-in {
|
||||
animation-name: fade-in;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease-in-out;
|
||||
|
||||
&.fast {
|
||||
animation-duration: 300ms;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Fade up
|
||||
// A class that will fade in and slide up an element
|
||||
.anim-fade-up {
|
||||
opacity: 0;
|
||||
animation-name: fade-up;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: ease-out;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
@keyframes fade-up {
|
||||
0% {
|
||||
opacity: 0.8;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Fade down
|
||||
// A class that will fade an element out and slide down.
|
||||
.anim-fade-down {
|
||||
animation-name: fade-down;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
@keyframes fade-down {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
// Grow X
|
||||
// A class that will grow an element width from 0 to 100%
|
||||
.anim-grow-x {
|
||||
width: 0%;
|
||||
animation-name: grow-x;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: ease;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
@keyframes grow-x {
|
||||
to { width: 100%; }
|
||||
}
|
||||
|
||||
// Shrink X
|
||||
// A class that will shrink an element from 100% to 0%
|
||||
.anim-shrink-x {
|
||||
animation-name: shrink-x;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
@keyframes shrink-x {
|
||||
to { width: 0%; }
|
||||
}
|
||||
|
||||
// Scale in
|
||||
// A class to fade in an element and scale it fast
|
||||
.anim-scale-in {
|
||||
animation-name: scale-in;
|
||||
animation-duration: 0.15s;
|
||||
animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.anim-pulse {
|
||||
animation-name: pulse;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.anim-pulse-in {
|
||||
animation-name: pulse-in;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
@keyframes pulse-in {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
// Border utilities
|
||||
// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility
|
||||
.border { border: $border !important; }
|
||||
.border-top { border-top: $border !important; }
|
||||
.border-right { border-right: $border !important; }
|
||||
.border-bottom { border-bottom: $border !important; }
|
||||
.border-left { border-left: $border !important; }
|
||||
|
||||
.border-y {
|
||||
border-top: $border !important;
|
||||
border-bottom: $border !important;
|
||||
}
|
||||
|
||||
// Border colors
|
||||
.border-blue { border-color: $border-blue !important; }
|
||||
.border-gray-light { border-color: $border-gray-light !important; }
|
||||
.border-gray-dark { border-color: $border-gray-dark !important; }
|
||||
|
||||
// Without borders
|
||||
.border-0 { border: 0 !important; }
|
||||
.border-top-0 { border-top: 0 !important; }
|
||||
.border-right-0 { border-right: 0 !important; }
|
||||
.border-bottom-0 { border-bottom: 0 !important; }
|
||||
.border-left-0 { border-left: 0 !important; }
|
||||
|
||||
// Rounded corners
|
||||
.rounded-0 { border-radius: 0 !important; }
|
||||
.rounded-1 { border-radius: $border-radius !important; }
|
||||
.rounded-2 { border-radius: $border-radius * 2 !important; }
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
// Color utilities
|
||||
// stylelint-disable block-opening-brace-space-before, block-closing-brace-newline-before, block-opening-brace-newline-after, selector-list-comma-newline-after, block-opening-brace-space-after, primer/selector-no-utility, rule-non-nested-empty-line-before
|
||||
|
||||
// background colors
|
||||
.bg-white { background-color: $bg-white !important; }
|
||||
.bg-blue { background-color: $bg-blue !important; }
|
||||
.bg-blue-light { background-color: $bg-blue-light !important; }
|
||||
.bg-gray-dark { background-color: $bg-gray-dark !important; }
|
||||
.bg-gray { background-color: $bg-gray !important; }
|
||||
.bg-gray-light { background-color: $bg-gray-light !important; }
|
||||
.bg-green { background-color: $bg-green !important; }
|
||||
.bg-red { background-color: $bg-red !important; }
|
||||
|
||||
// text colors
|
||||
.text-blue { color: $text-blue !important; }
|
||||
.text-red { color: $text-red !important; }
|
||||
.text-gray-light { color: $text-gray-light !important; }
|
||||
.text-gray { color: $text-gray !important; }
|
||||
.text-gray-dark { color: $text-gray-dark !important; }
|
||||
.text-green { color: $text-green !important; }
|
||||
.text-orange { color: $text-orange !important; }
|
||||
.text-purple { color: $text-purple !important; }
|
||||
.text-white { color: $text-white !important; }
|
||||
.text-inherit { color: inherit !important; }
|
||||
|
||||
// link colors
|
||||
.link-blue { color: $text-blue !important; }
|
||||
.link-gray-dark { color: $text-gray-dark !important; }
|
||||
.link-gray { color: $text-gray !important; }
|
||||
|
||||
// Text states
|
||||
.text-renamed { color: $status-renamed !important; }
|
||||
.text-pending { color: $status-pending !important; }
|
||||
|
||||
// Muted link
|
||||
//
|
||||
// Have a link you need to be gray to start, and blue on hover? Use this.
|
||||
.muted-link {
|
||||
color: $text-gray !important;
|
||||
|
||||
&:hover {
|
||||
color: $text-blue !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
// Layout
|
||||
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
|
||||
// stylelint-disable block-closing-brace-newline-before, block-opening-brace-newline-after
|
||||
// stylelint-disable rule-non-nested-empty-line-before
|
||||
|
||||
// position utilites
|
||||
.position-static { position: static !important; }
|
||||
.position-relative { position: relative !important; }
|
||||
.position-absolute { position: absolute !important; }
|
||||
.position-fixed { position: fixed !important; }
|
||||
|
||||
.top-0 { top: 0 !important; }
|
||||
.right-0 { right: 0 !important; }
|
||||
.bottom-0 { bottom: 0 !important; }
|
||||
.left-0 { left: 0 !important; }
|
||||
|
||||
// Vertical alignment
|
||||
.v-align-middle { vertical-align: middle !important; }
|
||||
.v-align-top { vertical-align: top !important; }
|
||||
.v-align-bottom { vertical-align: bottom !important; }
|
||||
.v-align-text-top { vertical-align: text-top !important; }
|
||||
.v-align-text-bottom { vertical-align: text-bottom !important; }
|
||||
|
||||
// Overflow utilities
|
||||
// overflow-hidden can also be used to create a new
|
||||
// block formatting context or clear floats.
|
||||
.overflow-hidden { overflow: hidden !important; }
|
||||
.overflow-scroll { overflow: scroll !important; }
|
||||
.overflow-auto { overflow: auto !important; }
|
||||
|
||||
// Clear floats
|
||||
.clearfix {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
// Floats
|
||||
.float-right { float: right !important; }
|
||||
.float-left { float: left !important; }
|
||||
|
||||
// Responsive float utlities
|
||||
// .float-md-left, .float-lg-right, ...
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
@include breakpoint($breakpoint) {
|
||||
.float-#{$breakpoint}-left { float: left !important; }
|
||||
.float-#{$breakpoint}-right { float: right !important; }
|
||||
}
|
||||
}
|
||||
|
||||
// Width and height utilities, helpful in combination
|
||||
// with display-table utilities and images
|
||||
.width-fit { max-width: 100% !important; }
|
||||
.width-full { width: 100% !important; }
|
||||
.height-full { height: 100% !important; }
|
||||
|
||||
// Remove min-width from element
|
||||
.min-width-0 { min-width: 0 !important; }
|
||||
|
||||
// Visibility utilities
|
||||
.v-hidden { visibility: hidden !important; }
|
||||
.v-visible { visibility: visible !important; }
|
||||
|
||||
// Display utilites
|
||||
.d-table { display: table !important; }
|
||||
.d-table-cell { display: table-cell !important; }
|
||||
.table-fixed { table-layout: fixed !important; }
|
||||
|
||||
.d-block { display: block !important; }
|
||||
.d-inline { display: inline !important; }
|
||||
.d-inline-block { display: inline-block !important; }
|
||||
.d-none { display: none !important; }
|
||||
|
||||
// Responsive display utlities
|
||||
// .d-sm-none, .d-lg-inline, ...
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
@include breakpoint($breakpoint) {
|
||||
.d-#{$breakpoint}-table { display: table !important; }
|
||||
.d-#{$breakpoint}-table-cell { display: table-cell !important; }
|
||||
.d-#{$breakpoint}-block { display: block !important; }
|
||||
.d-#{$breakpoint}-inline { display: inline !important; }
|
||||
.d-#{$breakpoint}-inline-block { display: inline-block !important; }
|
||||
.d-#{$breakpoint}-none { display: none !important; }
|
||||
}
|
||||
}
|
||||
|
||||
// Hide utilities for each breakpoint
|
||||
// Each hide utility only applies to one breakpoint range.
|
||||
@media (max-width: $width-sm) {
|
||||
.hide-sm {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $width-sm) and (max-width: $width-md) {
|
||||
.hide-md {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $width-md) and (max-width: $width-lg) {
|
||||
.hide-lg {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $width-lg) {
|
||||
.hide-xl {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
// Margin spacer utilities
|
||||
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{nth($spacers, $i)};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .m-0, .m-1, .m-2...
|
||||
.m-#{$scale} { margin : #{$size} !important; }
|
||||
.mt-#{$scale} { margin-top : #{$size} !important; }
|
||||
.mr-#{$scale} { margin-right : #{$size} !important; }
|
||||
.mb-#{$scale} { margin-bottom: #{$size} !important; }
|
||||
.ml-#{$scale} { margin-left : #{$size} !important; }
|
||||
|
||||
.mx-#{$scale} {
|
||||
margin-right: #{$size} !important;
|
||||
margin-left : #{$size} !important;
|
||||
}
|
||||
|
||||
.my-#{$scale} {
|
||||
margin-top : #{$size} !important;
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Loop through the breakpoint values
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
|
||||
// Loop through the spacer values
|
||||
@for $i from 1 through length($spacers) {
|
||||
@include breakpoint($breakpoint) {
|
||||
$size: #{nth($spacers, $i)}; // sm, md, lg, xl
|
||||
$scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6
|
||||
|
||||
// .m-sm-0, .m-md-1, .m-lg-2...
|
||||
.m-#{$breakpoint}-#{$scale} { margin: #{$size} !important; }
|
||||
.mt-#{$breakpoint}-#{$scale} { margin-top: #{$size} !important; }
|
||||
.mr-#{$breakpoint}-#{$scale} { margin-right: #{$size} !important; }
|
||||
.mb-#{$breakpoint}-#{$scale} { margin-bottom: #{$size} !important; }
|
||||
.ml-#{$breakpoint}-#{$scale} { margin-left: #{$size} !important; }
|
||||
|
||||
.mx-#{$breakpoint}-#{$scale} {
|
||||
margin-right: #{$size} !important;
|
||||
margin-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.my-#{$breakpoint}-#{$scale} {
|
||||
margin-top: #{$size} !important;
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Auto
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
// Padding spacer utilities
|
||||
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before, primer/selector-no-utility
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{nth($spacers, $i)};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .p-0, .p-1, .p-2...
|
||||
.p-#{$scale} { padding : #{$size} !important; }
|
||||
.pt-#{$scale} { padding-top : #{$size} !important; }
|
||||
.pr-#{$scale} { padding-right : #{$size} !important; }
|
||||
.pb-#{$scale} { padding-bottom: #{$size} !important; }
|
||||
.pl-#{$scale} { padding-left : #{$size} !important; }
|
||||
|
||||
.px-#{$scale} {
|
||||
padding-right: #{$size} !important;
|
||||
padding-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.py-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive padding spacer utilities
|
||||
|
||||
// Loop through the breakpoint values
|
||||
@each $breakpoint in map-keys($breakpoints) {
|
||||
|
||||
// Loop through the spacer values
|
||||
@for $i from 1 through length($spacers) {
|
||||
@include breakpoint($breakpoint) {
|
||||
$size: #{nth($spacers, $i)}; // xs, sm, md, lg, xl
|
||||
$scale: #{$i - 1}; // 0, 1, 2, 3, 4, 5, 6
|
||||
|
||||
// .p-sm-0, .p-md-1, .p-lg-2...
|
||||
.p-#{$breakpoint}-#{$scale} { padding: #{$size} !important; }
|
||||
.pt-#{$breakpoint}-#{$scale} { padding-top: #{$size} !important; }
|
||||
.pr-#{$breakpoint}-#{$scale} { padding-right: #{$size} !important; }
|
||||
.pb-#{$breakpoint}-#{$scale} { padding-bottom: #{$size} !important; }
|
||||
.pl-#{$breakpoint}-#{$scale} { padding-left: #{$size} !important; }
|
||||
|
||||
.px-#{$breakpoint}-#{$scale} {
|
||||
padding-right: #{$size} !important;
|
||||
padding-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.py-#{$breakpoint}-#{$scale} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
// stylelint-disable block-closing-brace-space-before, primer/selector-no-utility, selector-list-comma-newline-after, declaration-block-semicolon-newline-after, declaration-block-single-line-max-declarations
|
||||
// Type scale variables found in primer-support/lib/variables.scss
|
||||
// $h00-size: 48px;
|
||||
// $h0-size: 40px;
|
||||
// $h1-size: 32px;
|
||||
// $h2-size: 24px;
|
||||
// $h3-size: 20px;
|
||||
// $h4-size: 16px;
|
||||
// $h5-size: 14px;
|
||||
// $h6-size: 12px;
|
||||
|
||||
// Heading utilities
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: $font-weight-bold !important; }
|
||||
|
||||
.h1 {
|
||||
font-size: 26px !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h1-size !important; }
|
||||
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 22px !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h2-size !important; }
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 18px !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h3-size !important; }
|
||||
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 16px !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h4-size !important; }
|
||||
|
||||
}
|
||||
|
||||
.h5 { font-size: $h5-size !important; }
|
||||
|
||||
// Does not include color property like typography base
|
||||
// styles, color should be applied with color utilities.
|
||||
.h6 { font-size: $h6-size !important; }
|
||||
|
||||
// Type utilities that match type sale
|
||||
.f1 {
|
||||
font-size: 26px !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h1-size !important; }
|
||||
|
||||
}
|
||||
|
||||
.f2 {
|
||||
font-size: 22px !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h2-size !important; }
|
||||
}
|
||||
|
||||
.f3 {
|
||||
font-size: 18px !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h3-size !important; }
|
||||
|
||||
}
|
||||
|
||||
.f4 {
|
||||
font-size: 16px !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h4-size !important; }
|
||||
|
||||
}
|
||||
|
||||
.f5 { font-size: $h5-size !important; }
|
||||
.f6 { font-size: $h6-size !important; }
|
||||
|
||||
// Type utils with light weight that match type scale
|
||||
.f00-light {
|
||||
font-size: 40px !important;
|
||||
font-weight: $font-weight-light !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h00-size !important; }
|
||||
|
||||
}
|
||||
|
||||
.f0-light {
|
||||
font-size: 32px !important;
|
||||
font-weight: $font-weight-light !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h0-size !important; }
|
||||
|
||||
}
|
||||
|
||||
.f1-light {
|
||||
font-size: 26px !important;
|
||||
font-weight: $font-weight-light !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h1-size !important; }
|
||||
|
||||
}
|
||||
|
||||
.f2-light {
|
||||
font-size: 22px !important;
|
||||
font-weight: $font-weight-light !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h2-size !important; }
|
||||
|
||||
}
|
||||
// Same size and weight as .lead but without color property
|
||||
.f3-light {
|
||||
font-size: 18px !important;
|
||||
font-weight: $font-weight-light !important;
|
||||
|
||||
@include breakpoint(md) { font-size: $h3-size !important; }
|
||||
|
||||
}
|
||||
|
||||
// Smallest text size
|
||||
.text-small { font-size: $h6-size !important; } // 12px
|
||||
|
||||
// Large leading paragraphs
|
||||
.lead {
|
||||
margin-bottom: 30px;
|
||||
font-size: $h3-size;
|
||||
font-weight: $font-weight-light;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
// Line-height variations
|
||||
// Close to commonly used line-heights. Most line-heights
|
||||
// combined with type size equate to whole pixels.
|
||||
// Will be improved with future typography scale updates.
|
||||
.lh-condensed-ultra { line-height: $lh-condensed-ultra !important; }
|
||||
.lh-condensed { line-height: $lh-condensed !important; }
|
||||
.lh-default { line-height: $lh-default !important; }
|
||||
|
||||
// Text alignments
|
||||
.text-right { text-align: right !important; }
|
||||
.text-left { text-align: left !important; }
|
||||
.text-center { text-align: center !important; }
|
||||
|
||||
// Text styles
|
||||
.text-normal { font-weight: normal !important; }
|
||||
.text-bold { font-weight: $font-weight-bold !important;}
|
||||
.text-italic { font-style: italic !important;}
|
||||
.text-uppercase { text-transform: uppercase !important; }
|
||||
.no-underline { text-decoration: none !important; }
|
||||
.no-wrap { white-space: nowrap !important;}
|
||||
|
||||
.text-emphasized {
|
||||
font-weight: $font-weight-bold;
|
||||
color: $text-gray-dark;
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
h3 {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
Loading…
Reference in New Issue