aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/include
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2017-12-20 14:29:55 +0100
committerChocobozzz <me@florianbigard.com>2017-12-20 14:29:55 +0100
commit15a7387da888492068e2ce3d1e39639d142f6c6e (patch)
tree8eaec71d11c19a97dc99e4d9812dfc0c646dd9e7 /client/src/sass/include
parenta4b8a4ddccc926e0670d3687cccd52496f6f8a8f (diff)
downloadPeerTube-15a7387da888492068e2ce3d1e39639d142f6c6e.tar.gz
PeerTube-15a7387da888492068e2ce3d1e39639d142f6c6e.tar.zst
PeerTube-15a7387da888492068e2ce3d1e39639d142f6c6e.zip
Customize select
Diffstat (limited to 'client/src/sass/include')
-rw-r--r--client/src/sass/include/_mixins.scss71
1 files changed, 61 insertions, 10 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index fdf5e3f67..4a709404d 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -23,10 +23,12 @@
23} 23}
24 24
25@mixin orange-button { 25@mixin orange-button {
26 color: #fff; 26 &, &:active, &:focus {
27 background-color: $orange-color; 27 color: #fff;
28 background-color: $orange-color;
29 }
28 30
29 &:hover, &:active, &:focus { 31 &:hover {
30 color: #fff; 32 color: #fff;
31 background-color: $orange-hoover-color; 33 background-color: $orange-hoover-color;
32 } 34 }
@@ -39,8 +41,10 @@
39} 41}
40 42
41@mixin grey-button { 43@mixin grey-button {
42 background-color: $grey-color; 44 &, &:active, &:focus {
43 color: #585858; 45 background-color: $grey-color;
46 color: #585858;
47 }
44 48
45 &:hover, &:active, &:focus, &[disabled], &.disabled { 49 &:hover, &:active, &:focus, &[disabled], &.disabled {
46 color: #585858; 50 color: #585858;
@@ -88,12 +92,59 @@
88} 92}
89 93
90 94
91@mixin peertube-select ($width) { 95@mixin peertube-select-container ($width) {
92 background-color: #fff; 96 padding: 0;
97 margin: 0;
93 border: 1px solid #C6C6C6; 98 border: 1px solid #C6C6C6;
94 height: $button-height;
95 width: $width; 99 width: $width;
96 border-radius: 3px; 100 border-radius: 3px;
97 padding-left: 15px; 101 overflow: hidden;
98 padding-right: 15px; 102 background: #fff;
103 position: relative;
104
105 &:after {
106 top: 50%;
107 right: calc(0% + 15px);
108 content: " ";
109 height: 0;
110 width: 0;
111 position: absolute;
112 pointer-events: none;
113 border: 5px solid rgba(0, 0, 0, 0);
114 border-top-color: #000000;
115 margin-top: -2px;
116 z-index: 100;
117 }
118
119 select {
120 padding: 0 12px;
121 width: calc(100% + 2px);
122 position: relative;
123 left: 1px;
124 border: none;
125 box-shadow: none;
126 background: transparent none;
127 appearance: none;
128 cursor: pointer;
129 height: $button-height;
130
131 &:focus {
132 outline: none;
133 }
134
135 &:-moz-focusring {
136 color: transparent;
137 text-shadow: 0 0 0 #000;
138 }
139 }
140}
141
142@mixin peertube-select-disabled-container ($width) {
143 @include peertube-select-container($width);
144
145 background-color: #E5E5E5;
146
147 select {
148 cursor: default;
149 }
99} 150}