diff options
Diffstat (limited to 'demo/src/less/components')
-rw-r--r-- | demo/src/less/components/base.less | 48 | ||||
-rw-r--r-- | demo/src/less/components/buttons.less | 172 | ||||
-rw-r--r-- | demo/src/less/components/error.less | 19 | ||||
-rw-r--r-- | demo/src/less/components/examples.less | 46 | ||||
-rw-r--r-- | demo/src/less/components/icons.less | 26 | ||||
-rw-r--r-- | demo/src/less/components/type.less | 75 |
6 files changed, 0 insertions, 386 deletions
diff --git a/demo/src/less/components/base.less b/demo/src/less/components/base.less deleted file mode 100644 index 502196cf..00000000 --- a/demo/src/less/components/base.less +++ /dev/null @@ -1,48 +0,0 @@ -// ========================================================================== -// Base layout -// ========================================================================== - -// BORDER-BOX ALL THE THINGS! -// http://paulirish.com/2012/box-sizing-border-box-ftw/ -*, *::after, *::before { - box-sizing: border-box; -} - -// Hidden -[hidden] { - display: none; -} - -// Base -html { - height: 100%; - background: @body-background fixed; -} -body { - margin: 0; - padding: (@padding-base / 2); -} - -// Header -header { - padding: @padding-base; - margin-bottom: @padding-base; - - p { - .font-size(18); - } - @media (min-width: @screen-sm) { - padding-top: (@padding-base * 3); - padding-bottom: (@padding-base * 3); - } -} - -// Sections -section { - max-width: @example-width-video; - margin: 0 auto @padding-base; - - @media (min-width: @screen-sm) { - margin-bottom: (@padding-base * 2); - } -}
\ No newline at end of file diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less deleted file mode 100644 index c99a0836..00000000 --- a/demo/src/less/components/buttons.less +++ /dev/null @@ -1,172 +0,0 @@ -// ========================================================================== -// Buttons -// ========================================================================== - -nav { - ul { - list-style: none; - margin: 0; - padding: 0; - font-size: 0; - } - li { - display: inline-block; - margin-top: (@padding-base / 2); - .font-size(); - white-space: nowrap; - } - li + li { - margin-left: @padding-base; - } -} - -// Tabs -.btn__bar { - position: relative; - margin: 0 auto @padding-base; - max-width: @example-width-video; - white-space: nowrap; - - &::before { - content: ""; - position: absolute; - top: 50%; - left: 0; - right: 0; - height: 1px; - background: @gray-lighter; - } - - ul { - position: relative; - z-index: 1; - display: inline-block; - user-select: none; - } - li { - margin: 0; - - &:first-child .btn { - border-radius: 4px 0 0 4px; - } - &:last-child .btn { - border-radius: 0 4px 4px 0; - } - & + li .btn { - margin-left: -1px; - } - - &.active .btn { - &:extend(.btn--primary); - box-shadow: inset 0 1px 1px rgba(0,0,0, .2); - position: relative; - z-index: 1; - - .icon { - color: inherit; - } - } - &.active + li .btn:hover { - z-index: 0; - } - } - .btn { - position: relative; - display: block; - border-radius: 0; - - &:hover, - &:focus { - z-index: 1; - } - } - - @media (min-width: 560px) { - margin-bottom: (@padding-base * 2); - } -} - -// Shared -.btn, -.btn__count { - display: inline-block; - vertical-align: middle; - border-radius: @border-radius-base; - user-select: none; - font-weight: @font-weight-bold; -} - -// Buttons -.btn { - padding: (@padding-base / 2) ((@padding-base / 2) + 2); - background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%)); - border: 1px solid @gray-light; - box-shadow: 0 1px 1px rgba(0,0,0, .05); - text-shadow: 0 1px 1px #fff; - color: @gray; - transition: background .1s ease, color .1s ease; - .font-size(@font-size-small); - - &:hover, - &:focus { - border-color: darken(@gray-light, 8%); - color: @gray; - outline: 0; - } -} - -// Sizes -.btn--large { - padding: (@padding-base / 2) @padding-base; - .font-size(); -} - -// Styles -.btn--primary { - background-image: linear-gradient(@link-color, darken(@link-color, 5%)); - background-color: @link-color; - border-color: darken(@link-color, 10%); - box-shadow: 0 1px 1px rgba(0,0,0, .15); - text-shadow: 0 1px 1px rgba(0,0,0, .1); - color: #fff; - - &:hover, - &:focus { - color: #fff; - border-color: darken(@link-color, 20%); - } -} -.btn--youtube .icon { - color: @color-youtube; -} -.btn--vimeo .icon { - color: @color-vimeo; -} -.btn--twitter .icon { - color: @color-twitter; -} - -// Count bubble -.btn__count { - position: relative; - margin-left: (@padding-base / 2); - padding: (@padding-base / 2) (@padding-base * .75); - background: #fff; - border: 1px solid @gray-light; - - &::before { - content: ""; - position: absolute; - display: block; - width: @arrow-size; - height: @arrow-size; - left: 1px; - top: 50%; - margin-top: -(@arrow-size / 2); - - background: inherit; - border: inherit; - border-width: 1px 0 0 1px; - transform: rotate(-45deg) translate(-50%, -50%); - } -} diff --git a/demo/src/less/components/error.less b/demo/src/less/components/error.less deleted file mode 100644 index b1427173..00000000 --- a/demo/src/less/components/error.less +++ /dev/null @@ -1,19 +0,0 @@ -// ========================================================================== -// Errors (AWS pages) -// ========================================================================== - -// Error page -html.error, -.error body { - height: 100%; -} -.error body { - width: 100%; - display: table; - table-layout: fixed; -} -.error main { - display: table-cell; - width: 100%; - vertical-align: middle; -}
\ No newline at end of file diff --git a/demo/src/less/components/examples.less b/demo/src/less/components/examples.less deleted file mode 100644 index a9e72d21..00000000 --- a/demo/src/less/components/examples.less +++ /dev/null @@ -1,46 +0,0 @@ -// ========================================================================== -// Examples -// ========================================================================== - -// For non supported browsers -video { - max-width: 100%; - vertical-align: middle; -} - -// Example players -.plyr { - margin: 0 auto; - border-radius: @border-radius-large; -} -.plyr--audio { - max-width: @example-width-audio; -} -.plyr__video-wrapper::after { - content: ""; - pointer-events: none; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: 1px solid fade(#000, 15%); - border-radius: inherit; -} - -// Style full supported player -.plyr__cite { - display: none; - margin-top: @padding-base; - - .icon { - margin-right: (@padding-base / 4); - } -} - -.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video, -.plyr--audio ~ ul .plyr__cite--audio, -.plyr--youtube ~ ul .plyr__cite--youtube, -.plyr--vimeo ~ ul .plyr__cite--vimeo { - display: block; -} diff --git a/demo/src/less/components/icons.less b/demo/src/less/components/icons.less deleted file mode 100644 index 9530b601..00000000 --- a/demo/src/less/components/icons.less +++ /dev/null @@ -1,26 +0,0 @@ -// ========================================================================== -// Icons -// ========================================================================== - -// Base size icon styles -.icon { - fill: currentColor; - width: @icon-size; - height: @icon-size; - vertical-align: -3px; -} - -// Within elements -a svg, -button svg, -label svg { - pointer-events: none; -} -a .icon, -.btn .icon { - margin-right: (@padding-base / 2); -} -.btn:not(.btn-large) .icon { - width: (@icon-size - 2); - height: (@icon-size - 2); -} diff --git a/demo/src/less/components/type.less b/demo/src/less/components/type.less deleted file mode 100644 index 951be36d..00000000 --- a/demo/src/less/components/type.less +++ /dev/null @@ -1,75 +0,0 @@ -// ========================================================================== -// Typography -// ========================================================================== - -// Base -html { - font-size: 100%; -} -body { - font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; - line-height: 1.5; - text-align: center; - color: @gray; - font-weight: @font-weight-base; - .font-smoothing(); -} - -// Headings -h1, -h2 { - letter-spacing: -.025em; - color: @brand-primary; - margin: 0 0 (@padding-base / 2); - line-height: 1.2; - font-weight: @font-weight-bold; -} -h1 { - .font-size(@font-size-h1); -} - -// Paragraph and small -p, -small { - margin: 0 0 @padding-base; -} -small { - display: block; - padding: 0 (@padding-base / 2); - .font-size(@font-size-small); -} - -// Lists -ul, -li { - list-style: none; - margin: 0; - padding: 0; -} - -// Links -a { - text-decoration: none; - color: @link-color; - border-bottom: 1px dotted currentColor; - transition: background .3s ease, color .3s ease, border .3s ease; - - &:hover, - &:focus { - color: @gray-dark; - border-bottom-color: rgba(0,0,0,0); - } - &:focus { - .tab-focus(); - } - &.logo { - border: 0; - } -} - -.color--vimeo { - color: @color-vimeo; -} -.color--youtube { - color: @color-youtube; -} |