diff options
Diffstat (limited to 'assets/sass/@primer/css/marketing')
14 files changed, 411 insertions, 0 deletions
diff --git a/assets/sass/@primer/css/marketing/README.md b/assets/sass/@primer/css/marketing/README.md new file mode 100644 index 0000000..44f2885 --- /dev/null +++ b/assets/sass/@primer/css/marketing/README.md @@ -0,0 +1,25 @@ +--- +bundle: "marketing" +generated: true +--- + +# Primer CSS: `marketing` bundle + +## Usage + +Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with: + +```scss +@import "@primer/css/marketing/index.scss"; +``` + +## Build + +The `@primer/css` npm package includes a standalone CSS build of this module in `dist/marketing.css`. + +## License + +[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/) + + +[scss]: https://sass-lang.com/documentation/syntax#scss diff --git a/assets/sass/@primer/css/marketing/buttons/button.scss b/assets/sass/@primer/css/marketing/buttons/button.scss new file mode 100644 index 0000000..a0de3fa --- /dev/null +++ b/assets/sass/@primer/css/marketing/buttons/button.scss @@ -0,0 +1,100 @@ +.btn-mktg { + display: inline-block; + padding: $spacer-3 $spacer-4; + font-size: $h5-size; + font-weight: $font-weight-semibold; + color: $text-white; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + user-select: none; + // stylelint-disable-next-line primer/colors + background-color: $blue-mktg; + // stylelint-disable-next-line primer/borders + border: $border-width $border-style $blue-mktg; + border-radius: $border-radius; + transition: $transition-time / 2; + appearance: none; // Corrects inability to style clickable `input` types in iOS. + + &:hover { + text-decoration: none; + background-color: $bg-blue; + border-color: $border-blue; + } + + &:focus { + outline: 0; + // stylelint-disable-next-line primer/box-shadow + box-shadow: 0 0 0 0.2em rgba($blue-500, 0.3); + } + + &:disabled, + &.disabled, + &[aria-disabled=true] { + pointer-events: none; // Disable hover styles + cursor: default; + opacity: 0.65; + } +} + +.btn-primary-mktg { + // stylelint-disable-next-line primer/colors + background-color: $green-mktg; + // stylelint-disable-next-line primer/borders + border-color: $green-mktg; + + &:hover { + background-color: $bg-green; + // stylelint-disable-next-line primer/borders + border-color: $green-500; + } + + &:focus { + // stylelint-disable-next-line primer/box-shadow + box-shadow: 0 0 0 0.2em rgba($green-500, 0.3); + } +} + +.btn-large-mktg { + // stylelint-disable-next-line primer/spacing + padding: 20px $spacer-5; + font-size: $h4-size; +} + +.btn-outline-mktg { + // stylelint-disable-next-line primer/colors + color: $blue-mktg; + // stylelint-disable-next-line primer/colors + background-color: rgba($white, 0); + // stylelint-disable-next-line primer/borders + border-color: rgba($blue-mktg, 0.5); + + &:hover { + color: $text-blue; + text-decoration: none; + // stylelint-disable-next-line primer/colors + background-color: rgba($white, 0); + // stylelint-disable-next-line primer/borders + border-color: rgba($blue-mktg, 1); + } +} + +@mixin btn-transparent-active { + color: $gray-800; + background-color: $white; + background-image: none; + border-color: $white; +} + +.btn-transparent { + color: $text-white; + background-color: transparent; + background-image: none; + // stylelint-disable-next-line primer/borders + border: $border-width $border-style $white-fade-50; + + &:hover, + &:active { + @include btn-transparent-active; + } +} diff --git a/assets/sass/@primer/css/marketing/buttons/index.scss b/assets/sass/@primer/css/marketing/buttons/index.scss new file mode 100644 index 0000000..6ff5227 --- /dev/null +++ b/assets/sass/@primer/css/marketing/buttons/index.scss @@ -0,0 +1,3 @@ +// support files +@import "../support/index.scss"; +@import "./button.scss"; diff --git a/assets/sass/@primer/css/marketing/index.scss b/assets/sass/@primer/css/marketing/index.scss new file mode 100644 index 0000000..c84f8a5 --- /dev/null +++ b/assets/sass/@primer/css/marketing/index.scss @@ -0,0 +1,14 @@ +/*! + * @primer/css/marketing + * http://primer.style/css + * + * Released under MIT license. Copyright (c) 2019 GitHub Inc. + */ + +// Global requirements +@import "./support/index.scss"; + +// marketing specific css modules +@import "./type/index.scss"; +@import "./buttons/index.scss"; +@import "./utilities/index.scss"; diff --git a/assets/sass/@primer/css/marketing/support/index.scss b/assets/sass/@primer/css/marketing/support/index.scss new file mode 100644 index 0000000..8c8e479 --- /dev/null +++ b/assets/sass/@primer/css/marketing/support/index.scss @@ -0,0 +1,2 @@ +@import "../../support/index.scss"; +@import "./variables.scss"; diff --git a/assets/sass/@primer/css/marketing/support/variables.scss b/assets/sass/@primer/css/marketing/support/variables.scss new file mode 100644 index 0000000..7d0ec1c --- /dev/null +++ b/assets/sass/@primer/css/marketing/support/variables.scss @@ -0,0 +1,77 @@ +$marketing-font-path: "/fonts/" !default; + +// Type +@font-face { + font-family: Inter; + font-style: normal; + font-weight: $font-weight-normal; + src: local("Inter"), local("Inter-Regular"), url("#{$marketing-font-path}Inter-Regular.woff") format("woff"); + font-display: swap; +} + +@font-face { + font-family: Inter; + font-style: normal; + font-weight: $font-weight-semibold; + src: local("Inter Medium"), local("Inter-Medium"), url("#{$marketing-font-path}Inter-Medium.woff") format("woff"); + font-display: swap; +} + +@font-face { + font-family: Inter; + font-style: normal; + font-weight: $font-weight-bold; + src: local("Inter Bold"), local("Inter-Bold"), url("#{$marketing-font-path}Inter-Bold.woff") format("woff"); + font-display: swap; +} + +$font-mktg: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; + +// Builds upon @primer/css/support/variables/typography.scss +$h000-size: 64px !default; +$h000-size-mobile: 48px !default; + +// Colors +$green-mktg: mix($green-500, $green-400, 50%) !default; +$blue-mktg: mix($blue-400, $blue-500, 42%) !default; + +// Animations +$transition-time: 0.4s !default; + +// Increases the core spacing scale first by 8px for $spacer-7, then by 16px +// increments from $spacer-8 to $spacer-12, i.e. after 40px, we have 48, 64, +// 80, 96, etc. +$spacer-7: $spacer * 6 !default; // 48px +$spacer-8: $spacer * 8 !default; // 64px +$spacer-9: $spacer * 10 !default; // 80px +$spacer-10: $spacer * 12 !default; // 96px +$spacer-11: $spacer * 14 !default; // 112px +$spacer-12: $spacer * 16 !default; // 128px + +$marketing-spacers: ( + 7: $spacer-7, + 8: $spacer-8, + 9: $spacer-9, + 10: $spacer-10, + 11: $spacer-11, + 12: $spacer-12, +) !default; + +$marketing-all-spacers: map-merge( + ( + 0: 0, + 1: $spacer-1, + 2: $spacer-2, + 3: $spacer-3, + 4: $spacer-4, + 5: $spacer-5, + 6: $spacer-6, + ), + $marketing-spacers, +) !default; + +$marketing-position-variants: ( + "": "", + md: "-md", + lg: "-lg", +) !default; diff --git a/assets/sass/@primer/css/marketing/type/index.scss b/assets/sass/@primer/css/marketing/type/index.scss new file mode 100644 index 0000000..5ddc98f --- /dev/null +++ b/assets/sass/@primer/css/marketing/type/index.scss @@ -0,0 +1,3 @@ +// support files +@import "../support/index.scss"; +@import "./typography.scss"; diff --git a/assets/sass/@primer/css/marketing/type/typography.scss b/assets/sass/@primer/css/marketing/type/typography.scss new file mode 100644 index 0000000..63667fd --- /dev/null +++ b/assets/sass/@primer/css/marketing/type/typography.scss @@ -0,0 +1,103 @@ +// Headings + +.h000-mktg, +.h00-mktg, +.h0-mktg, +.h1-mktg, +.h2-mktg, +.h3-mktg, +.h4-mktg, +.h5-mktg, +.h6-mktg, +.lead-mktg { + font-family: $font-mktg; + font-weight: $font-weight-semibold; +} + +@mixin h000-mktg { + font-size: $h000-size-mobile !important; + @include breakpoint(md) { font-size: $h000-size !important; } +} + +.h000-mktg { @include h000-mktg; } + +@mixin h00-mktg { + font-size: $h00-size-mobile !important; + @include breakpoint(md) { font-size: $h00-size !important; } +} + +.h00-mktg { @include h00-mktg; } + +@mixin h0-mktg { + font-size: $h0-size-mobile !important; + @include breakpoint(md) { font-size: $h0-size !important; } +} + +.h0-mktg { @include h0-mktg; } + +@mixin h1-mktg { + font-size: $h1-size-mobile !important; + @include breakpoint(md) { font-size: $h1-size !important; } +} + +.h1-mktg { @include h1-mktg; } + +@mixin h2-mktg { + font-size: $h2-size-mobile !important; + @include breakpoint(md) { font-size: $h2-size !important; } +} + +.h2-mktg { @include h2-mktg; } + +@mixin h3-mktg { + font-size: $h3-size-mobile !important; + @include breakpoint(md) { font-size: $h3-size !important; } +} + +.h3-mktg { @include h3-mktg; } + +.h4-mktg { + font-size: $h4-size !important; +} + +.h5-mktg { + font-size: $h5-size !important; +} + +.h6-mktg { + font-size: $h6-size !important; +} + +// Big opening paragraphs +@mixin lead-mktg { + font-size: $h3-size; + font-weight: $font-weight-normal; +} + +.lead-mktg { @include lead-mktg; } + +// Pullquote + +@mixin pullquote { + padding-top: 0; + padding-bottom: 0; + padding-left: $spacer; + margin-bottom: $spacer-4; + font-family: $mono-font; + font-size: $h4-size; + line-height: 1.4; + color: $text-gray; + border-left: 3px solid $border-color; + + @include breakpoint(md) { + padding-left: $spacer * 1.5; + margin-bottom: $spacer-5; + margin-left: (-$spacer * 1.5) - 3px; + font-size: 18px; + line-height: $lh-default; + } +} + +.pullquote { + @include pullquote; +} diff --git a/assets/sass/@primer/css/marketing/utilities/borders.scss b/assets/sass/@primer/css/marketing/utilities/borders.scss new file mode 100644 index 0000000..1a95e48 --- /dev/null +++ b/assets/sass/@primer/css/marketing/utilities/borders.scss @@ -0,0 +1,4 @@ +// Marketing border utilities + +// XXX If you're looking for responsive border utilities, they've moved to +// ../../utilities/borders.scss diff --git a/assets/sass/@primer/css/marketing/utilities/filters.scss b/assets/sass/@primer/css/marketing/utilities/filters.scss new file mode 100644 index 0000000..062140f --- /dev/null +++ b/assets/sass/@primer/css/marketing/utilities/filters.scss @@ -0,0 +1,3 @@ +.grayscale { + filter: grayscale(100%); +} diff --git a/assets/sass/@primer/css/marketing/utilities/index.scss b/assets/sass/@primer/css/marketing/utilities/index.scss new file mode 100644 index 0000000..4ba10ef --- /dev/null +++ b/assets/sass/@primer/css/marketing/utilities/index.scss @@ -0,0 +1,7 @@ +@import "../support/index.scss"; +// utilities +@import "./filters.scss"; +@import "./borders.scss"; +@import "./layout.scss"; +@import "./margin.scss"; +@import "./padding.scss"; diff --git a/assets/sass/@primer/css/marketing/utilities/layout.scss b/assets/sass/@primer/css/marketing/utilities/layout.scss new file mode 100644 index 0000000..c17f5f5 --- /dev/null +++ b/assets/sass/@primer/css/marketing/utilities/layout.scss @@ -0,0 +1,29 @@ +// Layout utilities +// stylelint-disable block-opening-brace-space-before + +// Responsive utilities to position content +// No utilities for sm and xl breakpoints +@each $breakpoint, $variant in $marketing-position-variants { + @include breakpoint($breakpoint) { + @each $scale, $size in $marketing-all-spacers { + .top#{$variant}-#{$scale} { top: $size !important; } + .right#{$variant}-#{$scale} { right: $size !important; } + .bottom#{$variant}-#{$scale} { bottom: $size !important; } + .left#{$variant}-#{$scale} { left: $size !important; } + + .top#{$variant}-n#{$scale} { top: -$size !important; } + .right#{$variant}-n#{$scale} { right: -$size !important; } + .bottom#{$variant}-n#{$scale} { bottom: -$size !important; } + .left#{$variant}-n#{$scale} { left: -$size !important; } + } + } +} + +// Negative offset columns +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + @for $offset from 1 through 7 { + .offset#{$variant}-n#{$offset} { margin-left: -($offset / 12 * 100%); } + } + } +} diff --git a/assets/sass/@primer/css/marketing/utilities/margin.scss b/assets/sass/@primer/css/marketing/utilities/margin.scss new file mode 100644 index 0000000..61cde8d --- /dev/null +++ b/assets/sass/@primer/css/marketing/utilities/margin.scss @@ -0,0 +1,17 @@ +// Margin spacer utilities for marketing +// Utilities only added for y-direction margin (i.e. top & bottom) + +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + @each $scale, $size in $marketing-all-spacers { + + .mt#{$variant}-#{$scale} { margin-top: $size !important; } + .mb#{$variant}-#{$scale} { margin-bottom: $size !important; } + + .my#{$variant}-#{$scale} { + margin-top: $size !important; + margin-bottom: $size !important; + } + } + } +} diff --git a/assets/sass/@primer/css/marketing/utilities/padding.scss b/assets/sass/@primer/css/marketing/utilities/padding.scss new file mode 100644 index 0000000..906e148 --- /dev/null +++ b/assets/sass/@primer/css/marketing/utilities/padding.scss @@ -0,0 +1,24 @@ +// Padding spacer utilities for marketing +// stylelint-disable block-opening-brace-space-before + +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + @each $scale, $size in $marketing-all-spacers { + // Set a #{$size} padding for all sides + .p#{$variant}-#{$scale} { padding: #{$size} !important; } + // Set a #{$size} padding to the top + .pt#{$variant}-#{$scale} { padding-top: #{$size} !important; } + // Set a #{$size} padding to the right + .pr#{$variant}-#{$scale} { padding-right: #{$size} !important; } + // Set a #{$size} padding to the bottom + .pb#{$variant}-#{$scale} { padding-bottom: #{$size} !important; } + // Set a #{$size} padding to the left + .pl#{$variant}-#{$scale} { padding-left: #{$size} !important; } + // Set a #{$size} padding to the top & bottom + .py#{$variant}-#{$scale} { + padding-top: #{$size} !important; + padding-bottom: #{$size} !important; + } + } + } +} |