aboutsummaryrefslogtreecommitdiffstats
path: root/docs/src/less/components
diff options
context:
space:
mode:
Diffstat (limited to 'docs/src/less/components')
-rw-r--r--docs/src/less/components/buttons.less52
-rw-r--r--docs/src/less/components/examples.less82
-rw-r--r--docs/src/less/components/panels.less13
-rw-r--r--docs/src/less/components/type.less12
4 files changed, 82 insertions, 77 deletions
diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less
index 1401cd01..fef9af68 100644
--- a/docs/src/less/components/buttons.less
+++ b/docs/src/less/components/buttons.less
@@ -21,7 +21,7 @@ nav {
}
// Tabs
-.btn-bar {
+.btn__bar {
position: relative;
margin: 0 auto @padding-base;
max-width: @example-width-video;
@@ -55,21 +55,29 @@ nav {
& + 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;
- }
- .active {
- &:extend(.btn-primary);
- }
- .btn.active {
- box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
- position: relative;
- z-index: 1;
- .icon {
- color: inherit;
+ &:hover,
+ &:focus {
+ z-index: 1;
}
}
@@ -80,7 +88,7 @@ nav {
// Shared
.btn,
-.btn-count {
+.btn__count {
display: inline-block;
vertical-align: middle;
border-radius: @border-radius-base;
@@ -91,12 +99,12 @@ nav {
// Buttons
.btn {
padding: (@padding-base / 2) @padding-base;
- background: @body-background;
+ background: linear-gradient(lighten(@body-background, 2%), darken(@body-background, 3%));
border: 1px solid @gray-light;
- box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05);
+ box-shadow: 0 1px 1px rgba(0,0,0, .05);
text-shadow: 0 1px 1px #fff;
color: @gray;
- transition: background .3s ease, border .3s ease, color .3s ease;
+ transition: background .1s ease, color .1s ease;
&:hover,
&:focus {
@@ -104,18 +112,18 @@ nav {
color: @gray;
outline: 0;
}
- &-youtube .icon {
+ &--youtube .icon {
color: @color-youtube;
}
- &-vimeo .icon {
+ &--vimeo .icon {
color: @color-vimeo;
}
- &-twitter .icon {
+ &--twitter .icon {
color: @color-twitter;
}
}
-.btn-primary {
- background-image: linear-gradient(@link-color, darken(@link-color, 3%));
+.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);
@@ -128,13 +136,13 @@ nav {
border-color: darken(@link-color, 20%);
}
}
-.btn-small {
+.btn--small {
padding-top: ceil(@padding-base / 3);
padding-bottom: ceil(@padding-base / 3);
}
// Count bubble
-.btn-count {
+.btn__count {
position: relative;
margin-left: (@padding-base / 2);
padding: (@padding-base / 2) (@padding-base * .75);
diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less
index 97087b02..6dde9690 100644
--- a/docs/src/less/components/examples.less
+++ b/docs/src/less/components/examples.less
@@ -2,54 +2,31 @@
// Examples
// ==========================================================================
+video,
+.plyr__video-embed {
+ border-radius: @border-radius-base;
+}
+.plyr__video-embed {
+ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+}
+
// Example players
-.example-audio .player,
-.example-video .player {
+.plyr {
margin: 0 auto @padding-base;
+ max-width: @example-width-video;
- &-controls {
+ &__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;
- }
-}
-// Base styles
-.example-video .player {
- max-width: @example-width-video;
-
video,
- iframe {
- border-radius: @border-radius-base;
- }
- iframe {
- -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
- }
-}
-
-// Style full supported player
-.example-video .player-video,
-.example-video .player-youtube {
- video,
- iframe {
+ .plyr__video-embed {
border-radius: @border-radius-base @border-radius-base 0 0;
}
- iframe {
- -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
- }
- &-fullscreen,
- &.fullscreen-active {
+ &--fullscreen,
+ &--fullscreen-active {
max-width: none;
- .player-controls,
+ .plyr-controls,
video,
iframe {
border-radius: 0;
@@ -58,4 +35,31 @@
-webkit-mask-image: none;
}
}
-} \ No newline at end of file
+}
+.plyr--audio {
+ max-width: @example-width-audio;
+
+ .plyr__controls {
+ border-radius: @border-radius-base;
+ }
+ .plyr__progress {
+ border-radius: @border-radius-base @border-radius-base 0 0;
+ overflow: hidden;
+ }
+}
+
+// Style full supported player
+.plyr__cite {
+ display: none;
+
+ .icon {
+ margin-right: (@padding-base / 4);
+ }
+}
+
+.plyr--video ~ 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/docs/src/less/components/panels.less b/docs/src/less/components/panels.less
deleted file mode 100644
index 290e5dfc..00000000
--- a/docs/src/less/components/panels.less
+++ /dev/null
@@ -1,13 +0,0 @@
-// ==========================================================================
-// 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
index 8fc200e2..854da12d 100644
--- a/docs/src/less/components/type.less
+++ b/docs/src/less/components/type.less
@@ -26,7 +26,13 @@ small {
padding: 0 (@padding-base / 2);
.font-size(14);
}
-ul
+sup {
+ vertical-align: 2px;
+ .font-size(9);
+}
+
+// Lists
+ul,
li {
list-style: none;
margin: 0;
@@ -53,9 +59,9 @@ a {
}
}
-.color-vimeo {
+.color--vimeo {
color: @color-vimeo;
}
-.color-youtube {
+.color--youtube {
color: @color-youtube;
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-14 09:20:34 +0000