@import '~components/ui/colors.scss'; @import '~components/ui/fonts.scss'; @import '~components/ui/popup/popup.scss'; @mixin hideFooter { @media (max-height: 455px) { @content; } } .languageSwitcher { composes: popupWrapper from '~components/ui/popup/popup.scss'; @include popupBounding(400px); } .languageSwitcherBody { composes: body from '~components/ui/popup/popup.scss'; display: flex; flex-direction: column; max-height: calc(100vh - 132px); @media screen and (min-height: 630px) { max-height: 500px; } } .searchBox { position: relative; margin-bottom: 20px; } .searchIcon { composes: search from '~components/ui/icons.scss'; position: absolute; top: 14px; right: 12px; font-size: 22px; color: #edebe5; pointer-events: none; // Иконка чисто декоративная, так что клик должен проходить сквозь неё } $languageListBorderColor: #eee; $languageListBorderStyle: 1px solid $languageListBorderColor; .languagesList { flex-grow: 1; overflow-y: auto; border-top: $languageListBorderStyle; border-bottom: $languageListBorderStyle; margin-bottom: 20px; &::-webkit-scrollbar { width: 12px; } &::-webkit-scrollbar-track { background-color: #f3f3f3; } &::-webkit-scrollbar-thumb { background-color: #d8d5d0; } @include hideFooter { & { margin-bottom: 0; } } } .languageItem { font-family: $font-family-title; transition: background-color 0.25s; cursor: pointer; overflow: hidden; line-height: 1; &:hover { background-color: $whiteButtonLight; } } .languageFlex { box-sizing: border-box; display: flex; align-items: center; padding: 10px; border-top: $languageListBorderStyle; .firstLanguageItem & { border-top: none; } } .languageIco { display: inline-block; margin-right: 7px; width: 40px; height: 30px; box-shadow: 0 0 1px rgba(#000, 0.2); background: no-repeat; background-size: cover; } .languageCaptions { flex: 1; overflow: hidden; } .languageName { font-size: 15px; margin-bottom: 2px; } .languageSubName { font-size: 11px; color: #ccc; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } // Реализация радио кнопки. Когда у нас будет нормальный компонент радио кнопок, нужно будет перейти на него .languageCircle { composes: checkmark from '~components/ui/icons.scss'; position: relative; box-sizing: border-box; width: 22px; height: 22px; right: -32px; font-size: 10px; line-height: 18px; text-align: center; color: #fff; border: 2px solid #dcd8cd; border-radius: 50%; transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1); &:before { opacity: 0; transition: opacity 0.3s; } .languageItem:hover & { right: 0; } .activeLanguageItem & { border-color: $green; background: $green; right: 0; &:before { opacity: 1; } } } .emptyLanguagesListWrapper { $transitionTime: 0.5s; opacity: 0; overflow: hidden; transition: height $transitionTime; &.emptyLanguagesListVisible { opacity: 1; transition: $transitionTime; } } .emptyLanguagesList { padding: 20px; text-align: center; } .emptyLanguagesListCaption { height: 20px; max-width: 100%; margin-bottom: 5px; } .emptyLanguagesListSubtitle { font-family: $font-family-title; color: #ccc; font-size: 13px; } .improveTranslates { border: 1px solid #dedede; background: #f3f1ed; padding: 10px; display: flex; flex-shrink: 0; @include hideFooter { & { display: none; } } } .improveTranslatesIcon { composes: translate from '~components/ui/icons.scss'; color: lighter($blue); font-size: 22px; margin-right: 10px; } .improveTranslatesContent { } .improveTranslatesTitle { font-family: $font-family-title; font-size: 13px; margin-bottom: 3px; } .improveTranslatesText { font-size: 10px; color: #9a9a9a; line-height: 1.2; }