fix-media
This commit is contained in:
Rusovich Violetta
@@ -0,0 +1,38 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/themes' as *;
|
||||
|
||||
:root {
|
||||
--app-navbar-height: #{$app-navbar-height};
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
html.dark-theme {
|
||||
background-color: $color-background-base;
|
||||
color: $color-text-active;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: $color-text-active !important;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import 'variables';
|
||||
@import 'base';
|
||||
@import 'form';
|
||||
@import 'helpers';
|
||||
@import 'components';
|
||||
@@ -0,0 +1,3 @@
|
||||
// Navbar
|
||||
$app-navbar-height: 3.5rem;
|
||||
$app-header-height: 64px;
|
||||
@@ -0,0 +1,122 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/themes' as *;
|
||||
@use '@beeline/design-tokens/scss/tokens/components/fab' as *;
|
||||
@use '@beeline/design-tokens/scss/tokens/components/button' as *;
|
||||
@use '@beeline/design-tokens/scss/tokens/globals' as *;
|
||||
@use '@beeline/design-tokens/scss/mixin';
|
||||
|
||||
@mixin fab_button {
|
||||
background-color: $button-overlay-background-color;
|
||||
padding-left: $button-only-text-small-padding-horizontal;
|
||||
padding-right: $button-only-text-small-padding-horizontal;
|
||||
letter-spacing: $button-small-text-font-letter-spacing;
|
||||
line-height: $button-small-text-font-line-height;
|
||||
font-size: $button-small-text-font-size;
|
||||
height: $button-small-height;
|
||||
color: $button-overlay-text-color;
|
||||
box-shadow: none;
|
||||
border: 1px solid $button-outline-border-color;
|
||||
border-radius: $button-border-radius;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: $button-overlay-background-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.app-fab {
|
||||
height: $fab-standard-height;
|
||||
width: $fab-standard-width;
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
padding: $fab-standard-padding;
|
||||
letter-spacing: $fab-text-font-letter-spacing;
|
||||
line-height: $fab-text-font-line-height;
|
||||
font-size: $fab-text-font-size;
|
||||
font-weight: $fab-text-font-weight;
|
||||
box-shadow: $fab-shadow;
|
||||
background-color: $color-background-inverse;
|
||||
color: $color-text-active-inverse;
|
||||
cursor: pointer;
|
||||
|
||||
&__icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
// background-color: $fab-hover-background-color;
|
||||
}
|
||||
|
||||
&--focused {
|
||||
border-color: $fab-focused-border-color;
|
||||
border-width: $fab-focused-border-width;
|
||||
}
|
||||
|
||||
&--mini {
|
||||
height: $fab-mini-height;
|
||||
width: $fab-mini-width;
|
||||
border-radius: $fab-mini-border-radius;
|
||||
padding: $fab-mini-padding;
|
||||
}
|
||||
|
||||
&--extended {
|
||||
height: $fab-extended-height;
|
||||
border-radius: $fab-extended-border-radius;
|
||||
padding-right: $fab-extended-padding-right;
|
||||
padding-left: $fab-extended-padding-left;
|
||||
|
||||
& &__icon {
|
||||
margin-right: $fab-extended-icon-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.app-fab--extended.app-fab--mini {
|
||||
height: $fab-mini-height;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: $fab-disabled-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.app-fab-dialog {
|
||||
position: fixed;
|
||||
bottom: 44px;
|
||||
right: 0;
|
||||
// background-color: $color-background-medium;
|
||||
background-color: transparent;
|
||||
// border-radius: 12px;
|
||||
padding: 1rem;
|
||||
// border: 1px solid $color-border;
|
||||
// min-width: 300px;
|
||||
// box-shadow: $elevation-medium;
|
||||
|
||||
.icon-contained {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: $color-status-neutral-background;
|
||||
color: $color-status-neutral;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
#feedback_button {
|
||||
@include fab_button();
|
||||
}
|
||||
|
||||
#bug_button {
|
||||
@include fab_button();
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
a#bug_button,
|
||||
a#bug_button:visited,
|
||||
a#bug_button:active {
|
||||
color: $button-overlay-text-color !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import 'fab';
|
||||
@@ -0,0 +1,2 @@
|
||||
// @import "textfield";
|
||||
// @import "textarea";
|
||||
@@ -0,0 +1 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/components/formfield' as formfield;
|
||||
@@ -0,0 +1,107 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/components/textarea' as *;
|
||||
@use '@beeline/design-tokens/scss/tokens/components/formfield';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes';
|
||||
|
||||
.textarea-field {
|
||||
$px: 16px;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: $textarea-without-label-medium-text-margin-top $px $textarea-text-margin-bottom;
|
||||
height: $textarea-without-label-medium-height;
|
||||
background: formfield.$formfield-background-color;
|
||||
border: formfield.$formfield-border-width formfield.$formfield-border-style formfield.$formfield-border-color;
|
||||
border-radius: formfield.$formfield-border-radius;
|
||||
|
||||
& &__label {
|
||||
position: absolute;
|
||||
top: $textarea-with-label-text-margin-top;
|
||||
left: $px;
|
||||
transition: font-size 300ms ease-out;
|
||||
color: formfield.$formfield-label-color;
|
||||
}
|
||||
|
||||
& textarea {
|
||||
height: $textarea-medium-text-height;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
resize: none;
|
||||
background-color: transparent;
|
||||
color: themes.$color-text-active;
|
||||
|
||||
&:focus {
|
||||
}
|
||||
}
|
||||
|
||||
& &__resizer {
|
||||
position: absolute;
|
||||
bottom: $textarea-resizer-margin-bottom;
|
||||
right: $textarea-resizer-margin-right;
|
||||
rotate: -45deg;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
&:hover {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: flex;
|
||||
background-color: darkslategrey;
|
||||
width: 10px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: flex;
|
||||
position: relative;
|
||||
right: -3px;
|
||||
bottom: -2px;
|
||||
background-color: darkslategrey;
|
||||
width: 4px;
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.textarea-field--with-label {
|
||||
height: $textarea-with-label-medium-height;
|
||||
padding-top: $textarea-with-label-text-margin-top;
|
||||
|
||||
&.textarea-field--floated .textarea-field__label {
|
||||
top: $textarea-medium-label-floated-margin-top;
|
||||
line-height: $textarea-small-label-floated-font-line-height;
|
||||
font-size: $textarea-small-label-floated-font-size;
|
||||
}
|
||||
|
||||
&.textarea-field--small {
|
||||
height: $textarea-with-label-small-height;
|
||||
padding-top: $textarea-small-label-margin-top;
|
||||
top: $textarea-small-label-floated-margin-top;
|
||||
|
||||
& .textarea-field__label {
|
||||
font-size: $textarea-small-label-font-size;
|
||||
font-weight: $textarea-small-label-font-weight;
|
||||
letter-spacing: $textarea-small-label-font-letter-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.textarea-field--focused {
|
||||
border-color: formfield.$formfield-border-color-focus;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.textarea-field--small {
|
||||
padding-top: $textarea-without-label-small-text-margin-top;
|
||||
height: $textarea-without-label-small-height;
|
||||
|
||||
& textarea {
|
||||
height: $textarea-small-text-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/components/textfield' as *;
|
||||
@use '@beeline/design-tokens/scss/tokens/globals';
|
||||
@use '@beeline/design-tokens/scss/tokens/themes' as theme;
|
||||
|
||||
.textfield {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: globals.$size-control-height-medium;
|
||||
border: globals.$size-border-width-regular solid transparent;
|
||||
padding-top: $textfield-without-label-medium-text-margin-vertical;
|
||||
padding-bottom: $textfield-without-label-medium-text-margin-vertical;
|
||||
background-color: theme.$color-control-background;
|
||||
border-radius: 12px; // globals.$size-border-radius-x6;
|
||||
|
||||
&:hover {
|
||||
background-color: theme.$color-control-background-hover;
|
||||
}
|
||||
|
||||
// input
|
||||
input {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
}
|
||||
}
|
||||
|
||||
// label
|
||||
&--with-label {
|
||||
// padding-top: $textfield-with-label-medium-text-margin-top;
|
||||
// padding-bottom: $textfield-with-label-medium-text-margin-bottom;
|
||||
}
|
||||
|
||||
&__label {
|
||||
// padding-top: $textfield-medium-label-margin-top;
|
||||
|
||||
&.textfield__label--floated {
|
||||
// padding-top: $textfield-medium-label-margin-top-floated;
|
||||
}
|
||||
}
|
||||
|
||||
// icon-right
|
||||
|
||||
// icon-left
|
||||
|
||||
// small
|
||||
&--small {
|
||||
height: globals.$size-control-height-small;
|
||||
}
|
||||
|
||||
// large
|
||||
&--large {
|
||||
height: globals.$size-control-height-large;
|
||||
padding-top: $textfield-without-label-large-text-margin-vertical;
|
||||
padding-bottom: $textfield-without-label-large-text-margin-vertical;
|
||||
|
||||
&.textfield--with-label {
|
||||
padding-top: $textfield-with-label-large-text-margin-top;
|
||||
padding-bottom: $textfield-with-label-large-text-margin-bottom;
|
||||
}
|
||||
|
||||
.textfield__label {
|
||||
padding-top: $textfield-large-label-margin-top;
|
||||
|
||||
&.textfield__label--floated {
|
||||
padding-top: $textfield-large-label-margin-top-floated;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// states
|
||||
&--focused {
|
||||
border-color: theme.$color-border-focus;
|
||||
background-color: theme.$color-background-base;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/themes' as *;
|
||||
|
||||
.app-bg-status-error {
|
||||
background-color: $color-status-error-background;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.app-cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@import 'text';
|
||||
@import 'color';
|
||||
@import 'media';
|
||||
@import 'common';
|
||||
@@ -0,0 +1,39 @@
|
||||
// @deprecated
|
||||
@mixin media($minWidth, $maxWidth) {
|
||||
@media (min-width: $minWidth) and (max-width: $maxWidth) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// @deprecated
|
||||
@mixin media_max($maxWidth) {
|
||||
@media (max-width: $maxWidth) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// @deprecated
|
||||
@mixin media_min($minWidth) {
|
||||
@media (min-width: $minWidth) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
$breakpoints: (
|
||||
xl: 1600px,
|
||||
lg: 1400px,
|
||||
md: 1200px,
|
||||
sm: 960px,
|
||||
);
|
||||
|
||||
@mixin max($breakpoint) {
|
||||
$value: map-get($breakpoints, $breakpoint);
|
||||
|
||||
@if $value {
|
||||
@media (max-width: $value) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@error "Breakpoint #{$breakpoint} not found";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/themes' as theme;
|
||||
@use 'src/assets/scss/app/mixins' as mixins;
|
||||
|
||||
@mixin truncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@mixin truncate-lines($lines: 2) {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: $lines;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.app-text-active {
|
||||
color: theme.$color-text-active;
|
||||
}
|
||||
|
||||
.app-text-inactive {
|
||||
color: theme.$color-text-inactive;
|
||||
}
|
||||
|
||||
// styles for hyperlinks
|
||||
.app-link {
|
||||
color: theme.$color-text-active;
|
||||
|
||||
&:hover {
|
||||
color: theme.$color-text-active;
|
||||
}
|
||||
}
|
||||
|
||||
.app-text-caption {
|
||||
@include mixins.text-caption;
|
||||
}
|
||||
|
||||
.app-text-truncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
.app-text-size-subtitle-3 {
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.app-text-size-body-3 {
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.2px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Colors
|
||||
.app-text-color-caption {
|
||||
color: theme.$color-text-inactive;
|
||||
}
|
||||
.app-text-warning {
|
||||
color: theme.$color-status-warning;
|
||||
}
|
||||
.app-text-info {
|
||||
color: theme.$color-status-info;
|
||||
}
|
||||
.app-text-error {
|
||||
color: theme.$color-status-error;
|
||||
}
|
||||
.app-text-success {
|
||||
color: theme.$color-status-success;
|
||||
}
|
||||
|
||||
// Breaks
|
||||
.app-break-keep-all {
|
||||
word-break: keep-all;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import 'spinner';
|
||||
@@ -0,0 +1,6 @@
|
||||
@use 'src/assets/scss/app/variables' as v;
|
||||
|
||||
.app-loading-screen {
|
||||
display: block;
|
||||
height: calc(100vh - v.$app-header-height);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@forward 'text';
|
||||
@@ -0,0 +1,29 @@
|
||||
@use '@beeline/design-tokens/scss/tokens/themes' as theme;
|
||||
|
||||
%text_caption {
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@mixin text_caption {
|
||||
@extend %text_caption;
|
||||
color: theme.$color-text-inactive;
|
||||
}
|
||||
|
||||
@mixin text_caption_error {
|
||||
@extend %text_caption;
|
||||
color: theme.$color-status-error;
|
||||
}
|
||||
|
||||
@mixin text_body_2 {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
@mixin truncate {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
Reference in New Issue
Block a user