diff options
Diffstat (limited to 'docs/src/less/components')
-rw-r--r-- | docs/src/less/components/base.less | 45 | ||||
-rw-r--r-- | docs/src/less/components/buttons.less | 144 | ||||
-rw-r--r-- | docs/src/less/components/error.less | 19 | ||||
-rw-r--r-- | docs/src/less/components/examples.less | 39 | ||||
-rw-r--r-- | docs/src/less/components/panels.less | 13 | ||||
-rw-r--r-- | docs/src/less/components/type.less | 47 |
6 files changed, 307 insertions, 0 deletions
diff --git a/docs/src/less/components/base.less b/docs/src/less/components/base.less new file mode 100644 index 00000000..81a68058 --- /dev/null +++ b/docs/src/less/components/base.less @@ -0,0 +1,45 @@ +// ========================================================================== +// Base layout +// ========================================================================== + +// BORDER-BOX ALL THE THINGS! +// http://paulirish.com/2012/box-sizing-border-box-ftw/ +*, *::after, *::before { + box-sizing: border-box; +} + +// Base +html { + font-size: 100%; +} +body { + font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; + background: @body-background; + line-height: 1.5; + text-align: center; + color: @gray; + .font-smoothing(on); +} + +// 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 { + padding-bottom: @padding-base; + + @media (min-width: @screen-sm) { + padding-bottom: (@padding-base * 2); + } +}
\ No newline at end of file diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less new file mode 100644 index 00000000..749cd11f --- /dev/null +++ b/docs/src/less/components/buttons.less @@ -0,0 +1,144 @@ +// ========================================================================== +// 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; + + &::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; + } + } + .btn { + display: block; + border-radius: 0; + } + .active { + &:extend(.btn-primary); + } + .btn.active { + box-shadow: inset 0 1px 1px rgba(0,0,0, .2); + position: relative; + 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; + font-weight: 600; + user-select: none; +} + +// Buttons +.btn { + padding: (@padding-base / 2) @padding-base; + background: @body-background; + border: 1px solid @gray-light; + box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05); + text-shadow: 0 1px 1px #fff; + color: @gray; + + &:hover, + &:focus { + background-color: #fff; + border-color: darken(@gray-light, 5%); + color: @link-color; + outline: 0; + } +} +.btn-primary { + background: linear-gradient(@link-color, darken(@link-color, 3%)); + 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-small { + padding-top: ceil(@padding-base / 3); + padding-bottom: ceil(@padding-base / 3); +} + +// Count bubble +.btn-count { + position: relative; + margin-left: 6px; + padding: ((@padding-base / 2) - 1px); + background: @body-background; + 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%); + } +}
\ No newline at end of file diff --git a/docs/src/less/components/error.less b/docs/src/less/components/error.less new file mode 100644 index 00000000..b1427173 --- /dev/null +++ b/docs/src/less/components/error.less @@ -0,0 +1,19 @@ +// ========================================================================== +// 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/docs/src/less/components/examples.less b/docs/src/less/components/examples.less new file mode 100644 index 00000000..9c145847 --- /dev/null +++ b/docs/src/less/components/examples.less @@ -0,0 +1,39 @@ +// ========================================================================== +// Examples +// ========================================================================== + +// Example players +.example-audio .player, +.example-video .player { + margin: 0 auto @padding-base; + + &-controls { + border-radius: 0 0 @border-radius-base @border-radius-base; + } +} +.example-audio .player { + max-width: @example-width-audio; + + &-controls { + border-radius: @border-radius-base; + } + &-progress { + border-radius: @border-radius-base @border-radius-base 0 0; + overflow: hidden; + } +} +.example-video .player { + max-width: @example-width-video; + + video, + iframe { + border-radius: @border-radius-base @border-radius-base 0 0; + } + iframe { + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); + } + &-fullscreen, + &.fullscreen-active { + max-width: none; + } +}
\ No newline at end of file diff --git a/docs/src/less/components/panels.less b/docs/src/less/components/panels.less new file mode 100644 index 00000000..290e5dfc --- /dev/null +++ b/docs/src/less/components/panels.less @@ -0,0 +1,13 @@ +// ========================================================================== +// Panels +// ========================================================================== + +// Panels +.panel { + display: none; + + &.active { + display: block; + animation: fade-in .3s ease; + } +}
\ No newline at end of file diff --git a/docs/src/less/components/type.less b/docs/src/less/components/type.less new file mode 100644 index 00000000..97652342 --- /dev/null +++ b/docs/src/less/components/type.less @@ -0,0 +1,47 @@ +// ========================================================================== +// Typography +// ========================================================================== + +// Headings +h1, +h2 { + letter-spacing: -.025em; + color: #2E3C44; + margin: 0 0 (@padding-base / 2); + line-height: 1.2; + .font-smoothing(); +} +h1 { + .font-size(64); + color: #3498DB; +} + +// Paragraph and small +p, +small { + margin: 0 0 @padding-base; +} +small { + display: block; + padding: 0 (@padding-base / 2); + .font-size(14); +} + +// Links +a { + text-decoration: none; + color: @link-color; + border-bottom: 1px solid currentColor; + transition: background .3s ease, color .3s ease; + + &:hover, + &:focus { + color: @gray-dark; + } + &:focus { + .tab-focus(); + } + &.logo { + border: 0; + } +}
\ No newline at end of file |