status-im
/
open-bounty
mirror of https://github.com/status-im/open-bounty.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add primer-css (temporarily)

This commit is contained in:
kagel 2016-09-19 23:27:24 +03:00
parent 4079bd398d
commit c414b503ed
60 changed files with 4478 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

419
resources/scss/normalize.css/normalize.css vendored Normal file
View File

@ -0,0 +1,419 @@
/*! 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 */
}

26
resources/scss/primer-css/index.scss Normal file
View File

@ -0,0 +1,26 @@
/*!
* 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";

3
resources/scss/primer-css/primer-alerts/index.scss Normal file
View File

@ -0,0 +1,3 @@
// support files
@import "../primer-support/index.scss";
@import "./lib/flash.scss";

98
resources/scss/primer-css/primer-alerts/lib/flash.scss Normal file
View File

@ -0,0 +1,98 @@
// 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;
}

6
resources/scss/primer-css/primer-avatars/index.scss Normal file
View File

@ -0,0 +1,6 @@
@import "../primer-support/index.scss";
// Avatars
@import "./lib/avatar.scss";
@import "./lib/avatar-parent-child.scss";
@import "./lib/avatar-stack.scss";

16
resources/scss/primer-css/primer-avatars/lib/avatar-parent-child.scss Normal file
View File

@ -0,0 +1,16 @@
// .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);
}

39
resources/scss/primer-css/primer-avatars/lib/avatar-stack.scss Normal file
View File

@ -0,0 +1,39 @@
// 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;
}
}
}

20
resources/scss/primer-css/primer-avatars/lib/avatar.scss Normal file
View File

@ -0,0 +1,20 @@
.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;
}

4
resources/scss/primer-css/primer-base/index.scss Normal file
View File

@ -0,0 +1,4 @@
@import "../primer-support/index.scss";
@import "../../normalize.css/normalize";
@import "./lib/base.scss";
@import "./lib/typography-base.scss";

66
resources/scss/primer-css/primer-base/lib/base.scss Normal file
View File

@ -0,0 +1,66 @@
* {
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;
}

85
resources/scss/primer-css/primer-base/lib/typography-base.scss Normal file
View File

@ -0,0 +1,85 @@
// 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
resources/scss/primer-css/primer-blankslate/index.scss Normal file
View File

@ -0,0 +1 @@
@import "./lib/blankslate.scss";

64
resources/scss/primer-css/primer-blankslate/lib/blankslate.scss Normal file
View File

@ -0,0 +1,64 @@
// 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;
}

3
resources/scss/primer-css/primer-buttons/index.scss Normal file
View File

@ -0,0 +1,3 @@
@import "../primer-support/index.scss";
@import "./lib/button.scss";
@import "./lib/button-group.scss";

78
resources/scss/primer-css/primer-buttons/lib/button-group.scss Normal file
View File

@ -0,0 +1,78 @@
// 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;
}

337
resources/scss/primer-css/primer-buttons/lib/button.scss Normal file
View File

@ -0,0 +1,337 @@
// 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
resources/scss/primer-css/primer-flex-table/index.scss Normal file
View File

@ -0,0 +1 @@
@import "./lib/flex-table.scss";

20
resources/scss/primer-css/primer-flex-table/lib/flex-table.scss Normal file
View File

@ -0,0 +1,20 @@
// 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%;
}

5
resources/scss/primer-css/primer-forms/index.scss Normal file
View File

@ -0,0 +1,5 @@
@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";

192
resources/scss/primer-css/primer-forms/lib/form-control.scss Normal file
View File

@ -0,0 +1,192 @@
// 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; }
}

214
resources/scss/primer-css/primer-forms/lib/form-group.scss Normal file
View File

@ -0,0 +1,214 @@
// Form groups
//
// Typical form groups - `<dl.form-group>` with a `<dt>` containing the label and
// `<dd> containing the form elements.
// 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;
}
}

38
resources/scss/primer-css/primer-forms/lib/form-select.scss Normal file
View File

@ -0,0 +1,38 @@
// 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;
}
}

395
resources/scss/primer-css/primer-forms/lib/form-validation.scss Normal file
View File

@ -0,0 +1,395 @@
// 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;
}

4
resources/scss/primer-css/primer-layout/index.scss Normal file
View File

@ -0,0 +1,4 @@
@import "../primer-support/index.scss";
@import "./lib/container.scss";
@import "./lib/columns.scss";
@import "./lib/grid.scss";

69
resources/scss/primer-css/primer-layout/lib/columns.scss Normal file
View File

@ -0,0 +1,69 @@
// 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;
}

33
resources/scss/primer-css/primer-layout/lib/container.scss Normal file
View File

@ -0,0 +1,33 @@
// 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;
}

30
resources/scss/primer-css/primer-layout/lib/grid-offset.scss Normal file
View File

@ -0,0 +1,30 @@
// 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%); }
}
}

48
resources/scss/primer-css/primer-layout/lib/grid.scss Normal file
View File

@ -0,0 +1,48 @@
// 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); }

7
resources/scss/primer-css/primer-markdown/index.scss Normal file
View File

@ -0,0 +1,7 @@
@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";

75
resources/scss/primer-css/primer-markdown/lib/code.scss Normal file
View File

@ -0,0 +1,75 @@
.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;
}
}
}

64
resources/scss/primer-css/primer-markdown/lib/headings.scss Normal file
View File

@ -0,0 +1,64 @@
// 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;
}
}

118
resources/scss/primer-css/primer-markdown/lib/images.scss Normal file
View File

@ -0,0 +1,118 @@
// 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;
}
}
}

71
resources/scss/primer-css/primer-markdown/lib/lists.scss Normal file
View File

@ -0,0 +1,71 @@
// 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;
}
}
}

110
resources/scss/primer-css/primer-markdown/lib/markdown-body.scss Normal file
View File

@ -0,0 +1,110 @@
// 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;
}
}

31
resources/scss/primer-css/primer-markdown/lib/tables.scss Normal file
View File

@ -0,0 +1,31 @@
// 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;
}
}
}
}

7
resources/scss/primer-css/primer-navigation/index.scss Normal file
View File

@ -0,0 +1,7 @@
@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";

10
resources/scss/primer-css/primer-navigation/lib/counter.scss Normal file
View File

@ -0,0 +1,10 @@
.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;
}

62
resources/scss/primer-css/primer-navigation/lib/filter-list.scss Normal file
View File

@ -0,0 +1,62 @@
// 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;
}
}

113
resources/scss/primer-css/primer-navigation/lib/menu.scss Normal file
View File

@ -0,0 +1,113 @@
// 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;
}
}

121
resources/scss/primer-css/primer-navigation/lib/subnav.scss Normal file
View File

@ -0,0 +1,121 @@
// 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;
}

72
resources/scss/primer-css/primer-navigation/lib/tabnav.scss Normal file
View File

@ -0,0 +1,72 @@
// 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;
}

2
resources/scss/primer-css/primer-states/index.scss Normal file
View File

@ -0,0 +1,2 @@
@import "../primer-support/index.scss";
@import "./lib/states.scss";

32
resources/scss/primer-css/primer-states/lib/states.scss Normal file
View File

@ -0,0 +1,32 @@
// 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; }

7
resources/scss/primer-css/primer-support/index.scss Normal file
View File

@ -0,0 +1,7 @@
// variables
@import "./lib/variables.scss";
// mixins
@import "./lib/mixins/typography.scss";
@import "./lib/mixins/layout.scss";
@import "./lib/mixins/misc.scss";

52
resources/scss/primer-css/primer-support/lib/mixins/layout.scss Normal file
View File

@ -0,0 +1,52 @@
// 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: "";
}
}

29
resources/scss/primer-css/primer-support/lib/mixins/misc.scss Normal file
View File

@ -0,0 +1,29 @@
// 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;
}
}

76
resources/scss/primer-css/primer-support/lib/mixins/typography.scss Normal file
View File

@ -0,0 +1,76 @@
// 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; }
}

179
resources/scss/primer-css/primer-support/lib/variables.scss Normal file
View File

@ -0,0 +1,179 @@
// 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;

2
resources/scss/primer-css/primer-tooltips/index.scss Normal file
View File

@ -0,0 +1,2 @@
@import "../primer-support/index.scss";
@import "./lib/tooltips.scss";

281
resources/scss/primer-css/primer-tooltips/lib/tooltips.scss Normal file
View File

@ -0,0 +1,281 @@
.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
resources/scss/primer-css/primer-truncate/index.scss Normal file
View File

@ -0,0 +1 @@
@import "./lib/truncate.scss";

27
resources/scss/primer-css/primer-truncate/lib/truncate.scss Normal file
View File

@ -0,0 +1,27 @@
// 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;
}
}

9
resources/scss/primer-css/primer-utilities/index.scss Normal file
View File

@ -0,0 +1,9 @@
@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";

156
resources/scss/primer-css/primer-utilities/lib/animations.scss Normal file
View File

@ -0,0 +1,156 @@
// 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);
}
}

29
resources/scss/primer-css/primer-utilities/lib/border.scss Normal file
View File

@ -0,0 +1,29 @@
// 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; }

45
resources/scss/primer-css/primer-utilities/lib/colors.scss Normal file
View File

@ -0,0 +1,45 @@
// 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;
}
}

109
resources/scss/primer-css/primer-utilities/lib/layout.scss Normal file
View File

@ -0,0 +1,109 @@
// 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;
}
}

58
resources/scss/primer-css/primer-utilities/lib/margin.scss Normal file
View File

@ -0,0 +1,58 @@
// 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;
}

54
resources/scss/primer-css/primer-utilities/lib/padding.scss Normal file
View File

@ -0,0 +1,54 @@
// 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;
}
}
}
}

155
resources/scss/primer-css/primer-utilities/lib/typography.scss Normal file
View File

@ -0,0 +1,155 @@
// 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;
}