r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor scss hover

Browse Source
This commit is contained in:
Eduard Kuzmenko 2021-02-06 15:49:45 +02:00
parent 730bd1168d
commit ddc138fa7f
15 changed files with 116 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/popups/index.ts
View File

@ -75,7 +75,7 @@ export default class PopupElement {
const button = document.createElement('button');
button.className = 'btn' + (b.isDanger ? ' danger' : '');
button.innerHTML = b.text;
ripple(button);
//ripple(button);
if(b.callback) {
button.addEventListener('click', () => {

36
src/scss/mixins/_hover.scss Normal file
View File

@ -0,0 +1,36 @@
@mixin hover($color: null, $property: null, $use-transition: false) {
@if $color {
@if $color == gray {
$color: var(--color-gray-hover);
} @else if $color == blue {
$color: var(--color-blue-hover);
} @else if $color == red {
$color: var(--color-red-hover);
}
}
html.no-touch &:hover {
@if $property != null {
@if $use-transition {
transition: .2s #{$property};
}
#{$property}: $color;
}
@content;
}
}
@mixin hover-effect($color: gray, $use-transition: false) {
@include hover($color, color, $use-transition) {
@content;
}
}
@mixin hover-background-effect($color: gray, $use-transition: false) {
@include hover($color, background-color, $use-transition) {
@content;
}
}

36
src/scss/mixins/_respondTo.scss Normal file
View File

@ -0,0 +1,36 @@
@mixin respond-to($media) {
@if $media == handhelds {
@media only screen and (max-width: $small-screen) { @content; }
//@media only screen and (orientation: landscape) and (max-device-width: 896px) { @content; } // iPhone 11 Pro Max
} @else if $media == small-screens {
@media only screen and (min-width: $small-screen + 1) { @content; }
} @else if $media == only-small-screens {
@media only screen and (min-width: $small-screen + 1) and (max-width: $medium-screen) { @content; }
} @else if $media == medium-screens {
@media only screen and (min-width: $medium-screen + 1) { @content; }
} @else if $media == only-medium-screens {
@media only screen and (min-width: $medium-screen + 1) and (max-width: $large-screen) { @content; }
} @else if $media == before-medium-screens {
@media only screen and (max-width: $medium-screen) { @content; }
} @else if $media == large-screens {
@media only screen and (min-width: $large-screen + 1) { @content; }
} @else if $media == not-handhelds {
@media only screen and (min-width: $small-screen + 1) { @content; }
}
@else if $media == floating-left-sidebar {
@media only screen and (min-width: $small-screen + 1) and (max-width: $floating-left-sidebar) { @content; }
} @else if $media == until-floating-left-sidebar {
@media only screen and (max-width: $floating-left-sidebar) { @content; }
} @else if $media == no-floating-left-sidebar {
@media only screen and (min-width: $floating-left-sidebar + 1) { @content; }
}
@else if $media == esg-top { // topbar + chat input + margin bottom + height of ESG
@media only screen and (min-height: 570px) and (min-width: $small-screen + 1) { @content; }
}
@else if $media == esg-bottom {
@media only screen and (max-height: 569px) { @content; }
}
}

14
src/scss/partials/_button.scss
View File

@ -25,9 +25,7 @@
color: $color-blue;
}
html.no-touch &:hover {
background-color: var(--color-gray-hover);
}
@include hover-background-effect();
&:disabled {
color: #cacaca;
@ -164,9 +162,7 @@
text-overflow: ellipsis;
align-items: center;
html.no-touch &:hover {
background-color: rgba(112, 117, 121, .06);
}
@include hover-background-effect();
&:before {
color: $color-gray;
@ -227,7 +223,7 @@
padding: 0; // new
transition: .2s opacity;
html.no-touch &:hover {
@include hover() {
transition: .2s background-color, .2s opacity;
background: darken($color-blue, 8%);
}
@ -259,9 +255,7 @@
//text-transform: capitalize;
font-weight: normal;
html.no-touch &:hover {
background-color: var(--color-gray-hover);
}
@include hover-background-effect();
// * tgico
&:before {

10
src/scss/partials/_chatBubble.scss
View File

@ -703,7 +703,7 @@ $bubble-margin: .25rem;
display: block;
font-size: calc(1rem - 1px);
html.no-touch &:hover {
@include hover() {
text-decoration: underline;
}
}
@ -1630,7 +1630,7 @@ $bubble-margin: .25rem;
}
.quote {
html.no-touch &:hover {
@include hover() {
background-color: $light;
}
}
@ -1752,7 +1752,7 @@ $bubble-margin: .25rem;
}
.quote {
html.no-touch &:hover {
@include hover() {
background-color: rgba($color-green, .12);
}
}
@ -2012,7 +2012,7 @@ $bubble-margin: .25rem;
transition: background-color .35s ease;
overflow: hidden;
html.no-touch &:hover {
@include hover() {
background-color: rgba(0, 0, 0, .06);
}
@ -2158,7 +2158,7 @@ poll-element {
}
}
html.no-touch &:hover {
@include hover() {
.animation-ring {
visibility: visible;
transform: scale(1);

4
src/scss/partials/_chatlist.scss
View File

@ -77,9 +77,7 @@
overflow: hidden;
}
html.no-touch &:hover {
background: var(--color-gray-hover);
}
@include hover-background-effect();
span {
display: inline-block;

3
src/scss/partials/_crop.scss
View File

@ -48,7 +48,8 @@
box-sizing: content-box;
border-radius: 50%;
html.no-touch &:hover, &:active {
html.no-touch &:hover,
&:active {
cursor: move;
}

4
src/scss/partials/_emojiDropdown.scss
View File

@ -193,9 +193,7 @@
margin: 0;
}
html.no-touch &:hover {
background-color: var(--color-gray-hover);
}
@include hover-background-effect();
}
}

8
src/scss/partials/_mediaViewer.scss
View File

@ -27,7 +27,7 @@
transition: var(--open-duration);
cursor: pointer;
html.no-touch &:hover {
@include hover() {
color: #fff;
}
}
@ -62,7 +62,7 @@
margin: 0 .25rem;
transition: var(--open-duration);
html.no-touch &:hover {
@include hover() {
color: #fff;
}
}
@ -136,7 +136,7 @@
.media-viewer-whole.active & {
opacity: 1;
html.no-touch & {
@include hover() {
opacity: .2;
&:hover {
@ -156,7 +156,7 @@
cursor: pointer;
z-index: 5;
html.no-touch & {
@include hover() {
height: calc(100% - 3.75rem);
&:hover {

2
src/scss/partials/_preloader.scss
View File

@ -114,7 +114,7 @@ $transition: .2s ease-in-out;
fill: #fff;
}
html.no-touch &:hover {
@include hover() {
background: none;
}
}

2
src/scss/partials/_selector.scss
View File

@ -63,7 +63,7 @@
transition: none;
}
html.no-touch &:hover {
@include hover() {
background-color: #fae2e3;
cursor: pointer;

2
src/scss/partials/_slider.scss
View File

@ -28,7 +28,7 @@
border-top-right-radius: 6px;
transition: none !important;
html.no-touch & {
@include hover() {
background-color: transparent;
&:hover {

2
src/scss/partials/pages/_password.scss
View File

@ -42,7 +42,7 @@
content: $tgico-eye2;
}
html.no-touch &:hover {
@include hover() {
color: #000;
}
}

11
src/scss/partials/popups/_popup.scss
View File

@ -74,7 +74,7 @@
transition: none;
}
html.no-touch &:hover {
@include hover() {
color: #000;
}
}
@ -121,7 +121,6 @@
font-weight: 500;
padding: .5rem;
text-transform: uppercase;
transition: .2s;
border-radius: $border-radius;
cursor: pointer;
color: $color-blue;
@ -135,9 +134,7 @@
transition: none;
}
html.no-touch &:hover {
background-color: var(--color-gray-hover);
}
@include hover-background-effect(blue);
& + .btn {
margin-top: .5rem;
@ -146,6 +143,10 @@
max-width: 286px;
overflow: hidden;
}
&.danger {
@include hover-background-effect(red);
}
}
}

73
src/scss/style.scss
View File

@ -6,15 +6,17 @@ $button-primary-background: #4EA4F6;
$color-green: #4DCD5E;
$color-error: #E53935;
$color-red: #E53935;
$color-gray: #707579;
$color-blue: #50a2e9;
$hover-alpha: .08;
$darkgreen: #50af4f;
$color-text-green: $darkgreen;
$lightgrey: #dadce0;
$light: rgba($color-gray, 0.08);
$light: rgba($color-gray, $hover-alpha);
//$small-screen: 720px;
$small-screen: 600px;
@ -31,57 +33,20 @@ $chat-input-handhelds-size: 2.875rem;
$chat-padding: 1rem;
$chat-padding-handhelds: .5rem;
@mixin respond-to($media) {
@if $media == handhelds {
@media only screen and (max-width: $small-screen) { @content; }
//@media only screen and (orientation: landscape) and (max-device-width: 896px) { @content; } // iPhone 11 Pro Max
}
@else if $media == small-screens {
@media only screen and (min-width: $small-screen + 1) { @content; }
}
@else if $media == only-small-screens {
@media only screen and (min-width: $small-screen + 1) and (max-width: $medium-screen) { @content; }
}
@else if $media == medium-screens {
@media only screen and (min-width: $medium-screen + 1) { @content; }
}
@else if $media == only-medium-screens {
@media only screen and (min-width: $medium-screen + 1) and (max-width: $large-screen) { @content; }
}
@else if $media == before-medium-screens {
@media only screen and (max-width: $medium-screen) { @content; }
}
@else if $media == large-screens {
@media only screen and (min-width: $large-screen + 1) { @content; }
}
@else if $media == not-handhelds {
@media only screen and (min-width: $small-screen + 1) { @content; }
}
@else if $media == floating-left-sidebar {
@media only screen and (min-width: $small-screen + 1) and (max-width: $floating-left-sidebar) { @content; }
}
@else if $media == until-floating-left-sidebar {
@media only screen and (max-width: $floating-left-sidebar) { @content; }
}
@else if $media == no-floating-left-sidebar {
@media only screen and (min-width: $floating-left-sidebar + 1) { @content; }
}
@else if $media == esg-top { // topbar + chat input + margin bottom + height of ESG
@media only screen and (min-height: 570px) and (min-width: $small-screen + 1) { @content; }
}
@else if $media == esg-bottom {
@media only screen and (max-height: 569px) { @content; }
}
@function hover-color($color) {
@return rgba($color, $hover-alpha);
}
@import "mixins/hover";
@import "mixins/respondTo";
:root {
--vh: 1vh;
--z-below: -1;
--color-gray: #c4c9cc;
--color-gray-hover: rgba(112, 117, 121, .08);
--color-gray-hover: #{hover-color($color-gray)};
--color-blue-hover: #{hover-color($color-blue)};
--color-red-hover: #{hover-color($color-red)};
--pm-transition: .2s ease-in-out;
--layer-transition: .2s ease-in-out;
--tabs-transition: .25s ease-in-out;
@ -569,9 +534,7 @@ hr {
display: grid;
grid-template-columns: calc(26px + 2rem) 1fr 80px;
html.no-touch &:hover {
background-color: var(--color-gray-hover);
}
@include hover-effect();
}
// +2 px bc of whitespace
@ -616,7 +579,7 @@ hr {
height: 24px;
margin-left: .4rem;
opacity: .5;
transition: .2s;
transition: .2s opacity;
cursor: pointer;
font-size: 1.5rem;
@ -624,7 +587,7 @@ hr {
margin-top: -14px;
}
html.no-touch &:hover {
@include hover() {
opacity: 1;
}
}
@ -684,9 +647,8 @@ img.emoji {
}
.super-sticker {
html.no-touch &:hover {
@include hover-background-effect() {
border-radius: 10px;
background-color: var(--color-gray-hover);
}
/* &:nth-child(5n+5) {
@ -1045,10 +1007,7 @@ middle-ellipsis-element {
}
.hover-effect {
html.no-touch &:hover {
transition: .2s background-color;
background-color: var(--color-gray-hover);
}
@include hover-background-effect();
}
.progress-ring {