interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Put box-shadow for input focus in variables, apply form-control to p-multiselect

This commit is contained in:
Rigel Kent 2020-04-03 12:30:52 +02:00
parent 23f1b9da15
commit 6a4c30de0e
No known key found for this signature in database
GPG Key ID: 5E53E96A494E452F
8 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
View File

@ -8,10 +8,6 @@
&:first-child { &:first-child {
font-size: 16px; font-size: 16px;
& > div {
font-weight: $font-semibold;
}
} }
& > div { & > div {

4
client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
View File

@ -1,5 +1,5 @@
<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form"> <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
<div class="form-group"> <div class="form-group form-group-select">
<label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label> <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label>
<my-help> <my-help>
<ng-template ptTemplate="customHtml"> <ng-template ptTemplate="customHtml">
@ -18,7 +18,7 @@
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group form-group-select">
<label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label> <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label>
<my-help> <my-help>
<ng-template ptTemplate="customHtml"> <ng-template ptTemplate="customHtml">

6
client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
View File

@ -17,4 +17,8 @@ input[type=submit] {
@include peertube-select-container(340px); @include peertube-select-container(340px);
margin-bottom: 30px; margin-bottom: 30px;
} }
.form-group-select {
margin-bottom: 30px;
}

4
client/src/sass/bootstrap.scss vendored
View File

@ -240,10 +240,10 @@ ngb-tooltip-window {
&:focus-within, &:focus-within,
&:focus { &:focus {
box-shadow: 0 0 0 .2rem var(--mainColorLightest); box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
&.input-error { &.input-error {
box-shadow: 0 0 0 .2rem #{scale-color($red, $alpha: -75%)}; box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
} }
} }
} }

3
client/src/sass/include/_miniature.scss
View File

@ -80,7 +80,8 @@ $play-overlay-width: 18px;
} }
&.focus-visible { &.focus-visible {
box-shadow: 0 0 0 2px var(--mainColor); box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
outline: none;
} }
img { img {

6
client/src/sass/include/_mixins.scss
View File

@ -83,7 +83,7 @@
@mixin button-focus($color) { @mixin button-focus($color) {
&:focus, &:focus,
&.focus-visible { &.focus-visible {
box-shadow: 0 0 0 .2rem $color; box-shadow: #{$focus-box-shadow-form} $color;
} }
} }
@ -372,7 +372,7 @@
position: absolute; position: absolute;
&:focus + span { &:focus + span {
box-shadow: 0 0 0 .2rem var(--mainColorLightest); box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
} }
& + span { & + span {
@ -721,7 +721,7 @@
height: max-content; height: max-content;
&:focus-within { &:focus-within {
box-shadow: 0 0 0 .2rem var(--mainColorLightest); box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
} }
} }

2
client/src/sass/include/_variables.scss
View File

@ -72,6 +72,8 @@ $sub-menu-margin-bottom: 30px;
$activated-action-button-color: black; $activated-action-button-color: black;
$focus-box-shadow-form: 0 0 0 .2rem;
/*** map theme ***/ /*** map theme ***/
// pass variables into a sass map, // pass variables into a sass map,

15
client/src/sass/primeng-custom.scss
View File

@ -241,6 +241,21 @@ p-table {
// multiselect customizations // multiselect customizations
p-multiselect { p-multiselect {
.ui-multiselect {
border-color: #C6C6C6;
&:not(.ui-state-disabled) {
&:hover {
border-color: #C6C6C6;
}
&:focus,
&.ui-state-focus {
box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
}
}
}
.ui-multiselect-label { .ui-multiselect-label {
font-size: 15px !important; font-size: 15px !important;
padding: 4px 30px 4px 12px !important; padding: 4px 30px 4px 12px !important;