Eduard Kuzmenko 4 years ago
parent
commit
cc518970e5
  1. 132
      src/scss/partials/_chat.scss
  2. 68
      src/scss/partials/_chatSearch.scss
  3. 62
      src/scss/partials/_quizHint.scss
  4. 2
      src/scss/style.scss

132
src/scss/partials/_chat.scss

@ -1199,135 +1199,3 @@ $chat-helper-size: 39px; @@ -1199,135 +1199,3 @@ $chat-helper-size: 39px;
}
}
}
.chat-search {
position: absolute !important;
top: 0;
z-index: 2;
&-footer {
height: 46px;
padding: 0 8px;
flex: 0 0 auto;
width: 100%;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0px -1px 5px -1px rgba(0, 0, 0, .21);
overflow: hidden;
.chat-search-count {
margin-left: 8px;
color: #949596;
}
& + .chat-input {
display: none;
}
}
&-count {
&:empty {
display: none;
}
&:not(:empty) + .btn-icon {
display: none;
}
}
&-controls {
display: flex;
}
&-results {
width: 100%;
height: 100%;
max-height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
opacity: 0;
background-color: #fff;
transition: .2s ease;
body.animation-level-0 & {
transition: none;
}
&.active {
opacity: 1;
visibility: visible;
}
}
.tgico-up {
margin-right: 2px;
}
}
.quiz-hint {
position: absolute;
left: 0;
display: flex;
width: 100%;
justify-content: center;
//z-index: 5;
top: 8px;
align-items: center;
transform: translate3d(0, calc(-100% - 10px), 0);
transition: transform .2s ease;
body.animation-level-0 & {
transition: none;
}
&.active {
transform: translate3d(0, 0, 0);
}
.container {
background: rgba(0, 0, 0, .7);
text-align: center;
width: auto;
padding: 10px 18px 12px 50px;
min-height: 48px;
border-radius: 12px;
line-height: 1.5;
color: white;
font-size: 15px;
max-width: 400px;
overflow: hidden;
text-align: left;
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
@include respond-to(handhelds) {
padding: 10px 18px 12px 54px;
margin: 0 10px;
font-size: 14px;
}
.text {
word-break: break-word;
}
&:before {
content: $tgico-info2;
position: absolute;
left: 15px;
font-size: 1.5rem;
top: 12px;
}
a {
color: white;
border-bottom: 1px solid white;
}
}
}

68
src/scss/partials/_chatSearch.scss

@ -0,0 +1,68 @@ @@ -0,0 +1,68 @@
.chat-search {
position: absolute !important;
top: 0;
z-index: 2;
&-footer {
height: 46px;
padding: 0 8px;
flex: 0 0 auto;
width: 100%;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0px -1px 5px -1px rgba(0, 0, 0, .21);
overflow: hidden;
.chat-search-count {
margin-left: 8px;
color: #949596;
}
& + .chat-input {
display: none;
}
}
&-count {
&:empty {
display: none;
}
&:not(:empty) + .btn-icon {
display: none;
}
}
&-controls {
display: flex;
}
&-results {
width: 100%;
height: 100%;
max-height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
opacity: 0;
background-color: #fff;
transition: .2s ease;
body.animation-level-0 & {
transition: none;
}
&.active {
opacity: 1;
visibility: visible;
}
}
.tgico-up {
margin-right: 2px;
}
}

62
src/scss/partials/_quizHint.scss

@ -0,0 +1,62 @@ @@ -0,0 +1,62 @@
.quiz-hint {
position: absolute;
left: 0;
display: flex;
width: 100%;
justify-content: center;
//z-index: 5;
top: 8px;
align-items: center;
transform: translate3d(0, calc(-100% - 10px), 0);
transition: transform .2s ease;
body.animation-level-0 & {
transition: none;
}
&.active {
transform: translate3d(0, 0, 0);
}
.container {
background: rgba(0, 0, 0, .7);
text-align: center;
width: auto;
padding: 10px 18px 12px 50px;
min-height: 48px;
border-radius: 12px;
line-height: 1.5;
color: white;
font-size: 15px;
max-width: 400px;
overflow: hidden;
text-align: left;
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
@include respond-to(handhelds) {
padding: 10px 18px 12px 54px;
margin: 0 10px;
font-size: 14px;
}
.text {
word-break: break-word;
}
&:before {
content: $tgico-info2;
position: absolute;
left: 15px;
font-size: 1.5rem;
top: 12px;
}
a {
color: white;
border-bottom: 1px solid white;
}
}
}

2
src/scss/style.scss

@ -117,6 +117,7 @@ $chat-padding-handhelds: .5rem; @@ -117,6 +117,7 @@ $chat-padding-handhelds: .5rem;
@import "partials/chatPinned";
@import "partials/chatMarkupTooltip";
@import "partials/chatStickersHelper";
@import "partials/chatSearch";
@import "partials/chatDrop";
@import "partials/crop";
@import "partials/sidebar";
@ -134,6 +135,7 @@ $chat-padding-handhelds: .5rem; @@ -134,6 +135,7 @@ $chat-padding-handhelds: .5rem;
@import "partials/avatar";
@import "partials/document";
@import "partials/audio";
@import "partials/quizHint";
@import "partials/popups/popup";
@import "partials/popups/editAvatar";

Loading…
Cancel
Save