aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/include
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-04-02 11:39:14 +0200
committerRigel Kent <sendmemail@rigelk.eu>2020-04-02 11:39:14 +0200
commita6d5ff7604a3c2a94ff8814e2df7ca7bb2b48634 (patch)
treed8b27f30741ae3c9a2a72c68210644c16cd8d9b3 /client/src/sass/include
parent21973012ab06a93dd901821dbbe078eb793bac4d (diff)
downloadPeerTube-a6d5ff7604a3c2a94ff8814e2df7ca7bb2b48634.tar.gz
PeerTube-a6d5ff7604a3c2a94ff8814e2df7ca7bb2b48634.tar.zst
PeerTube-a6d5ff7604a3c2a94ff8814e2df7ca7bb2b48634.zip
Use form-control to display box-shadow on form inputs/selects upon focus
Diffstat (limited to 'client/src/sass/include')
-rw-r--r--client/src/sass/include/_mixins.scss87
-rw-r--r--client/src/sass/include/_variables.scss3
2 files changed, 82 insertions, 8 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index f96a43b34..76e3f3f97 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -80,9 +80,10 @@
80 } 80 }
81} 81}
82 82
83@mixin button-focus-visible-shadow($color) { 83@mixin button-focus($color) {
84 &:focus,
84 &.focus-visible { 85 &.focus-visible {
85 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color; 86 box-shadow: 0 0 0 .2rem $color;
86 } 87 }
87} 88}
88 89
@@ -127,7 +128,7 @@
127} 128}
128 129
129@mixin orange-button { 130@mixin orange-button {
130 @include button-focus-visible-shadow(var(--mainHoverColor)); 131 @include button-focus(var(--mainColorLightest));
131 132
132 &, &:active, &:focus { 133 &, &:active, &:focus {
133 color: #fff; 134 color: #fff;
@@ -151,6 +152,8 @@
151} 152}
152 153
153@mixin tertiary-button { 154@mixin tertiary-button {
155 @include button-focus($grey-button-outline-color);
156
154 color: $grey-foreground-color; 157 color: $grey-foreground-color;
155 background-color: transparent; 158 background-color: transparent;
156 159
@@ -164,6 +167,8 @@
164} 167}
165 168
166@mixin grey-button { 169@mixin grey-button {
170 @include button-focus($grey-button-outline-color);
171
167 &, &:active, &:focus { 172 &, &:active, &:focus {
168 background-color: $grey-background-color; 173 background-color: $grey-background-color;
169 color: $grey-foreground-color; 174 color: $grey-foreground-color;
@@ -274,10 +279,8 @@
274@mixin peertube-select-container ($width) { 279@mixin peertube-select-container ($width) {
275 padding: 0; 280 padding: 0;
276 margin: 0; 281 margin: 0;
277 border: 1px solid #C6C6C6;
278 width: $width; 282 width: $width;
279 border-radius: 3px; 283 border-radius: 3px;
280 overflow: hidden;
281 background: var(--inputBackgroundColor); 284 background: var(--inputBackgroundColor);
282 position: relative; 285 position: relative;
283 font-size: 15px; 286 font-size: 15px;
@@ -303,8 +306,7 @@
303 width: calc(100% + 2px); 306 width: calc(100% + 2px);
304 position: relative; 307 position: relative;
305 left: 1px; 308 left: 1px;
306 border: none; 309 border: 1px solid #C6C6C6;
307 box-shadow: none;
308 background: transparent none; 310 background: transparent none;
309 appearance: none; 311 appearance: none;
310 cursor: pointer; 312 cursor: pointer;
@@ -370,7 +372,7 @@
370 position: absolute; 372 position: absolute;
371 373
372 &:focus + span { 374 &:focus + span {
373 box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); 375 box-shadow: 0 0 0 .2rem var(--mainColorLightest);
374 } 376 }
375 377
376 & + span { 378 & + span {
@@ -703,3 +705,72 @@
703 text-align: center; 705 text-align: center;
704 } 706 }
705} 707}
708
709@mixin ng2-tags {
710 ::ng-deep {
711 .ng2-tag-input {
712 border: none !important;
713 }
714
715 .ng2-tags-container {
716 display: flex;
717 align-items: center;
718 border: 1px solid #C6C6C6;
719 border-radius: 3px;
720 padding: 5px !important;
721 height: max-content;
722
723 &:focus-within {
724 box-shadow: 0 0 0 .2rem var(--mainColorLightest);
725 }
726 }
727
728 tag-input-form {
729 input {
730 height: 30px !important;
731 font-size: 12px !important;
732
733 background-color: var(--mainBackgroundColor) !important;
734 color: var(--mainForegroundColor) !important;
735 }
736 }
737
738 tag {
739 background-color: $grey-background-color !important;
740 color: #000 !important;
741 border-radius: 3px !important;
742 font-size: 12px !important;
743 height: 30px !important;
744 line-height: 30px !important;
745 margin: 0 5px 0 0 !important;
746 cursor: default !important;
747 padding: 0 8px 0 10px !important;
748
749 div {
750 height: 100% !important;
751 }
752 }
753
754 delete-icon {
755 cursor: pointer !important;
756 height: auto !important;
757 vertical-align: middle !important;
758 padding-left: 6px !important;
759
760 svg {
761 position: relative;
762 top: -1px;
763 height: auto !important;
764 vertical-align: middle !important;
765
766 path {
767 fill: $grey-foreground-color !important;
768 }
769 }
770
771 &:hover {
772 transform: none !important;
773 }
774 }
775 }
776}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 3c9fa5939..d0f1a3630 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -12,11 +12,13 @@ $grey-background-color: #E5E5E5;
12$grey-background-hover-color: #EFEFEF; 12$grey-background-hover-color: #EFEFEF;
13$grey-foreground-color: #585858; 13$grey-foreground-color: #585858;
14$grey-foreground-hover-color: #303030; 14$grey-foreground-hover-color: #303030;
15$grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%);
15 16
16// Palette 17// Palette
17$main-color: hsl(24, 90%, 50%); 18$main-color: hsl(24, 90%, 50%);
18$main-hover-color: lighten($main-color, 5%); 19$main-hover-color: lighten($main-color, 5%);
19$main-color-lighter: lighten($main-color, 10%); 20$main-color-lighter: lighten($main-color, 10%);
21$main-color-lightest: lighten($main-color, 40%);
20$secondary-color: hsl(187, 77, 34); 22$secondary-color: hsl(187, 77, 34);
21// 23//
22 24
@@ -77,6 +79,7 @@ $activated-action-button-color: black;
77$variables: ( 79$variables: (
78 --mainColor: var(--mainColor), 80 --mainColor: var(--mainColor),
79 --mainColorLighter: var(--mainColorLighter), 81 --mainColorLighter: var(--mainColorLighter),
82 --mainColorLightest: var(--mainColorLightest),
80 --mainHoverColor: var(--mainHoverColor), 83 --mainHoverColor: var(--mainHoverColor),
81 --mainBackgroundColor: var(--mainBackgroundColor), 84 --mainBackgroundColor: var(--mainBackgroundColor),
82 --mainForegroundColor: var(--mainForegroundColor), 85 --mainForegroundColor: var(--mainForegroundColor),