diff options
Diffstat (limited to 'demo/src/less/components')
-rw-r--r-- | demo/src/less/components/buttons.less | 83 | ||||
-rw-r--r-- | demo/src/less/components/header.less | 19 | ||||
-rw-r--r-- | demo/src/less/components/icons.less | 23 | ||||
-rw-r--r-- | demo/src/less/components/links.less | 46 | ||||
-rw-r--r-- | demo/src/less/components/lists.less | 11 | ||||
-rw-r--r-- | demo/src/less/components/navigation.less | 9 | ||||
-rw-r--r-- | demo/src/less/components/players.less | 49 |
7 files changed, 0 insertions, 240 deletions
diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less deleted file mode 100644 index a8a15682..00000000 --- a/demo/src/less/components/buttons.less +++ /dev/null @@ -1,83 +0,0 @@ -// ========================================================================== -// Buttons -// ========================================================================== - -// Shared -.button, -.button__count { - position: relative; - display: inline-flex; - vertical-align: middle; - align-items: center; - padding: (@spacing-base * 0.75); - border-radius: @border-radius-base; - box-shadow: 0 1px 1px fade(#000, 10%); - background: #fff; - border: 0; - user-select: none; - text-shadow: none; - color: @gray; -} - -// Buttons -.button { - padding-left: @spacing-base; - padding-right: @spacing-base; - transition: all 0.2s ease; - font-weight: @font-weight-bold; - - &:hover, - &:focus { - color: @gray-dark; - - // Remove the underline/border - &::after { - display: none; - } - } - - &:hover { - transform: translateY(-1px); - box-shadow: 0 2px 2px fade(#000, 10%); - } - - &:focus { - outline: 0; - } - - &.tab-focus { - .tab-focus(); - } - - &:active { - transform: translateY(1px); - } -} - -// Button group -.button--with-count { - display: inline-flex; - - .button .icon { - flex-shrink: 0; - } -} - -// Count bubble -.button__count { - margin-left: (@spacing-base / 2); - animation: fadein 0.2s ease; - - &::before { - content: ''; - position: absolute; - width: 0; - height: 0; - right: 100%; - top: 50%; - transform: translateY(-50%); - border: @arrow-size solid transparent; - border-right-color: #fff; - border-left-width: 0; - } -} diff --git a/demo/src/less/components/header.less b/demo/src/less/components/header.less deleted file mode 100644 index fc7bf63a..00000000 --- a/demo/src/less/components/header.less +++ /dev/null @@ -1,19 +0,0 @@ -// ========================================================================== -// Header -// ========================================================================== - -header { - padding-bottom: @spacing-base; - text-align: center; - - .call-to-action { - margin-top: (@spacing-base * 1.5); - } - - @media @mq-md { - max-width: 360px; - margin-right: (@spacing-base * 3); - padding-bottom: (@spacing-base * 2); - text-align: left; - } -} diff --git a/demo/src/less/components/icons.less b/demo/src/less/components/icons.less deleted file mode 100644 index 92b0567e..00000000 --- a/demo/src/less/components/icons.less +++ /dev/null @@ -1,23 +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: floor(@spacing-base / 3); -} diff --git a/demo/src/less/components/links.less b/demo/src/less/components/links.less deleted file mode 100644 index 7a62ab40..00000000 --- a/demo/src/less/components/links.less +++ /dev/null @@ -1,46 +0,0 @@ -// ========================================================================== -// Links -// ========================================================================== - -// Make a <button> look like an <a> -button.faux-link { - .cancel-button-styles(); - - &:extend(a all); -} - -// Links -a { - position: relative; - border-bottom: 1px dotted currentColor; - transition: all 0.2s ease; - text-decoration: none; - color: @color-link; - font-weight: @font-weight-bold; - - &::after { - content: ''; - position: absolute; - top: 100%; - left: 50%; - transform: translateX(-50%); - width: 0; - height: 1px; - transition: width 0.2s ease; - background: currentColor; - } - - &:hover, - &:focus { - border-bottom-color: transparent; - outline: 0; - - &::after { - width: 100%; - } - } - - &.tab-focus { - .tab-focus(); - } -} diff --git a/demo/src/less/components/lists.less b/demo/src/less/components/lists.less deleted file mode 100644 index bae3d11d..00000000 --- a/demo/src/less/components/lists.less +++ /dev/null @@ -1,11 +0,0 @@ -// ========================================================================== -// Lists -// ========================================================================== - -// Lists -ul, -li { - list-style: none; - margin: 0; - padding: 0; -} diff --git a/demo/src/less/components/navigation.less b/demo/src/less/components/navigation.less deleted file mode 100644 index 0b80f7e8..00000000 --- a/demo/src/less/components/navigation.less +++ /dev/null @@ -1,9 +0,0 @@ -// ========================================================================== -// Navigation -// ========================================================================== - -nav { - display: flex; - justify-content: center; - margin-bottom: @spacing-base; -} diff --git a/demo/src/less/components/players.less b/demo/src/less/components/players.less deleted file mode 100644 index 19ffd7df..00000000 --- a/demo/src/less/components/players.less +++ /dev/null @@ -1,49 +0,0 @@ -// ========================================================================== -// Examples -// ========================================================================== - -// For non supported browsers -video { - max-width: 100%; - vertical-align: middle; -} - -// Example players -.plyr { - margin: @spacing-base auto; - border-radius: @border-radius-base; - box-shadow: 0 2px 5px fade(#000, 20%); - - &.plyr--audio { - max-width: 480px; - } -} - -.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: @spacing-base; - - .icon { - margin-right: ceil(@spacing-base / 6); - } -} - -.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; -} |