removed most scss files
This commit is contained in:
subnub
@@ -31,7 +31,10 @@ const Header = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<header id="header" className="select-none">
|
||||
<header
|
||||
id="header"
|
||||
className="select-none border border-b fixed top-0 left-0 w-full bg-white z-10"
|
||||
>
|
||||
<div className="px-6 flex justify-between min-h-16 items-center py-3.5">
|
||||
<div className="items-center w-[260px] hidden desktopMode:flex">
|
||||
<a
|
||||
|
||||
@@ -3,8 +3,6 @@
|
||||
}
|
||||
|
||||
html {
|
||||
// font-size: 62.5%;
|
||||
// --webkit-touch-callout: default;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
@@ -15,11 +13,6 @@ textarea {
|
||||
}
|
||||
|
||||
body {
|
||||
// color: $dark-grey;
|
||||
// font-family: Helvetica, Arial, sans-serif;
|
||||
// font-size: $m-size;
|
||||
// background-color: white;
|
||||
// line-height: 1.6;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
@@ -32,3 +25,18 @@ button {
|
||||
button:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
body,
|
||||
html {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
& input[type="text"],
|
||||
& input[type="submit"] {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
body {
|
||||
& * {
|
||||
box-sizing: border-box;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
// Sizes
|
||||
|
||||
$s-size: 1.2rem;
|
||||
$m-size: 1.6rem;
|
||||
$l-size: 3.2rem;
|
||||
$xl-size: 4.8rem;
|
||||
$dark-grey: #333333;
|
||||
$blue: #1c88bf;
|
||||
$dark-blue: #364051;
|
||||
$off-white: #f7f7f7;
|
||||
$grey: #666;
|
||||
$desktop-breakpoint: 45rem;
|
||||
$teal: #00bfa5;
|
||||
$small-border: 2px;
|
||||
|
||||
// font sizees
|
||||
$font-size-large: 1.8rem;
|
||||
@@ -1,39 +0,0 @@
|
||||
.google-account-page__wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.google-account-page__box {
|
||||
background: rgba(255,255,255,.85);
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
width: 35rem;
|
||||
padding: 3.2rem 1.6rem 1.2rem 1.6rem;
|
||||
border: .5px;
|
||||
border-style: groove;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.google-account-page__button {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background: #3c85ed;
|
||||
font-size: 1.8rem;
|
||||
padding: 1.2rem;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.google-account-page__title {
|
||||
font-size: 19px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -1,164 +0,0 @@
|
||||
.storage-item__wrapper {
|
||||
height: 436px;
|
||||
width: 332px;
|
||||
min-width: 332px;
|
||||
// background: green;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 10px;
|
||||
|
||||
}
|
||||
|
||||
.storage-item__title-wrapper {
|
||||
border-bottom: 1px solid black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.storage-item__title {
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
margin: 13px;
|
||||
}
|
||||
|
||||
.storage-item__image__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 27px;
|
||||
}
|
||||
|
||||
.storage-item__image {
|
||||
|
||||
width: 152px;
|
||||
}
|
||||
|
||||
.storage-item__storage-title__wrapper {
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.storage-item__storage-title {
|
||||
|
||||
font-size: 19px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.storage-item__button-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 36px;
|
||||
}
|
||||
|
||||
.storage-item__button {
|
||||
color: #fff;
|
||||
font-size: unset;
|
||||
padding: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #3c85ee;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 6px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.add-storage-card__wrapper {
|
||||
width: 632px;
|
||||
height: 400px;
|
||||
// background: red;
|
||||
position: relative;
|
||||
box-shadow: 0 11px 8px 0 rgba(0,0,0,.2);
|
||||
border: 2px solid #dadce0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.add-storage-card__title-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.add-storage-card__title {
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
.add-storage-card__number-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 42px;
|
||||
}
|
||||
|
||||
.add-storage-card__number {
|
||||
border: 1px solid #cacccd;
|
||||
border-radius: 2px;
|
||||
height: 43px;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
padding: 1.2rem;
|
||||
margin: 0 0 1.2rem 0;
|
||||
width: 383px;
|
||||
}
|
||||
|
||||
.add-storage-card__expiry-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.add-storage-card__expiry {
|
||||
|
||||
border: 1px solid #cacccd;
|
||||
border-radius: 2px;
|
||||
height: 43px;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
padding: 1.2rem;
|
||||
width: 223px;
|
||||
/* margin: 0 0 1.2rem 0; */
|
||||
/* margin-left: 10px; */
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.add-storage-card__cvc {
|
||||
|
||||
border: 1px solid #cacccd;
|
||||
border-radius: 2px;
|
||||
height: 43px;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
padding: 1.2rem;
|
||||
width: 70px;
|
||||
/* margin: 0 0 1.2rem 0; */
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.add-storage-card__button-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 98px;
|
||||
}
|
||||
|
||||
.add-storage-card__close-wrapper {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.add-storage-card__close {
|
||||
width: 39px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
.add-storage__wrapper {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
// background: blue;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.add-storage__box {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.add-storage__body {
|
||||
width: 70vw;
|
||||
height: 60vh;
|
||||
// background: red;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
overflow-x: scroll;
|
||||
-webkit-box-shadow: 0 11px 8px 0 rgba(0,0,0,.2);
|
||||
box-shadow: 0 11px 8px 0 rgba(0,0,0,.2);
|
||||
border: 2px solid #dadce0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.add-storage__title {
|
||||
font-size: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
.context-menu {
|
||||
background: white;
|
||||
position: absolute;
|
||||
width: 230px;
|
||||
|
||||
z-index: 1;
|
||||
box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
height: fit-content;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
|
||||
position: fixed;
|
||||
width: 99%;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.context__item {
|
||||
display: flex;
|
||||
height: 41px;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
.context__item:hover {
|
||||
background: lightgrey;
|
||||
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
|
||||
background: white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.context__item:active {
|
||||
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
.context__item__image {
|
||||
width: 30px;
|
||||
/* height: 43px; */
|
||||
opacity: 0.7;
|
||||
margin-left: 7px;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.context__item__title {
|
||||
color: black;
|
||||
margin-left: 7px;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
.dataform {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.dataform__item {
|
||||
flex-basis: 100px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.dataform__no-files {
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.dataform__spinner__wrapper {
|
||||
margin-top: 10px;
|
||||
width: 61vw;
|
||||
height: 65vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dataform-loadmore-files {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 17px;
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
.downloadpage {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.downloadpage__box {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
justify-content: center;
|
||||
width: 345px;
|
||||
align-items: center;
|
||||
height: 289px;
|
||||
padding: 3.2rem 1.6rem 1.2rem 1.6rem;
|
||||
border: 0.5px;
|
||||
border-style: groove;
|
||||
/* position: relative; */
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.downloadpage__box__button {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.downloadpage__box__title {
|
||||
color: black;
|
||||
font-size: 19px;
|
||||
margin-top: -18px;
|
||||
font-weight: 300;
|
||||
max-width: 94%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.downloadpage__box__subtitle {
|
||||
color: black;
|
||||
font-weight: 200;
|
||||
font-size: 12px;
|
||||
max-width: 94%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@@ -1,268 +0,0 @@
|
||||
.file__item {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #dadce0;
|
||||
align-items: center;
|
||||
justify-content: initial;
|
||||
border-radius: 10px;
|
||||
flex-basis: 23%;
|
||||
max-width: 23%;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
height: 171px;
|
||||
|
||||
// overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
// -webkit-touch-callout: none;
|
||||
// -webkit-user-select: none;
|
||||
// -khtml-user-select: none;
|
||||
// -moz-user-select: none;
|
||||
// -ms-user-select: none;
|
||||
// user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
flex-basis: 28%;
|
||||
max-width: 30.2%;
|
||||
position: unset;
|
||||
//-webkit-touch-callout: default;
|
||||
}
|
||||
}
|
||||
|
||||
.file__item--selected {
|
||||
background:#e8f0fe;
|
||||
}
|
||||
|
||||
.file__title {
|
||||
color: #373737;
|
||||
margin-top: 25px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: 90%;
|
||||
max-width: 23vw;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
// text-transform: capitalize;
|
||||
}
|
||||
|
||||
.file__title--gone {
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file__title--selected {
|
||||
color: #1967d2;
|
||||
}
|
||||
|
||||
.file__image__wrapper {
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.file__image {
|
||||
width: 100px;
|
||||
opacity: 0.7;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.file__item__wrapper {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: initial;
|
||||
// -webkit-touch-callout: none;
|
||||
// -webkit-user-select: none;
|
||||
// -khtml-user-select: none;
|
||||
// -moz-user-select: none;
|
||||
// -ms-user-select: none;
|
||||
// user-select: none;
|
||||
// -webkit-tap-highlight-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file__item__listview {
|
||||
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 10px;
|
||||
flex-basis: 98%;
|
||||
min-width: 98%;
|
||||
max-width: 98%;
|
||||
max-width: 99%;
|
||||
width: 100%;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
position: unset;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.file__item__listview--smaller-max-width {
|
||||
max-width: 98%;
|
||||
}
|
||||
|
||||
.file__image__listview {
|
||||
width: 31px;
|
||||
opacity: 0.7;
|
||||
min-width: 31px;
|
||||
}
|
||||
|
||||
.file__image__listview--mover {
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 38px;
|
||||
min-width: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.file__image__listview--no-opacity {
|
||||
width: 31px;
|
||||
opacity: 1;
|
||||
/* min-width: 30px; */
|
||||
/* max-width: 30px; */
|
||||
height: 33px;
|
||||
/* max-height: 30px; */
|
||||
border-radius: 5px;
|
||||
width: 31px;
|
||||
opacity: 1;
|
||||
max-width: 31px;
|
||||
height: 33px;
|
||||
max-height: 33px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.file__image--no-opacity {
|
||||
width: 87%;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 1;
|
||||
max-width: 100%;
|
||||
margin-top: 8px;
|
||||
padding: -1px;
|
||||
border-radius: 11px;
|
||||
margin-left: 6.5%;
|
||||
}
|
||||
|
||||
.file__title__listview {
|
||||
color: #373737;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 18%;
|
||||
width: 18%;
|
||||
min-width: 18%;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
margin-right: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.file__title__listview--no-margin {
|
||||
margin-right: none
|
||||
}
|
||||
|
||||
.file__title__listview--no-max {
|
||||
max-width: none;
|
||||
width: unset;
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
.file__title__listview--mover {
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.file__item__listview__title__wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 15px;
|
||||
max-width: 30%;
|
||||
min-width: 30%;
|
||||
width: 30%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.file__item__listview__title__wrapper--folder {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 15px;
|
||||
max-width: 50%;
|
||||
min-width: 30%;
|
||||
width: 50%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.file__item__listview__title__wrapper--mover {
|
||||
|
||||
max-width: 63%;
|
||||
width: 63%;
|
||||
}
|
||||
|
||||
.file__item__tag {
|
||||
|
||||
width: 49px;
|
||||
height: 25px;
|
||||
background: lightblue;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 9px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.file__item__tag__title {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.file__item-no-thumbnail {
|
||||
object-fit: unset !important;
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
.filter {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 52px;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
.filter__folder-wrapper {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.filter__folder-title {
|
||||
color: #5f6368;
|
||||
margin-left: 22px;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.filter__folder-title-wrapper {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.filters__wrapper {
|
||||
margin-right: 6%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.filter__select-wrapper {
|
||||
margin-right: 7px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.filter__select-image {
|
||||
margin-top: 5px;
|
||||
width: 18px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.filter__select {
|
||||
background: none;
|
||||
border: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
color: #5f6368;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
font-weight: 500;
|
||||
padding-left: 3px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.filter__select:hover {
|
||||
background: lightgrey
|
||||
}
|
||||
@@ -1,193 +0,0 @@
|
||||
.folder-tree__main {
|
||||
height: 327px;
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
// background: #000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.folder-tree__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.folder-tree__box {
|
||||
width: 95%;
|
||||
height: 85%;
|
||||
overflow: scroll;
|
||||
// -ms-overflow-style: none; /* IE and Edge */
|
||||
// scrollbar-width: none;
|
||||
// &::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// width: 0px;
|
||||
// background: transparent
|
||||
// }
|
||||
// border: 1px solid #dadce0;
|
||||
// border-radius: 10px;
|
||||
}
|
||||
|
||||
.folder-tree__box-hide-scroll-bars {
|
||||
|
||||
width: 95%;
|
||||
height: 85%;
|
||||
overflow: scroll;
|
||||
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0px;
|
||||
background: transparent
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.folder-tree__storage {
|
||||
// width: 100%;
|
||||
// height: 55px;
|
||||
// background: blue;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.folder-tree-sub__storage {
|
||||
// background: blue;
|
||||
margin-top: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.folder-tree__storage__box {
|
||||
width: 179px;
|
||||
// background: green;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
margin-left: 46px;
|
||||
}
|
||||
|
||||
.folder-tree-sub__storage__box {
|
||||
width: 179px;
|
||||
// background: green;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.folder-tree__storage__image-div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.folder-tree-sub__storage__image-div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.folder-tree__storage__image {
|
||||
|
||||
margin-right: 1px;
|
||||
height: 31px;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
margin-right: -2px;
|
||||
height: 54px;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-tree-sub__storage__image {
|
||||
|
||||
margin-right: 1px;
|
||||
// height: 21px;
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
margin-right: 1px;
|
||||
width: 11px;
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-tree__storage__text {
|
||||
color: #2e2e38;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-tree__storage__text-div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.folder-tree-sub__storage__text {
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
max-width: 117px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 4px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
color: #2e2e38;
|
||||
font-weight: 400;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-tree-sub__storage__text-div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.folder-tree__storage-subview {
|
||||
// height: 151px;
|
||||
width: 100%;
|
||||
// background: purple;
|
||||
}
|
||||
|
||||
.folder-tree-sub__storage-subview {
|
||||
// height: 151px;
|
||||
width: 100%;
|
||||
// background: purple;
|
||||
}
|
||||
|
||||
.folder-tree__storage-subview-box {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.folder-tree-sub__storage-subview-box {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.folder-tree-sub__icon-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.folder-tree-sub__icon {
|
||||
width: 19px;
|
||||
margin-left: 9px;
|
||||
margin-right: 3px;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 26px;
|
||||
margin-left: 14px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
.folder__image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 10px;
|
||||
opacity: 0.7;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
// flex-basis: 29%;
|
||||
max-width: 31%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.folder__title {
|
||||
color: #373737;
|
||||
margin-right: 2px;
|
||||
margin-top: 25px;
|
||||
margin-left: 4px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: 77%;
|
||||
max-width: 50vw;
|
||||
font-weight: 300;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.folder__title--selected {
|
||||
color: #1967d2;
|
||||
}
|
||||
|
||||
.folder__item {
|
||||
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/* border: 1px solid #dadce0; */
|
||||
align-items: center;
|
||||
justify-content: initial;
|
||||
/* border-radius: 10px; */
|
||||
/* flex-basis: 23%; */
|
||||
/* max-width: 23%; */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
/* margin: 5px; */
|
||||
/* height: 50px; */
|
||||
cursor: pointer;
|
||||
/* position: relative; */
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
.folder__item__wrapper {
|
||||
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid #dadce0;
|
||||
align-items: center;
|
||||
justify-content: initial;
|
||||
border-radius: 10px;
|
||||
flex-basis: 23%;
|
||||
max-width: 23%;
|
||||
margin: 5px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
flex-basis: 46%;
|
||||
max-width: 47%;
|
||||
position: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.folder__item--selected {
|
||||
background:#e8f0fe;
|
||||
}
|
||||
@@ -1,513 +0,0 @@
|
||||
|
||||
header{
|
||||
border-bottom:1px solid #E8EEF2;
|
||||
position: fixed;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width:100%;
|
||||
background-color:#fff;
|
||||
z-index:4;
|
||||
& .container{
|
||||
padding-left:25px;
|
||||
padding-right:25px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
width:100%;
|
||||
& .outer__header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
min-height:68px;
|
||||
align-items:center;
|
||||
padding:15px 0px;
|
||||
& .left__header{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
width:100%;
|
||||
& .search__wrapper{
|
||||
width:100%;
|
||||
max-width:700px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
flex-direction: column;
|
||||
&>a{
|
||||
& img{
|
||||
transition:.05s ease all;
|
||||
}
|
||||
}
|
||||
& .search__files--dropdown{
|
||||
position: absolute;
|
||||
left:0px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), inset 0px 1px 0px #F5F7FA;
|
||||
border-radius: 4px;
|
||||
width:100%;
|
||||
top:42px;
|
||||
& .elem__search--files{
|
||||
& a{
|
||||
display:flex;
|
||||
padding:15px;
|
||||
text-decoration:none;
|
||||
color: #637381;
|
||||
font-size:16px;
|
||||
line-height:19px;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
background: #F6F5FD;
|
||||
}
|
||||
&>span{
|
||||
display: inline-block;
|
||||
margin:0px 5px;
|
||||
height: 18px;
|
||||
&.file__name{
|
||||
color:#212B36;
|
||||
font-size:16px;
|
||||
line-height:19px;
|
||||
font-weight:bold;
|
||||
overflow: hidden;
|
||||
max-width: 22vw;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&.root__parent , &.current__folder{
|
||||
color: #212b36;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
overflow: hidden;
|
||||
max-width: 22vw;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
& .spacer{
|
||||
display: inline-block;
|
||||
margin:0px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&>a{
|
||||
position: absolute;
|
||||
left:15px;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
&>input{
|
||||
width:100%;
|
||||
min-height:42px;
|
||||
border:1px solid #BEC9D3;
|
||||
padding-left:45px;
|
||||
padding-right:15px;
|
||||
font-size:16px;
|
||||
color:#000;
|
||||
border-radius:5px;
|
||||
&:focus{
|
||||
border-color:#3c85ee;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .logo__wrapper{
|
||||
margin-right:40px;
|
||||
&>a{
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .right__header{
|
||||
padding-left:100px;
|
||||
& .profile__info{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
& .settings__button{
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
& a{
|
||||
display: inline-flex;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .profile__wrapper{
|
||||
margin-left:25px;
|
||||
& .profile__button{
|
||||
&>a{
|
||||
min-width:36px;
|
||||
min-height:36px;
|
||||
border-radius:250px;
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
transition:.4s ease all;
|
||||
text-decoration: none;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1200px){
|
||||
header{
|
||||
& .container {
|
||||
& .outer__header {
|
||||
& .left__header {
|
||||
& .search__wrapper{
|
||||
max-width:550px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width:991px){
|
||||
header{
|
||||
& .container {
|
||||
& .outer__header {
|
||||
position: relative;
|
||||
& .left__header {
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
& .logo__wrapper{
|
||||
margin-bottom:5px;
|
||||
margin-right: auto;
|
||||
& a{
|
||||
& img{
|
||||
max-width:180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .search__wrapper{
|
||||
max-width:100%;
|
||||
}
|
||||
}
|
||||
& .right__header{
|
||||
position: absolute;
|
||||
padding-left:0px;
|
||||
right:0px;
|
||||
top:12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width:480px){
|
||||
header{
|
||||
& .container{
|
||||
padding-left:15px;
|
||||
padding-right:15px;
|
||||
& .outer__header{
|
||||
& .left__header{
|
||||
min-height:40px;
|
||||
& .search__wrapper{
|
||||
& .search__files--dropdown{
|
||||
& .elem__search--files{
|
||||
& a{
|
||||
&>span.file__name{
|
||||
font-size:14px;
|
||||
}
|
||||
&>span.root__parent{
|
||||
font-size:14px;
|
||||
}
|
||||
&>span.current__folder{
|
||||
font-size:14px;
|
||||
}
|
||||
font-size:14px;
|
||||
padding:12px;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .logo__wrapper{
|
||||
margin-bottom:10px;
|
||||
& a{
|
||||
& img{
|
||||
max-width:140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .right__header{
|
||||
& .profile__info{
|
||||
& .profile__wrapper{
|
||||
margin-left:15px;
|
||||
& .profile__button{
|
||||
& a{
|
||||
min-width:30px;
|
||||
min-height:30px;
|
||||
& span{
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.header__icon {
|
||||
width: 161px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// .header {
|
||||
// text-align: center;
|
||||
// // height: 11vh;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// border-bottom: 1px solid #dadce0;
|
||||
// justify-content: space-between;
|
||||
// /* display: none; */
|
||||
// position: fixed;
|
||||
// /* top: 0; */
|
||||
// width: 100%;
|
||||
// z-index: 1;
|
||||
|
||||
// @media (max-width: $desktop-breakpoint) {
|
||||
// text-align: center;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// border-bottom: 1px solid #dadce0;
|
||||
// justify-content: space-between;
|
||||
// position: fixed;
|
||||
// background: white;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// width: 100%;
|
||||
// height: 80px;
|
||||
// padding: 0;
|
||||
// z-index: 2;
|
||||
// // background: blue;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .header__title {
|
||||
// color: white;
|
||||
// text-decoration: none;
|
||||
// h1 {
|
||||
// margin: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .header__image {
|
||||
// width: 100px;
|
||||
// height: 30px;
|
||||
// margin: 20px 0 15px 20px;
|
||||
// cursor: pointer;
|
||||
// user-select: none;
|
||||
|
||||
// @media (max-width: $desktop-breakpoint) {
|
||||
// width: 73px;
|
||||
// height: 24px;
|
||||
// margin: 25px 0 15px 14px;
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// .header__form {
|
||||
// width: 55%;
|
||||
// margin-left: -179px;
|
||||
// position: relative;
|
||||
|
||||
// @media (max-width: $desktop-breakpoint) {
|
||||
// width: 67%;
|
||||
// margin-top: 5px;
|
||||
// margin-left: 8px;
|
||||
// position: unset;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// .header__content {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
// padding: $s-size 0;
|
||||
// }
|
||||
|
||||
// .header__setting {
|
||||
// width: 30px;
|
||||
// height: 30px;
|
||||
// /* position: fixed; */
|
||||
// /* right: 15px; */
|
||||
// /* top: 0px; */
|
||||
// margin: 20px 20px 20px 0;
|
||||
// cursor: pointer;
|
||||
|
||||
// @media (max-width: $desktop-breakpoint) {
|
||||
// margin: 25px 20px 20px 10px;
|
||||
// }
|
||||
|
||||
|
||||
// }
|
||||
|
||||
// .header__input {
|
||||
// border: 1px solid #f1f3f4;
|
||||
// height: 50px;
|
||||
// font-size: 1.8rem;
|
||||
// font-weight: 300;
|
||||
// padding: 1.2rem;
|
||||
// margin: 10px 0 10px 0;
|
||||
// /* margin-left: 130px; */
|
||||
// width: 100%;
|
||||
// border-radius: 3px;
|
||||
// background: #f1f3f4;
|
||||
|
||||
// @media (max-width: $desktop-breakpoint) {
|
||||
|
||||
// width: 121%;
|
||||
// }
|
||||
// }
|
||||
// .header__input:focus {
|
||||
|
||||
// background: white;
|
||||
// outline: none;
|
||||
// border-style: groove;
|
||||
// }
|
||||
|
||||
// .header__input__suggested {
|
||||
// width: 100%;
|
||||
// max-height: 43vh;
|
||||
// overflow: scroll;
|
||||
// background: white;
|
||||
// /* color: black; */
|
||||
// margin-top: -10px;
|
||||
// position: absolute;
|
||||
// z-index: 3;
|
||||
// box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
|
||||
// border-radius: 0 0 6px 6px;
|
||||
// border: groove 1px #f1f3f4;
|
||||
|
||||
// scrollbar-width: none; /* Firefox */
|
||||
// -ms-overflow-style: none; /* IE 10+ */
|
||||
// &::-webkit-scrollbar {
|
||||
// width: 0px;
|
||||
// background: transparent; /* Chrome/Safari/Webkit */
|
||||
// }
|
||||
|
||||
// @media (max-width: $desktop-breakpoint) {
|
||||
|
||||
// width: 100vw;
|
||||
// // margin-left: -23vw;
|
||||
// left: 0;
|
||||
// max-height: 50vh;
|
||||
// overflow: scroll;
|
||||
// background: white;
|
||||
// margin-top: 1px;
|
||||
// position: absolute;
|
||||
// z-index: 3;
|
||||
// box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
|
||||
// border-radius: 0 0 6px 6px;
|
||||
// border: groove 1px #f1f3f4;
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
|
||||
// .header__input__suggested--gone {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// .header__input__suggested__item {
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
|
||||
|
||||
// @media (max-width: $desktop-breakpoint) {
|
||||
// height: 55px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .header__input__suggested__item:hover {
|
||||
|
||||
// background: lightgrey;
|
||||
// border-radius: 6px;
|
||||
// }
|
||||
|
||||
// .header__input__suggested__item__title__wrapper {
|
||||
|
||||
// height: inherit;
|
||||
// color: red;
|
||||
// /* width: 400px; */
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// }
|
||||
|
||||
// .header__input__suggested__item__title {
|
||||
// color: #373737;;
|
||||
// font-weight: 300;
|
||||
// font-size: 18px;
|
||||
// padding-left: 9px;
|
||||
// font-size: small;
|
||||
// text-overflow: ellipsis;
|
||||
// max-width: 41vw;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
|
||||
// @media (max-width: $desktop-breakpoint) {
|
||||
// color: #373737;
|
||||
// font-weight: 300;
|
||||
// font-size: 18px;
|
||||
// padding-left: 9px;
|
||||
// font-size: medium;
|
||||
// text-overflow: ellipsis;
|
||||
// max-width: 41vw;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// .header__input__suggested__item__subtitle {
|
||||
// color: #373737;;
|
||||
// font-weight: 100;
|
||||
// font-size: small;
|
||||
// margin-right: 10px;
|
||||
// }
|
||||
|
||||
// .header__input__suggested__item__image {
|
||||
// width: 25px;
|
||||
// margin-left: 10px;
|
||||
// opacity: 0.7;
|
||||
|
||||
// @media (max-width: $desktop-breakpoint) {
|
||||
// width: 42px;
|
||||
// margin-left: 10px;
|
||||
// opacity: 0.7;
|
||||
// }
|
||||
|
||||
// }
|
||||
@@ -1,108 +0,0 @@
|
||||
.section {
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
&::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: unset;
|
||||
background: transparent; /* Chrome/Safari/Webkit */
|
||||
}
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
.main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80vw;
|
||||
width: fill-available;
|
||||
// overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
// margin-top: 77px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//overflow-x: hidden;
|
||||
overflow: hidden;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sub-container {
|
||||
width: inherit;
|
||||
// height: 83vh;
|
||||
height: -webkit-fill-available;
|
||||
display: inherit;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.outter-wrapper {
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
&::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: unset;
|
||||
background: transparent; /* Chrome/Safari/Webkit */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .outter-wrapper {
|
||||
// height: 100%;
|
||||
// width: 100%;
|
||||
// overflow: hidden;
|
||||
// @media (max-width: $desktop-breakpoint) {
|
||||
// //background: blue;
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
.main-page {
|
||||
background: white;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: inline-flex;
|
||||
padding-top: 71px;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
background: #fff;
|
||||
/* height: 100vh; */
|
||||
// height: calc(100% - 80px);
|
||||
height: unset;
|
||||
width: 100vw;
|
||||
display: inline-flex;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
// position: fixed;
|
||||
// padding: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// margin-top: 80px;
|
||||
//background: red;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,554 +0,0 @@
|
||||
.navigation__block{
|
||||
& .folder__structure{
|
||||
// padding:20px;
|
||||
max-height: 40vh;
|
||||
overflow-y: scroll;
|
||||
max-width: 100%;
|
||||
overflow-x: scroll;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
&::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: unset;
|
||||
background: transparent; /* Chrome/Safari/Webkit */
|
||||
}
|
||||
&>.elem__structure{
|
||||
cursor:pointer;
|
||||
margin-bottom:30px;
|
||||
& .last__structure--child{
|
||||
& .parent__structure{
|
||||
padding-left:2px;
|
||||
}
|
||||
}
|
||||
&{
|
||||
&>.child__structure{
|
||||
&>.elem__structure{
|
||||
padding-left:10px;
|
||||
&>.parent__structure{
|
||||
&>span{
|
||||
padding-right:15px;
|
||||
}
|
||||
}
|
||||
&>.child__structure{
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
padding-left:10px;
|
||||
&>.elem__structure{
|
||||
padding-left:10px;
|
||||
&>.parent__structure{
|
||||
&>span{
|
||||
// margin-right:15px;
|
||||
}
|
||||
}
|
||||
&>.child__structure{
|
||||
padding-left:10px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
&>.elem__structure{
|
||||
padding-left:10px;
|
||||
&>.parent__structure{
|
||||
&>span{
|
||||
// margin-right:15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
&>.child__structure{
|
||||
margin-bottom:15px;
|
||||
&:last-child{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
}
|
||||
& .parent__structure{
|
||||
&.current__folder--caret{
|
||||
&>.info__name{
|
||||
&>p{
|
||||
font-weight:bold;
|
||||
color:#3c85ee;
|
||||
&>span{
|
||||
&>i{
|
||||
color:#3c85ee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
align-items:center;
|
||||
margin-bottom:0px;
|
||||
&.active__parent{
|
||||
margin-bottom:15px;
|
||||
&:last-child{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
&>span{
|
||||
& img{
|
||||
transform:rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&>span{
|
||||
padding-right:20px;
|
||||
transition:.4s ease all;
|
||||
& img{
|
||||
transition:.4s ease all;
|
||||
}
|
||||
}
|
||||
& .info__name{
|
||||
&>p{
|
||||
color:#2E2E38;
|
||||
font-size:16px;
|
||||
font-weight:400;
|
||||
margin:0px;
|
||||
transition:.4s ease color;
|
||||
max-width: 141px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
&>span{
|
||||
display: inline-flex;
|
||||
margin-right:8px;
|
||||
transition:.4s ease all;
|
||||
&>i{
|
||||
transition:.4s ease all;
|
||||
font-size:15px;
|
||||
color:#637381;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .utility__buttons{
|
||||
padding:20px;
|
||||
border-top:1px solid #E8EEF2;
|
||||
& ul{
|
||||
padding:0px;
|
||||
list-style-type: none;
|
||||
margin:0px;
|
||||
& li {
|
||||
margin-bottom:25px;
|
||||
&:last-child{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
& a{
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
text-decoration:none;
|
||||
color:#2E2E38;
|
||||
font-size:16px;
|
||||
font-weight:400;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
& span{
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
min-width:30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .page__navigation{
|
||||
border-bottom:1px solid #E8EEF2;
|
||||
padding-left:20px;
|
||||
padding-right:20px;
|
||||
& ul{
|
||||
margin:0px;
|
||||
list-style-type: none;
|
||||
padding:0px;
|
||||
padding-bottom:20px;
|
||||
& li {
|
||||
& a{
|
||||
display: flex;
|
||||
align-items:flex-start;
|
||||
justify-content:flex-start;
|
||||
color:#3c85ee;
|
||||
font-weight:500;
|
||||
text-decoration:none;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
& span{
|
||||
min-width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .add__new{
|
||||
position: relative;
|
||||
margin-bottom:30px;
|
||||
&>a{
|
||||
&>span{
|
||||
transition:.4s ease all
|
||||
}
|
||||
}
|
||||
&.active__new{
|
||||
&>a>span{
|
||||
background: #361DAE;
|
||||
}
|
||||
}
|
||||
&>.dropdown__list{
|
||||
position: absolute;
|
||||
bottom:0px;
|
||||
top:100%;
|
||||
width:100%;
|
||||
display: none;
|
||||
& ul{
|
||||
padding-left:0px;
|
||||
list-style-type: none;
|
||||
margin:0px;
|
||||
border-radius:5px;
|
||||
overflow:hidden;
|
||||
background: white;;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), inset 0px 1px 0px #F5F7FA;
|
||||
& li{
|
||||
& a{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
background-color:#fff;
|
||||
justify-content:flex-start;
|
||||
padding:12px 20px;
|
||||
transition:.4s ease all;
|
||||
text-decoration:none;
|
||||
border-radius:5px;
|
||||
overflow:hidden;
|
||||
color:#0E1C71;
|
||||
font-size:15px;
|
||||
line-height:18px;
|
||||
& span{
|
||||
display: inline-flex;
|
||||
min-width:30px;
|
||||
}
|
||||
&:hover{
|
||||
background: #F6F5FD;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&>a{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
background-color:#3c85ee;
|
||||
text-decoration:none;
|
||||
border-radius:5px;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
&>p{
|
||||
width:100%;
|
||||
margin:0px;
|
||||
width:100%;
|
||||
text-align:center;
|
||||
color:#fff;
|
||||
font-size:16px;
|
||||
font-weight:500;
|
||||
}
|
||||
&>span{
|
||||
min-width:50px;
|
||||
min-height:45px;
|
||||
border-top-right-radius:5px;
|
||||
border-bottom-right-radius:5px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
border-left:1px solid rgba(255,255,255,.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file__settings{
|
||||
padding:0px 20px;
|
||||
& .settings__menu{
|
||||
margin-top:30px;
|
||||
& ul{
|
||||
& li{
|
||||
margin-bottom:20px;
|
||||
&:last-child{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
& a{
|
||||
color:#2E2E38;
|
||||
font-size:15px;
|
||||
font-weight:400;
|
||||
text-decoration:none;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
&.active__settings{
|
||||
& a{
|
||||
color:#3c85ee;
|
||||
font-weight:bold;
|
||||
font-size:15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
padding:0px;
|
||||
list-style-type: none;
|
||||
margin:0px;
|
||||
}
|
||||
}
|
||||
& .back__button{
|
||||
& a{
|
||||
color:#3c85ee;
|
||||
text-decoration:none;
|
||||
font-weight:500;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
& span{
|
||||
display: inline-flex;
|
||||
margin-right:10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.section--left {
|
||||
margin: 0 3px 0 0;
|
||||
width: 20vw;
|
||||
min-width: 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
// background: green;
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
|
||||
.add-button {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
margin-top: 13px;
|
||||
margin-left: 12px;
|
||||
height: 50px;
|
||||
width: 132px;
|
||||
align-items: center;
|
||||
box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
height: 40px;
|
||||
width: 104px;
|
||||
margin-left: 6px;
|
||||
margin-top: 6px;
|
||||
min-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-button-2 {
|
||||
|
||||
display: none;
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.add-button__img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 13px;
|
||||
margin-bottom: 3px;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
height: unset;
|
||||
width: 21%;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-button__title {
|
||||
font-weight: 500;
|
||||
color: #373737;
|
||||
padding-left: 2px;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
margin-left: 10px;
|
||||
width: 50%;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
padding-left: 0px;
|
||||
font-size: 17px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-button__title:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.add-button__option-wrapper {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border: none;
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
margin-left: -3px;
|
||||
z-index: 1;
|
||||
transition: margin 0.3s, max-height 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-button__option-wrapper2 {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border: none;
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
margin-left: 6px;
|
||||
z-index: 1;
|
||||
transition: margin 0.3s, max-height 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.add-button__option-wrapper--show {
|
||||
|
||||
max-height: 185px;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 10px;
|
||||
// padding: 0 140px 132px 36px;
|
||||
margin-top: 52px;
|
||||
box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
margin-top: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
.add_button__option__add-folder-wrapper {
|
||||
border-bottom: 1px solid #dadce0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.add_button__option__add-folder-wrapper:hover {
|
||||
background: lightgrey
|
||||
}
|
||||
|
||||
.add_button__option__add-folder-wrapper--no-border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.add_button__option__add-folder-image {
|
||||
width: 14%;
|
||||
height: 10%;
|
||||
margin-left: 14px;
|
||||
}
|
||||
|
||||
.add_button__option__add-folder-title {
|
||||
color: #373737;
|
||||
padding-top: 4px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.add_button__option__add-file-input {
|
||||
opacity: 0.0;
|
||||
|
||||
/* IE 8 */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
|
||||
/* IE 5-7 */
|
||||
filter: alpha(opacity=0);
|
||||
|
||||
/* Netscape or and older firefox browsers */
|
||||
-moz-opacity: 0.0;
|
||||
|
||||
/* older Safari browsers */
|
||||
-khtml-opacity: 0.0;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
position: absolute;
|
||||
top: 63px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: red;
|
||||
height: 32%;
|
||||
}
|
||||
|
||||
.storage__wrapper {
|
||||
width: inherit;
|
||||
height: 86px;
|
||||
}
|
||||
|
||||
.storage__title {
|
||||
color: black;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 3px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.storage__subtitle {
|
||||
font-size: 11px;
|
||||
margin-left: 16px;
|
||||
color: black;
|
||||
font-weight: 300;
|
||||
white-space: nowrap;
|
||||
width: 85%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.storage__progress__wrapper {
|
||||
|
||||
width: 75%;
|
||||
height: 6px;
|
||||
margin-left: 16px;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.storage__progress {
|
||||
|
||||
// width: 50%;
|
||||
// height: inherit;
|
||||
// /* color: red; */
|
||||
// background: #3f85f0;
|
||||
}
|
||||
|
||||
.utility__buttons_no_border {
|
||||
border: none !important;
|
||||
}
|
||||
@@ -1,915 +0,0 @@
|
||||
// .login {
|
||||
// position: absolute;
|
||||
// margin: auto;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// }
|
||||
|
||||
// .login-resend-email__button {
|
||||
|
||||
// color: #fff;
|
||||
// background: #3c85ed;
|
||||
// font-size: 12px;
|
||||
// border: none;
|
||||
// display: inline-block;
|
||||
// text-decoration: none;
|
||||
// line-height: 1;
|
||||
// border-radius: 2px;
|
||||
// padding: 9px;
|
||||
// width: 107px;
|
||||
// margin: 3px;
|
||||
// }
|
||||
|
||||
// .login-resend-email__wrapper {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// }
|
||||
|
||||
.get__started--block{
|
||||
height:100vh;
|
||||
width:100%;
|
||||
background-color:#fff;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
position: relative;
|
||||
& .login__head{
|
||||
position: absolute;
|
||||
top:20px;
|
||||
right:30px;
|
||||
& a{
|
||||
color:#3c85ee;
|
||||
font-weight:500;
|
||||
text-decoration:none;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .center__get--started{
|
||||
&>p{
|
||||
text-align:center;
|
||||
color:#637381;
|
||||
font-size:25px;
|
||||
font-weight:400;
|
||||
margin-top:0px;
|
||||
margin-bottom:40px;
|
||||
}
|
||||
& .center__button{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
& a{
|
||||
min-width:175px;
|
||||
min-height:50px;
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
background-color: #3c85ee;
|
||||
border-radius: 5px;
|
||||
font-weight:500;
|
||||
color:#fff;
|
||||
text-decoration: none;
|
||||
transition:.4s ease opacity;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.logo__wrap , &>.logo__text{
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
|
||||
& img{
|
||||
display:inline-flex;
|
||||
}
|
||||
}
|
||||
&>.logo__text{
|
||||
margin-top:50px;
|
||||
margin-bottom:35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom__float{
|
||||
position: fixed;
|
||||
bottom:45px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
& p{
|
||||
margin:0px;
|
||||
color:#637381;
|
||||
font-size:14px;
|
||||
line-height:24px;
|
||||
font-weight:400;
|
||||
}
|
||||
}
|
||||
|
||||
.sign__block , .login__block{
|
||||
height:auto;
|
||||
min-height:100vh;
|
||||
width:100%;
|
||||
background-color:#F4F4F6;
|
||||
padding-top:90px;
|
||||
& .sign__inner , & .login__inner{
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
&>.confirm__PIN{
|
||||
text-align:center;
|
||||
padding-bottom:120px;
|
||||
& form{
|
||||
& .after__pin{
|
||||
margin-top:20px;
|
||||
&>p{
|
||||
color:#637381;
|
||||
font-size:14px;
|
||||
line-height:24px;
|
||||
font-weight:400;
|
||||
margin:0px;
|
||||
}
|
||||
}
|
||||
& .group__submit{
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
& input{
|
||||
max-width:270px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>h2{
|
||||
color:#212B36;
|
||||
font-size:25px;
|
||||
font-weight:500;
|
||||
margin-top:0px;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
&>.pin__wrap{
|
||||
&>p{
|
||||
color:#637381;
|
||||
font-size:14px;
|
||||
font-weight:400;
|
||||
margin-top:0px;
|
||||
margin-bottom:15px;
|
||||
}
|
||||
& .pin__inner{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
margin-bottom:30px;
|
||||
&>span{
|
||||
color:#212B36;
|
||||
font-size:44px;
|
||||
line-height:38px;
|
||||
font-weight:bold;
|
||||
display: inline-flex;
|
||||
margin-right:15px;
|
||||
&:last-child{
|
||||
margin-right:0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&>p{
|
||||
color:#637381;
|
||||
font-size:14px;
|
||||
font-weight:400;
|
||||
line-height:25px;
|
||||
margin-bottom:20px;
|
||||
margin-top:0px;
|
||||
|
||||
& span{
|
||||
color:#212B36;
|
||||
font-weight:500;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.confirm__email{
|
||||
width:100%;
|
||||
max-width:420px;
|
||||
&>h2{
|
||||
color:#212B36;
|
||||
font-size:25px;
|
||||
margin:0px;
|
||||
margin-bottom:5px;
|
||||
font-weight:500;
|
||||
}
|
||||
&>p{
|
||||
color:#637381;
|
||||
font-size:14px;
|
||||
& span{
|
||||
font-weight:500;
|
||||
color:#212B36;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .resend__email{
|
||||
margin-top:20px;
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
flex-direction:column;
|
||||
&>p{
|
||||
color:#637381;
|
||||
font-size:15px;
|
||||
font-weight:400;
|
||||
display: none;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
margin:0px;
|
||||
& span{
|
||||
margin-right:5px;
|
||||
display: inline-flex;
|
||||
&.full__timer{
|
||||
margin-right:0px;
|
||||
}
|
||||
&>span{
|
||||
margin-right:0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& a{
|
||||
text-decoration:none;
|
||||
transition:.4s ease all;
|
||||
color:#3c85ee;
|
||||
font-size:15px;
|
||||
font-weight:500;
|
||||
line-height:24px;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
text-decoration:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .group__submit{
|
||||
&>input[type="submit"]{
|
||||
width:100%;
|
||||
height:48px;
|
||||
background: #3c85ee;
|
||||
border: 1px solid #3c85ee;
|
||||
border-radius:5px;
|
||||
color: #FFFFFF;
|
||||
font-size:15px;
|
||||
line-height:24px;
|
||||
font-weight:500;
|
||||
cursor:pointer;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .group__input{
|
||||
&.forgot__pass{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
& input{
|
||||
padding-right:75px;
|
||||
}
|
||||
& a{
|
||||
color:#3c85ee;
|
||||
font-size:15px;
|
||||
font-weight:500;
|
||||
text-decoration: none;
|
||||
transition:.4s ease all;
|
||||
position: absolute;
|
||||
right:15px;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
width:100%;
|
||||
margin-bottom:20px;
|
||||
&>input{
|
||||
width:100%;
|
||||
height:48px;
|
||||
padding-left:12px;
|
||||
padding-right:12px;
|
||||
color:#000;
|
||||
border:1px solid #637381;
|
||||
border-radius: 5px;
|
||||
outline:none;
|
||||
font-size:15px;
|
||||
&::-webkit-input-placeholder {
|
||||
color: #637381;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
color: #637381;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
color: #637381;
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
color: #637381;
|
||||
}
|
||||
}
|
||||
}
|
||||
display:flex;
|
||||
width:100%;
|
||||
max-width:620px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), inset 0px 1px 0px #F5F7FA;
|
||||
border-radius: 4px;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
position: relative;
|
||||
padding-top:70px;
|
||||
padding-left:100px;
|
||||
padding-right:100px;
|
||||
padding-bottom:45px;
|
||||
&>.create__account{
|
||||
width:100%;
|
||||
&>form{
|
||||
width:100%;
|
||||
& .already__group{
|
||||
margin-top:20px;
|
||||
& p{
|
||||
margin:0px;
|
||||
text-align:center;
|
||||
color:#637381;
|
||||
font-size:15px;
|
||||
line-height:24px;
|
||||
font-weight:400;
|
||||
& a{
|
||||
color:#3c85ee;
|
||||
font-weight:500;
|
||||
font-size:15px;
|
||||
line-height:24px;
|
||||
text-decoration:none;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&>h2{
|
||||
margin-top:0px;
|
||||
margin-bottom:20px;
|
||||
color:#212B36;
|
||||
font-size:25px;
|
||||
font-weight:500;
|
||||
}
|
||||
}
|
||||
&>.checkemail__pass{
|
||||
padding-bottom:30px;
|
||||
text-align:center;
|
||||
&>h2{
|
||||
margin-bottom:20px;
|
||||
margin-top:0px;
|
||||
color:#212B36;
|
||||
font-size:25px;
|
||||
font-weight:500;
|
||||
}
|
||||
&>p{
|
||||
margin-bottom:20px;
|
||||
font-size:14px;
|
||||
line-height:25px;
|
||||
color:#637381;
|
||||
&:last-child{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.new__password{
|
||||
width:100%;
|
||||
max-width:420px;
|
||||
&>h2{
|
||||
margin-bottom:20px;
|
||||
margin-top:0px;
|
||||
color:#212B36;
|
||||
font-size:25px;
|
||||
font-weight:500;
|
||||
}
|
||||
}
|
||||
&>.resetpass__request{
|
||||
padding:15px 0px;
|
||||
&>h2{
|
||||
color:#212B36;
|
||||
font-weight:500;
|
||||
font-size:25px;
|
||||
margin-top:0px;
|
||||
margin-bottom:15px;
|
||||
text-align:center;
|
||||
}
|
||||
&>p{
|
||||
text-align:center;
|
||||
color:#637381;
|
||||
font-size:14px;
|
||||
line-height:24px;
|
||||
font-weight:400;
|
||||
margin:20px 0px;
|
||||
}
|
||||
& .group__submit{
|
||||
max-width:260px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
& .after__request{
|
||||
margin-top:50px;
|
||||
&>p{
|
||||
margin:0px;
|
||||
color:#637381;
|
||||
font-size:14px;
|
||||
line-height:25px;
|
||||
text-align:center;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.login__form , &>.forgotpass__form{
|
||||
&>p{
|
||||
color:#637381;
|
||||
font-size:14px;
|
||||
line-height:24px;
|
||||
margin-bottom:15px;
|
||||
&:last-child{
|
||||
margin-bottom:0px;
|
||||
margin-top:0px;
|
||||
}
|
||||
}
|
||||
padding-bottom:20px;
|
||||
width:100%;
|
||||
max-width:420px;
|
||||
& .create__account{
|
||||
&>p{
|
||||
text-align:center;
|
||||
color:#637381;
|
||||
font-size:15px;
|
||||
font-weight:400;
|
||||
& a{
|
||||
color:#3c85ee;
|
||||
font-size:15px;
|
||||
font-weight:500;
|
||||
text-decoration:none;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&>h2{
|
||||
color:#212B36;
|
||||
font-weight:500;
|
||||
font-size:25px;
|
||||
margin-top:0px;
|
||||
margin-bottom:15px;
|
||||
}
|
||||
}
|
||||
&>.sign__logo , &>.login__logo{
|
||||
position: absolute;
|
||||
left:0px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
right:0px;
|
||||
top:0px;
|
||||
top:-35px;
|
||||
width:70px;
|
||||
height:70px;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
border-radius:250px;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
background-color:#fff;
|
||||
& img{
|
||||
max-width:45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.storage__block{
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
background-color: #F4F4F6;
|
||||
padding-top: 90px;
|
||||
& .inner__storage{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 620px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), inset 0px 1px 0px #F5F7FA;
|
||||
border-radius: 4px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding-top: 70px;
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
padding-bottom: 45px;
|
||||
& .login__logo{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
top: -35px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 250px;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
background-color: #fff;
|
||||
&>img{
|
||||
max-width:45px;
|
||||
}
|
||||
}
|
||||
& .storage__main{
|
||||
width:100%;
|
||||
max-width:420px;
|
||||
&>h2{
|
||||
margin-bottom:20px;
|
||||
margin-top:0px;
|
||||
color:#212B36;
|
||||
font-size:25px;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
& .wrap__storage--elements{
|
||||
&>.elem__storage{
|
||||
& .status__text{
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
&.active__status:before{
|
||||
content:"";
|
||||
position: absolute;
|
||||
right:-20px;
|
||||
width:12px;
|
||||
height:12px;
|
||||
background:url("/assets/fill.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size:cover;
|
||||
background-position:center;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
& .add__storage{
|
||||
position: absolute;
|
||||
right:30px;
|
||||
& a{
|
||||
text-decoration:none;
|
||||
color:#3c85ee;
|
||||
font-weight:500;
|
||||
font-size:15px;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .success__storage{
|
||||
position: absolute;
|
||||
right:25px;
|
||||
}
|
||||
border:1px solid #BEC9D3;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
cursor:pointer;
|
||||
transition:.4s ease all;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
&:last-child{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
&>.storage__main{
|
||||
padding:20px;
|
||||
padding-top:0px;
|
||||
padding-bottom:10px;
|
||||
& div{
|
||||
& button {
|
||||
color: white;
|
||||
font-size: unset;
|
||||
padding: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #3c85ee;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 6px;
|
||||
border: none
|
||||
}
|
||||
}
|
||||
& .enter__storage--key{
|
||||
width:100%;
|
||||
border:1px solid #637381;
|
||||
border-radius:5px;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
&>input{
|
||||
border-radius:5px;
|
||||
padding:10px;
|
||||
width:100%;
|
||||
margin-right:10px;
|
||||
color:#000;
|
||||
font-size:15px;
|
||||
line-height:24px;
|
||||
font-weight:400;
|
||||
border:0px;
|
||||
outline:none;
|
||||
&::-webkit-input-placeholder {
|
||||
color: #637381;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
color: #637381;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
color: #637381;
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
color: #637381;
|
||||
}
|
||||
}
|
||||
&>a{
|
||||
padding:2px 10px;
|
||||
border:1px solid #3c85ee;
|
||||
border-radius: 5px;
|
||||
min-width:60px;
|
||||
text-decoration:none;
|
||||
color:#3c85ee;
|
||||
font-weight:500;
|
||||
text-transform: uppercase;
|
||||
min-height:26px;
|
||||
transition:.4s ease all;
|
||||
margin-right:10px;
|
||||
&:hover{
|
||||
background-color:#3c85ee;
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>p{
|
||||
margin-top:0px;
|
||||
color:#637381;
|
||||
font-size:14px;
|
||||
line-height:25px;
|
||||
font-weight:400;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
}
|
||||
&>.head__storage{
|
||||
display: flex;
|
||||
width:100%;
|
||||
align-items:center;
|
||||
padding:20px;
|
||||
& .info__storage{
|
||||
&>p{
|
||||
margin:0px;
|
||||
color:#212B36;
|
||||
font-size:16px;
|
||||
font-weight:500;
|
||||
}
|
||||
&>span{
|
||||
color:#637381;
|
||||
font-size:13px;
|
||||
font-weight:400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 991px) and (orientation: landscape) {
|
||||
.bottom__float{
|
||||
bottom:10px;
|
||||
position: static;
|
||||
padding:25px 0px;
|
||||
}
|
||||
|
||||
.get__started--block {
|
||||
.center__get--started{
|
||||
&>.logo__wrap{
|
||||
&>img{
|
||||
max-width:70px;
|
||||
}
|
||||
}
|
||||
&>.logo__text{
|
||||
margin-top:20px;
|
||||
margin-bottom:15px;
|
||||
&>img{
|
||||
max-width:220px;
|
||||
}
|
||||
}
|
||||
&>p{
|
||||
margin-bottom:25px;
|
||||
font-size:21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:991px){
|
||||
.storage__block{
|
||||
& .inner__storage{
|
||||
max-width:450px;
|
||||
padding-top:45px;
|
||||
padding-left:50px;
|
||||
padding-right:50px;
|
||||
padding-bottom:25px;
|
||||
}
|
||||
}
|
||||
.login__block{
|
||||
& .login__inner{
|
||||
max-width:450px;
|
||||
padding-top:45px;
|
||||
padding-left:50px;
|
||||
padding-right:50px;
|
||||
padding-bottom:25px;
|
||||
}
|
||||
}
|
||||
.sign__block{
|
||||
& .sign__inner{
|
||||
max-width:450px;
|
||||
padding-top:45px;
|
||||
padding-left:50px;
|
||||
padding-right:50px;
|
||||
padding-bottom:25px;
|
||||
&>.confirm__PIN{
|
||||
padding-bottom:40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:480px){
|
||||
.storage__block{
|
||||
& .inner__storage{
|
||||
& .storage__main{
|
||||
& .wrap__storage--elements{
|
||||
&>.elem__storage{
|
||||
&>.storage__main{
|
||||
& .enter__storage--key{
|
||||
& input{
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sign__block, .login__block , .storage__block{
|
||||
padding-top:50px;
|
||||
}
|
||||
.storage__block{
|
||||
padding-left:15px;
|
||||
padding-right:15px;
|
||||
padding-bottom:20px;
|
||||
&>.inner__storage{
|
||||
padding-left:15px;
|
||||
padding-right:15px;
|
||||
&>.storage__main{
|
||||
&>h2{
|
||||
font-size:22px;
|
||||
margin-bottom:12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.login__block{
|
||||
padding-left:15px;
|
||||
padding-right:15px;
|
||||
& .login__inner{
|
||||
padding-left:25px;
|
||||
padding-right:25px;
|
||||
&>.resetpass__request , &>.new__password , &>.login__form , &>.forgotpass__form , &>.checkemail__pass{
|
||||
& .after__request{
|
||||
margin-top:30px;
|
||||
&>p{
|
||||
font-size:13px;
|
||||
line-height:20px;
|
||||
}
|
||||
}
|
||||
& .group__submit{
|
||||
& input{
|
||||
height:42px;
|
||||
}
|
||||
margin-bottom:12px;
|
||||
&:last-child{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
}
|
||||
& .group__input{
|
||||
&>input{
|
||||
height:42px;
|
||||
}
|
||||
margin-bottom:12px;
|
||||
&:last-child{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
}
|
||||
&>h2{
|
||||
margin-bottom:12px;
|
||||
font-size:22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sign__block{
|
||||
padding-left:15px;
|
||||
padding-right:15px;
|
||||
& .sign__inner{
|
||||
padding-left:25px;
|
||||
padding-right:25px;
|
||||
&>.create__account , &>.confirm__email, &>.confirm__PIN{
|
||||
&>h2{
|
||||
font-size:22px;
|
||||
margin-bottom:12px;
|
||||
}
|
||||
}
|
||||
& .create__account{
|
||||
&>form{
|
||||
&>.already__group{
|
||||
margin-top:12px;
|
||||
}
|
||||
&>.group__input , &>.group__submit{
|
||||
margin-bottom:12px;
|
||||
&>input[type="submit"]{
|
||||
height:42px;
|
||||
}
|
||||
&>input{
|
||||
height:42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>h2{
|
||||
margin-bottom:12px;
|
||||
font-size:22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom__float{
|
||||
bottom:15px;
|
||||
& p{
|
||||
font-size:13px;
|
||||
line-height:20px;
|
||||
}
|
||||
}
|
||||
.get__started--block{
|
||||
& .center__get--started{
|
||||
&>p{
|
||||
margin-bottom:25px;
|
||||
font-size:21px;
|
||||
}
|
||||
& .logo__text{
|
||||
margin-top:30px;
|
||||
margin-bottom:15px;
|
||||
&>img{
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-resend-email__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-resend-email {
|
||||
color: #3c85ee;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
transition: .4s ease all;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
margin: 6px;
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
.mobile__context-menu__wrapper {
|
||||
// height: 165px;
|
||||
|
||||
width: 98%;
|
||||
// background: red;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
/* margin-right: 130px; */
|
||||
margin-left: 1%;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302),
|
||||
0 1px 3px 1px rgba(60, 64, 67, 0.149);
|
||||
border: 1px solid #dadce0;
|
||||
border-bottom: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.mobile__context-menu__item {
|
||||
// background: blue;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.mobile__context-menu__image {
|
||||
width: 28px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.mobile__context-menu__title {
|
||||
color: #637381;
|
||||
}
|
||||
|
||||
// TODO: Get mobile context working
|
||||
.mobile__context__menu {
|
||||
@media (max-width: 640px) {
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
top: unset !important;
|
||||
right: unset !important;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
@@ -1,161 +0,0 @@
|
||||
.movermenu {
|
||||
width: 400px;
|
||||
height: 500px;
|
||||
background: white;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
-webkit-box-shadow: 0 11px 8px 0 rgba(0,0,0,0.2);
|
||||
box-shadow: 0 11px 8px 0 rgba(0,0,0,0.2);
|
||||
border: 2px solid #dadce0;
|
||||
z-index: 4;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
.movermenu__close-button {
|
||||
width: 32px;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.movermenu__form {
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center
|
||||
}
|
||||
}
|
||||
|
||||
.movermenu__nav_wrapper {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
/* background: green; */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.movermenu__main_wrapper {
|
||||
width: 100%;
|
||||
height: 341px;
|
||||
overflow: scroll;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 100%;
|
||||
height: calc(100% - 155px);
|
||||
}
|
||||
}
|
||||
|
||||
.movermenu__search_wrapper {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.movermenu__input {
|
||||
border: 1px solid #cacccd;
|
||||
border-radius: 2px;
|
||||
height: 32px;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
padding: 1.2rem;
|
||||
margin: 0 0 1.2rem 0;
|
||||
width: 381px;
|
||||
margin-top: 11px;
|
||||
background: #f1f3f4;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
height: 41px;
|
||||
font-size: 1.9rem;
|
||||
width: 98%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.movermenu__input:focus {
|
||||
|
||||
background: white;
|
||||
outline: none;
|
||||
border-style: groove;
|
||||
}
|
||||
|
||||
.movermenu__home-button {
|
||||
width: 32px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.movermenu__home-button--disabled {
|
||||
|
||||
cursor: default;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.movermenu__back-button {
|
||||
width: 32px;
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.movermenu__back-button--disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.movermenu__title {
|
||||
color: black;
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
margin-left: -6px;
|
||||
max-width: 55%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.movermenu__button {
|
||||
margin-right: 10px;
|
||||
color: white;
|
||||
background: #3c85ed;
|
||||
font-size: 12px;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
border-radius: 2px;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.movermenu__button_wrapper {
|
||||
width: 100%;
|
||||
/* background: blue; */
|
||||
height: 36px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
.photoviewer {
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.photoviewer__close-button {
|
||||
width: 22px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.photoviewer__image {
|
||||
width: 95%;
|
||||
height: 90%;
|
||||
margin-left: 2.5%;
|
||||
// background: blue;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.photoviewer__loader {
|
||||
width: 98%;
|
||||
height: 88%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
@@ -1,230 +0,0 @@
|
||||
.popup-window {
|
||||
width: 61%;
|
||||
height: 70%;
|
||||
background: white;
|
||||
position: fixed;
|
||||
margin: 0 auto;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
max-width: 800px;
|
||||
transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
z-index: 5;
|
||||
-webkit-box-shadow: 0 11px 8px 0 rgba(0,0,0,0.2);
|
||||
box-shadow: 0 11px 8px 0 rgba(0,0,0,0.2);
|
||||
border: 2px solid #dadce0;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.popup-window-video {
|
||||
height: unset;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-window--gone {
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup-window__title {
|
||||
color: black;
|
||||
font-weight: 300;
|
||||
margin-top: 10px;
|
||||
/* width: 100px; */
|
||||
max-width: 72%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: 21px;
|
||||
height: 35px;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-window__subtitle {
|
||||
color: black;
|
||||
font-weight: 300;
|
||||
font-size: 11px;
|
||||
margin-top: -11px;
|
||||
}
|
||||
|
||||
.popup-window__image__wrapper__subwrapper {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.popup-window__image {
|
||||
width: 120px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.popup-window__image--loaded {
|
||||
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
opacity: 1;
|
||||
border-radius: 6px;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 90vw;
|
||||
max-height: 70vh;
|
||||
max-width: 90vw;
|
||||
object-fit: contain;
|
||||
opacity: 1;
|
||||
border-radius: 6px;
|
||||
height: 70vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-window__button {
|
||||
// width: unset;
|
||||
// margin-bottom: 12px;
|
||||
font-size: unset;
|
||||
padding: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #3c85ee;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
&:hover{
|
||||
background-color: darken($color: #3c85ee, $amount: 20);
|
||||
}
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-window__button-video {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.popup-window__image__wrapper {
|
||||
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-bottom: 50px;
|
||||
height: 50%;
|
||||
width: 38%;
|
||||
max-width: 80%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
max-height: 50%;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
|
||||
width: 98%;
|
||||
max-width: 98%;
|
||||
}
|
||||
|
||||
// flex-direction: column-reverse;
|
||||
// align-items: center;
|
||||
// display: flex;
|
||||
// margin-bottom: 50px;
|
||||
// height: 50%;
|
||||
// width: 80%;
|
||||
// max-width: 80%;
|
||||
// overflow: hidden;
|
||||
// position: relative;
|
||||
// justify-content: center;
|
||||
// max-height: 50%;
|
||||
|
||||
// @media (max-width: $desktop-breakpoint) {
|
||||
|
||||
// flex-direction: column-reverse;
|
||||
// align-items: center;
|
||||
// display: flex;
|
||||
// margin-bottom: 50px;
|
||||
// overflow: visible;
|
||||
// position: relative;
|
||||
// justify-content: center;
|
||||
// height: 100vh;
|
||||
// width: 100vw;
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
.popup-window__spinner__wrapper {
|
||||
margin-left: -25px;
|
||||
}
|
||||
|
||||
.popup-window__close-button {
|
||||
width: 29px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 10px;
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popup-window__video {
|
||||
max-height: 70%;
|
||||
max-width: 95%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.popup-window-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-window-wrapper-video {
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-file-details-title {
|
||||
font-family: "Roboto",sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.popup-window-button-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
.quickaccess {
|
||||
width: inherit;
|
||||
height: 170px;
|
||||
// background: red;
|
||||
display: flex;
|
||||
/* flex-direction: row; */
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
/* overflow-y: hidden; */
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
// margin-top: calc(80px + 3vh);
|
||||
width: inherit;
|
||||
height: 153px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.quickaccess__item {
|
||||
min-width: 186px;
|
||||
min-height: 160px;
|
||||
height: 160px;
|
||||
width: 186px;
|
||||
margin: 5px;
|
||||
// background: blue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 10px;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
min-height: 144px;
|
||||
height: 148px;
|
||||
min-width: 46%;
|
||||
width: 46%;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.quickaccess__item__image__wrapper {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.quickaccess__item__image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.quickaccess__item__image--no-opacity {
|
||||
opacity: 1;
|
||||
border-radius: 10px;
|
||||
margin-top: 5px;
|
||||
max-height: 99px;
|
||||
max-width: 99px;
|
||||
object-fit: cover;
|
||||
|
||||
}
|
||||
|
||||
.quickaccess__item__title {
|
||||
// color: black;
|
||||
font-size: 13px;
|
||||
font-weight: 350;
|
||||
margin-top: 8px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
/* max-width: 100px; */
|
||||
width: 90%;
|
||||
/* height: 54px; */
|
||||
/* overflow: hidden; */
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.quickaccess__item__subtitle {
|
||||
|
||||
// color: black;
|
||||
margin-top: -12px;
|
||||
font-weight: 100;
|
||||
font-size: 11px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 90%;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.quickaccess__item__title__wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
.reset-password__main {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.reset-password__box {
|
||||
background: rgba(255,255,255,.85);
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
width: 35rem;
|
||||
padding: 3.2rem 1.6rem 1.2rem 1.6rem;
|
||||
border: .5px;
|
||||
border-style: groove;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.reset-password__title {
|
||||
margin: 0 0 3rem 0;
|
||||
line-height: 1;
|
||||
font-family: Arial,Helvetica,sans-serif;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.reset-password__input {
|
||||
border: 1px solid #cacccd;
|
||||
border-radius: 2px;
|
||||
height: 43px;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 300;
|
||||
padding: 1.2rem;
|
||||
margin: 0 0 1.2rem 0;
|
||||
width: -webkit-fill-available;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.reset-password__button {
|
||||
color: #fff;
|
||||
background: #3c85ed;
|
||||
font-size: 1.8rem;
|
||||
padding: 1.2rem;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
.section--right {
|
||||
margin: 0 0 0 3px;
|
||||
width: 37vw;
|
||||
transition: width 0.5s;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// height: 83vh;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
&::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
background: transparent; /* Chrome/Safari/Webkit */
|
||||
}
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
|
||||
.section--minimized {
|
||||
width: 0%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section--no-animation {
|
||||
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.section__title-wrapper {
|
||||
width: 25vw;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.section__title-text {
|
||||
|
||||
color: black;
|
||||
word-wrap: break-word;
|
||||
overflow: scroll;
|
||||
line-height: 24px;
|
||||
font-weight: 300;
|
||||
margin-left: 10px;
|
||||
text-overflow: ellipsis;
|
||||
max-height: 100%;
|
||||
padding: 6px;
|
||||
width: 77%;
|
||||
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
&::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
background: transparent; /* Chrome/Safari/Webkit */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.section__image {
|
||||
|
||||
width: 17vw;
|
||||
margin-left: 36px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.section__title {
|
||||
color: black;
|
||||
font-weight: 300;
|
||||
line-height: 24px;
|
||||
min-width: 25vw;
|
||||
max-width: 25vw;
|
||||
}
|
||||
|
||||
.section-detail-wrapper {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.section__none--wrapper {
|
||||
width: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section__title-text--gone {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.section__title-image {
|
||||
|
||||
width: 30px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.section__title-image--gone {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.section-detail__block {
|
||||
width: 34vw;
|
||||
height: 70%;
|
||||
/* background: green; */
|
||||
overflow: scroll;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.section-detail__wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.section-detail__title {
|
||||
color: black;
|
||||
margin-left: 15px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.section-detail__title--margin {
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.section-detail__body {
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
margin-right: 35%;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
width: 43%;
|
||||
line-height: 22px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.section-detail__body--margin {
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
@@ -1,314 +0,0 @@
|
||||
.settingsmenu {
|
||||
width: 918px;
|
||||
height: 487px;
|
||||
background: white;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
-webkit-box-shadow: 0 11px 8px 0 rgba(0,0,0,0.2);
|
||||
box-shadow: 0 11px 8px 0 rgba(0,0,0,0.2);
|
||||
border: 2px solid #dadce0;
|
||||
z-index: 1;
|
||||
border-radius: 6px;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.settingsmenu--gone {
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
.settingsmenu__header {
|
||||
height: 45px;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.settingsmenu__header__image {
|
||||
height: 27px;
|
||||
opacity: 0.8;
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.settingsmenu__header__title {
|
||||
color: black;
|
||||
font-weight: 300;
|
||||
margin-left: 6px;
|
||||
font-size: 13px;
|
||||
margin-top: 21px
|
||||
}
|
||||
|
||||
.settingsmenu__header__button {
|
||||
|
||||
margin-right: 10px;
|
||||
height: 28px;
|
||||
margin-top: -6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settingsmenu__header__box {
|
||||
|
||||
height: inherit;
|
||||
width: 30%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 10px;
|
||||
margin-top: -18px;
|
||||
}
|
||||
|
||||
.settingsmenu_body {
|
||||
|
||||
max-height: 441px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
max-height: 93vh;
|
||||
}
|
||||
}
|
||||
|
||||
.settingsmenu__option {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
border-bottom: 1px solid #eee;
|
||||
height: 77px;
|
||||
max-height: 77px;
|
||||
/* align-items: center; */
|
||||
position: relative;
|
||||
/* align-content: center; */
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.settingsmenu__option--no-border {
|
||||
|
||||
border: unset
|
||||
}
|
||||
|
||||
.settingsmenu__option__title {
|
||||
|
||||
width: 250px;
|
||||
margin-left: 8%;
|
||||
font-weight: 500;
|
||||
/* position: absolute; */
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.settingsmenu__option__title--offset {
|
||||
margin-left: 59.5px;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.settingsmenu__suboption {
|
||||
width: 230px;
|
||||
height: 76px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-right: 10px;
|
||||
width: 135px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.settingsmenu__suboption--offset {
|
||||
margin-left: -42px;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
|
||||
margin-left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.settingsmenu__select {
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
color: #5f6368;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
font-weight: 500;
|
||||
padding-left: 3px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.settingsmenu__select:hover {
|
||||
background: lightgrey
|
||||
}
|
||||
|
||||
.settingsmenu__button {
|
||||
|
||||
color: white;
|
||||
background: #3c85ed;
|
||||
font-size: 12px;
|
||||
/* padding: 1.2rem; */
|
||||
border: none;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
border-radius: 2px;
|
||||
padding: 9px;
|
||||
|
||||
&:hover {
|
||||
background: darken(#3c85ed, 10);
|
||||
color: darken(white, 10)
|
||||
}
|
||||
}
|
||||
|
||||
.settingsmenu__button--red {
|
||||
background: red;
|
||||
margin-left: 3.5px;
|
||||
|
||||
&:hover {
|
||||
background: darken(red, 10);
|
||||
color: darken(white, 10)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.settingsmenu__button--offset-logout {
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.settingsmenu__button--offset-logout-all {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.settingsmenu__option__title__wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* width: 100%; */
|
||||
margin-left: 47px;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
|
||||
margin-left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.settingsmenu__option__info {
|
||||
width: 18px;
|
||||
position: absolute;
|
||||
margin-left: -21px;
|
||||
opacity: 0.7;
|
||||
top: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
margin-left: -41px;
|
||||
}
|
||||
}
|
||||
|
||||
.settingsmenu__option__info__style {
|
||||
width: 18px;
|
||||
position: absolute;
|
||||
margin-left: 28px;
|
||||
opacity: 0.7;
|
||||
top: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.settingsmenu__option__info__size {
|
||||
width: 18px;
|
||||
position: absolute;
|
||||
margin-left: 25px;
|
||||
opacity: 0.7;
|
||||
top: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.settingsmenu__add-account {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.settingsmenu__add-account-gone {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.settingsmenu__add-account-wrapper {
|
||||
// background: blue;
|
||||
width: 100%;
|
||||
height: 441px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.settingsmenu__add-account-box {
|
||||
|
||||
width: 54%;
|
||||
height: 61%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
// background: green;
|
||||
}
|
||||
|
||||
.settingsmenu_add-account-input-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.settingsmenu_add-account-input {
|
||||
/* font-weight: 300; */
|
||||
border: 1px solid #f1f3f4;
|
||||
/* height: 50px; */
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
/* padding: 7px; */
|
||||
/* margin: 10px 0 10px 0; */
|
||||
/* width: 100%; */
|
||||
/* margin: 3px; */
|
||||
height: 32px;
|
||||
padding-left: 8px;
|
||||
border-radius: 3px;
|
||||
background: #f1f3f4;
|
||||
width: 286px;
|
||||
}
|
||||
@@ -1,174 +0,0 @@
|
||||
.sharemenu {
|
||||
width: 425px;
|
||||
height: 230px;
|
||||
position: fixed;
|
||||
background: white;
|
||||
left: calc(70% - 425px);
|
||||
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302),
|
||||
0 1px 3px 1px rgba(60, 64, 67, 0.149);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.sharemenu--gone {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sharemenu--block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sharemenu__title {
|
||||
color: black;
|
||||
max-width: 88%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
/* margin-left: 5px; */
|
||||
margin-right: 5px;
|
||||
font-size: 13.5px;
|
||||
font-weight: 200;
|
||||
white-space: nowrap;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.sharemenu__subtitle {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.sharemenu__button__public {
|
||||
color: white;
|
||||
background: #3c85ed;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
border-radius: 2px;
|
||||
width: 29%;
|
||||
height: 37px;
|
||||
padding: 3px;
|
||||
|
||||
&:hover {
|
||||
background: darken(#3c85ed, 10);
|
||||
color: darken(white, 10);
|
||||
}
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 36%;
|
||||
height: 47px;
|
||||
}
|
||||
}
|
||||
|
||||
.sharemenu__close-button {
|
||||
width: 25px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
opacity: 0.8;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.sharemenu__button__one {
|
||||
color: white;
|
||||
background: #3c85ed;
|
||||
font-size: $font-size-large;
|
||||
padding: $s-size;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
border-radius: $small-border;
|
||||
|
||||
&:hover {
|
||||
background: darken(#3c85ed, 10);
|
||||
color: darken(white, 10);
|
||||
}
|
||||
}
|
||||
|
||||
.sharemenu__button__done {
|
||||
color: white;
|
||||
background: #3c85ed;
|
||||
font-size: $font-size-large;
|
||||
padding: $s-size;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
border-radius: $small-border;
|
||||
|
||||
&:hover {
|
||||
background: darken(#3c85ed, 10);
|
||||
color: darken(white, 10);
|
||||
}
|
||||
}
|
||||
|
||||
.sharemenu__link__wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
height: 49px;
|
||||
}
|
||||
}
|
||||
|
||||
.sharemenu__image {
|
||||
width: 27px;
|
||||
margin-left: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.spinner-image {
|
||||
border: 3px solid white;
|
||||
border-top: 3px solid #3498db;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
// margin-left: 50%;
|
||||
text-align: center;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
.spinner-image-grey {
|
||||
border: 3px solid lightgray;
|
||||
border-top: 3px solid #3498db;
|
||||
}
|
||||
|
||||
.share-model-spinner-wrapper {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.share-model-share-buttons-wrapper {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.share-button__wrapper {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
.spacer {
|
||||
display: flex;
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
.spacer__mobile {
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
margin-top: calc(80px + 6vh);
|
||||
}
|
||||
}
|
||||
|
||||
.spacer__title {
|
||||
color: #5f6368;
|
||||
margin-left: 22px;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
margin-left: 38px;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -36,10 +36,6 @@
|
||||
.spinner__no-margin {
|
||||
margin: 0;
|
||||
margin-bottom: 108px;
|
||||
|
||||
// @media (max-width: $desktop-breakpoint) {
|
||||
// margin-bottom: 108px;
|
||||
// }
|
||||
}
|
||||
|
||||
.homepage__spinner__wrapper {
|
||||
|
||||
@@ -1,129 +0,0 @@
|
||||
.info-button {
|
||||
width: 30px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.info-button:hover {
|
||||
-webkit-filter: drop-shadow(1px 1px 3px #222222);
|
||||
}
|
||||
|
||||
.drive-dropdown {
|
||||
|
||||
width: 100px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.grid-button {
|
||||
width: 30px;
|
||||
position: absolute;
|
||||
right: 60px;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
right: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.subbar {
|
||||
// background: purple;
|
||||
width: 80vw;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 7vh;
|
||||
min-height: 50px;
|
||||
user-select: none;
|
||||
// overflow-x: scroll;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 7vh;
|
||||
min-height: 50px;
|
||||
user-select: none;
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
background: white;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.path__block {
|
||||
height: inherit;
|
||||
/* min-height: 7vh; */
|
||||
/* width: 50px; */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
height: 52px;
|
||||
max-height: 52px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.path__wrapper {
|
||||
// background: blue;
|
||||
width: 50vw;
|
||||
margin-left: 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
height: 52px;
|
||||
/* max-height: inherit; */
|
||||
min-height: inherit;
|
||||
/* min-height: 7vh; */
|
||||
// margin-top: 4px;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
//background: transparent; /* Chrome/Safari/Webkit */
|
||||
}
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.path__title {
|
||||
color: black;
|
||||
font-size: 17px;
|
||||
line-height: 0;
|
||||
font-weight: 300;
|
||||
white-space: nowrap;
|
||||
/* height: fit-content; */
|
||||
padding: 0px 0 2px 0;
|
||||
margin-top: 19px;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
line-height: normal;
|
||||
padding: unset;
|
||||
margin: unset;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.path__image {
|
||||
height: fit-content;
|
||||
/* width: 30px; */
|
||||
// margin-top: 7px;
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
//margin-top: 3px;
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,15 @@
|
||||
|
||||
.swal2-popup {
|
||||
|
||||
font-size: 10px !important;
|
||||
font-size: 10px !important;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-confirm {
|
||||
background-color: #3c85ee !important;
|
||||
}
|
||||
|
||||
.swal2-cancel {
|
||||
background-color: red !important;
|
||||
}
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
.upload-switcher__select {
|
||||
background: none;
|
||||
border: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
color: #5f6368;
|
||||
font-size: 19px;
|
||||
outline: none;
|
||||
font-weight: 500;
|
||||
padding-left: 3px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.upload-switcher__wrapper {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 28px;
|
||||
}
|
||||
@@ -1,148 +0,0 @@
|
||||
.uploader__wrapper {
|
||||
width: 330px;
|
||||
/* max-height: 255px; */
|
||||
/* overflow: scroll; */
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
bottom: 25px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
-webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
|
||||
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
position: fixed;
|
||||
left:0;right:0;bottom:0;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.uploader__wrapper--gone {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.uploader__header__wrapper {
|
||||
width: inherit;
|
||||
height: 51px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #323232;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uploader__header__title {
|
||||
max-width: 50%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-weight: 300;
|
||||
margin-left: 15px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.uploader__header__button_wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-right: 15px;
|
||||
height: inherit;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.uploader__header__button {
|
||||
|
||||
margin-left: 33px;
|
||||
/* height: 34px; */
|
||||
width: 27px;
|
||||
opacity: 0.7;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload__item__wrapper {
|
||||
width: inherit;
|
||||
height: 50px;
|
||||
/* background: green; */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #dadce0;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
min-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.CircularProgressbar {
|
||||
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.upload__item__block {
|
||||
width: inherit;
|
||||
max-height: 255px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
// flex-direction: column-reverse;
|
||||
flex-direction: column;
|
||||
transition: height 0.5s;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
&::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
background: transparent; /* Chrome/Safari/Webkit */
|
||||
}
|
||||
}
|
||||
|
||||
.upload__item__block--hide {
|
||||
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.upload__item__item {
|
||||
margin-right: 15px;
|
||||
max-width: 72%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-weight: 300;
|
||||
margin-left: 15px;
|
||||
color: black;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.upload__item__progress {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload__item__image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
/* top: 1px; */
|
||||
/* margin-right: 15px; */
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.upload__item__item__wrapper {
|
||||
cursor: pointer;
|
||||
margin-right: 15px;
|
||||
margin-left: 15px;
|
||||
z-index: 3;
|
||||
width: 30px;
|
||||
max-width: 30px;
|
||||
// background: purple;
|
||||
}
|
||||
|
||||
.upload__item__item__wrapper--hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
.verify-page__wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.verify-page__title {
|
||||
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
.box-layout {
|
||||
background: white;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.box-layout__box {
|
||||
background: fade-out(white, .15);
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
width: 35rem;
|
||||
padding: 3.2rem 1.6rem 1.2rem 1.6rem;
|
||||
border: 0.5px;
|
||||
border-style: groove;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
border: none;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
}
|
||||
|
||||
.box-layout__title {
|
||||
margin: 0 0 3rem 0;
|
||||
line-height: 1;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: 500;
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
.box-layout__input {
|
||||
border: 1px solid #cacccd;
|
||||
border-radius: $small-border;
|
||||
height: 43px;
|
||||
font-size: $font-size-large;
|
||||
font-weight: 300;
|
||||
padding: $s-size;
|
||||
margin: 0 0 $s-size 0;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.box-layout--button {
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.box-layout__icon {
|
||||
position: absolute;
|
||||
width: 130px;
|
||||
left: 25px;
|
||||
top: 25px;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-layout__text {
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
.login__image__wrapper {
|
||||
width: inherit;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.login__image {
|
||||
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.login__title {
|
||||
|
||||
color: black;
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
.button {
|
||||
color: white;
|
||||
background: #3c85ed;
|
||||
font-size: $font-size-large;
|
||||
padding: $s-size;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
border-radius: $small-border;
|
||||
|
||||
&:hover {
|
||||
background: darken(#3c85ed, 10);
|
||||
color: darken(white, 10)
|
||||
}
|
||||
}
|
||||
|
||||
.button--small {
|
||||
color: white;
|
||||
background: #3c85ed;
|
||||
font-size: 11px;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
border-radius: 2px;
|
||||
width: 35%;
|
||||
white-space: nowrap;
|
||||
height: 100%;
|
||||
margin-left: 10%;
|
||||
|
||||
&:hover {
|
||||
background: darken(#3c85ed, 10);
|
||||
color: darken(white, 10)
|
||||
}
|
||||
}
|
||||
|
||||
.button--small--disabled {
|
||||
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.button--link {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.button--secondary {
|
||||
background: #888888
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
.content-container {
|
||||
margin: 0 auto;
|
||||
max-width: 80rem;
|
||||
padding: 0 $m-size;
|
||||
background: black;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.loader {
|
||||
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
body , html{
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
& input[type="text"] , & input[type="submit"]{
|
||||
outline:none;
|
||||
}
|
||||
}
|
||||
body{
|
||||
&.get__started--body{
|
||||
& .bottom__float{
|
||||
background-color:#fff;
|
||||
}
|
||||
}
|
||||
&.float__copyright{
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
align-items:flex-start;
|
||||
& .bottom__float{
|
||||
position: static;
|
||||
padding:20px 0px;
|
||||
}
|
||||
|
||||
& .sign__block , & .login__block{
|
||||
min-height:0px;
|
||||
height:auto;
|
||||
}
|
||||
}
|
||||
&.sign__back , &.login__block , &.storage__back{
|
||||
background-color:#F4F4F6;
|
||||
}
|
||||
& *{
|
||||
box-sizing:border-box;
|
||||
font-family:"Roboto" ,sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.main__wrapper--container{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
height:auto;
|
||||
min-height:calc(100vh - 73px);
|
||||
margin-top:73px;
|
||||
padding-left:250px;
|
||||
padding-right:275px;
|
||||
&>.menu__block{
|
||||
min-width:250px;
|
||||
max-width: 250px;
|
||||
border-right: 1px solid #E8EEF2;
|
||||
padding:20px 10px;
|
||||
position: fixed;
|
||||
top:72px;
|
||||
left:0px;
|
||||
background-color:#fff;
|
||||
height:calc(100vh - 73px);
|
||||
}
|
||||
&>.content__block{
|
||||
width:100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.small__switcher--content{
|
||||
display: none;
|
||||
}
|
||||
.overlay{
|
||||
width:100%;
|
||||
height:100vh;
|
||||
position: fixed;
|
||||
top:0px;
|
||||
left:0px;
|
||||
z-index:5;
|
||||
background-color:rgba(0,0,0,.7);
|
||||
display: none;
|
||||
}
|
||||
@media (max-width:1200px){
|
||||
.main__wrapper--container > .menu__block{
|
||||
position: fixed;
|
||||
top:0px;
|
||||
left:0px;
|
||||
z-index:6;
|
||||
height:100vh;
|
||||
overflow-y:auto;
|
||||
left:-290px;
|
||||
transition:.5s ease all;
|
||||
}
|
||||
.settings__container{
|
||||
& .small__switcher--content{
|
||||
padding-top:15px;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
max-width:690px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
padding-left:15px;
|
||||
padding-right:15px;
|
||||
&>a{
|
||||
text-decoration:none;
|
||||
font-size:30px;
|
||||
color:#3c85ee;
|
||||
transition:.4s ease all;
|
||||
display: inline-flex;
|
||||
&:hover{
|
||||
opacity:.7
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width:991px){
|
||||
.main__wrapper--container{
|
||||
margin-top:110px;
|
||||
}
|
||||
}
|
||||
@media (max-width:640px){
|
||||
|
||||
}
|
||||
@@ -1,701 +0,0 @@
|
||||
.file__container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
& .file__control--panel {
|
||||
width: 100%;
|
||||
padding: 65px 40px;
|
||||
overflow-y: scroll;
|
||||
&.empty__control--panel {
|
||||
& > .file__get--started {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
& .get__started--image {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
& > h6 {
|
||||
color: #212b36;
|
||||
font-size: 33px;
|
||||
font-weight: 400;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
& > p {
|
||||
color: #637381;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .file__details {
|
||||
min-width: 260px;
|
||||
max-width: 260px;
|
||||
border-left: 1px solid #e8eef2;
|
||||
padding: 25px;
|
||||
// position: fixed;
|
||||
// top:73px;
|
||||
background-color: #fff;
|
||||
// height:calc(100vh - 73px);
|
||||
right: 0px;
|
||||
& .file__info--wrap {
|
||||
& .file__control {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > .file__settings {
|
||||
margin-left: 15px;
|
||||
& a {
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #919eab;
|
||||
color: #919eab;
|
||||
text-decoration: none;
|
||||
transition: 0.4s ease all;
|
||||
&:hover {
|
||||
background-color: #3c85ee;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > a {
|
||||
width: 100%;
|
||||
max-width: 150px;
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #3c85ee;
|
||||
border-radius: 4px;
|
||||
color: #3c85ee;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: 0.4s ease all;
|
||||
&:hover {
|
||||
background-color: #3c85ee;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .file__information {
|
||||
& .elem__file--info {
|
||||
display: flex;
|
||||
margin-bottom: 7px;
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
justify-content: flex-start;
|
||||
& > span:nth-child(1) {
|
||||
color: #637381;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
margin-right: 35px;
|
||||
line-height: 20px;
|
||||
min-width: 50px;
|
||||
}
|
||||
& > span:nth-child(2) {
|
||||
color: #212b36;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .file__name {
|
||||
margin: 20px 0px;
|
||||
& p {
|
||||
margin: 0px;
|
||||
color: #212b36;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
max-height: 54px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
& > .file__type {
|
||||
& img {
|
||||
display: flex;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.empty__details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
& .file__details--inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
& span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& p {
|
||||
color: #637381;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
margin: 0px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings__mobile__margin {
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
width: 64vw !important;
|
||||
}
|
||||
}
|
||||
|
||||
.settings__folder__margin {
|
||||
margin-top: 32px !important;
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
margin-top: -10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.access__info--file {
|
||||
& .settings__wrap {
|
||||
& > a {
|
||||
&.active__setting {
|
||||
background-color: #3c85ee;
|
||||
& i {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
border-radius: 250px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
transition: 0.4s ease all;
|
||||
&:hover {
|
||||
background-color: #3c85ee;
|
||||
& i {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
& a i {
|
||||
transition: 0.4s ease all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload__mobile {
|
||||
opacity: 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
filter: alpha(opacity=0);
|
||||
-moz-opacity: 0;
|
||||
-khtml-opacity: 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
/* top: 63px; */
|
||||
/* left: 0; */
|
||||
/* bottom: 0; */
|
||||
width: 100%;
|
||||
top: 0;
|
||||
background: red;
|
||||
height: 41px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.recent__table--wrap {
|
||||
& .main__access {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(185px, 185px));
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 20px;
|
||||
& .elem__access {
|
||||
width: 100%;
|
||||
border: 1px solid #ebe9f9;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
transition: 0.4s ease all;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
border: 1px solid #3c85ee;
|
||||
}
|
||||
& .access__image {
|
||||
display: inline-flex;
|
||||
min-height: 100px;
|
||||
max-height: 100px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background: white;
|
||||
& > img {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
max-height: 100px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
& .access__info--file {
|
||||
padding-top: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
& > p {
|
||||
margin: 0px;
|
||||
color: #212b36;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
// display: flex;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
& > span {
|
||||
color: #637381;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
&.active__recent {
|
||||
&:hover {
|
||||
background-color: #3c85ee;
|
||||
& > td.settings__row i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
background-color: #3c85ee;
|
||||
& > td.location__row,
|
||||
& > td.name__row > .inner__name--row > p,
|
||||
& > td.modified__row,
|
||||
& > td.settings__row i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// div {
|
||||
// &.fa-folder {
|
||||
// width: 40px !important;
|
||||
// height: 40px;
|
||||
// color: #3c85ee;
|
||||
// }
|
||||
// }
|
||||
|
||||
.sorting__select {
|
||||
border: none;
|
||||
color: #212b36;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.folders__image {
|
||||
& > svg {
|
||||
width: 40px !important;
|
||||
height: 40px;
|
||||
color: #3c85ee;
|
||||
}
|
||||
}
|
||||
|
||||
.folder__selected {
|
||||
& > svg {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.upload__overlay {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: 10;
|
||||
& .inner__upload {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(33, 43, 54, 0.9);
|
||||
flex-direction: column;
|
||||
& > p {
|
||||
margin: 0px;
|
||||
color: #ffffff;
|
||||
font-size: 33px;
|
||||
line-height: 39px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-extension__wrapper {
|
||||
height: 27px;
|
||||
width: 27px;
|
||||
background: red;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.no-extension__title {
|
||||
font-weight: 600;
|
||||
font-size: 9.5px;
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.upload__status {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
right: 20px;
|
||||
z-index: 5;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), inset 0px 1px 0px #f5f7fa;
|
||||
border-radius: 4px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
max-width: 315px;
|
||||
overflow: hidden;
|
||||
& .content__upload {
|
||||
max-height: 300px;
|
||||
overflow-y: scroll;
|
||||
& > .elem__upload {
|
||||
position: relative;
|
||||
&.uploading__now {
|
||||
&:hover {
|
||||
& .stop__download {
|
||||
display: block;
|
||||
}
|
||||
& .upload__size > span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
& .stop__download {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
cursor: pointer;
|
||||
right: 20px;
|
||||
display: none;
|
||||
transition: 0.4s ease all;
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.uploaded__cancelled {
|
||||
& > .upload__info {
|
||||
& > .top__upload {
|
||||
& > .retry__download {
|
||||
& > a {
|
||||
text-decoration: none;
|
||||
transition: 0.4s ease all;
|
||||
color: #3c85ee;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
transition: 0.4s ease all;
|
||||
&:hover {
|
||||
background: #f6f5fd;
|
||||
}
|
||||
& > .upload__info {
|
||||
width: 100%;
|
||||
& > .bottom__upload {
|
||||
& .failed__info {
|
||||
& > span {
|
||||
display: inline-flex;
|
||||
color: #bf0711;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
& > .progress__upload {
|
||||
width: 100%;
|
||||
background: #e0dcf3;
|
||||
border-radius: 1.5px;
|
||||
height: 3px;
|
||||
position: relative;
|
||||
& .active__progress {
|
||||
height: 3px;
|
||||
background: #3c85ee;
|
||||
border-radius: 1.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .top__upload {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
& > .upload__text {
|
||||
padding-right: 30px;
|
||||
& p {
|
||||
// display: inline-flex;
|
||||
// word-break:break-all;
|
||||
// max-width:200px;
|
||||
color: #0e1c71;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
font-weight: 500;
|
||||
max-width: 160px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
& > .upload__size {
|
||||
& > span {
|
||||
color: #637381;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
& p {
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .upload__elem--status {
|
||||
display: inline-flex;
|
||||
margin-right: 12px;
|
||||
& > img {
|
||||
min-width: 26px;
|
||||
max-width: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .head__upload {
|
||||
padding: 20px 15px;
|
||||
background: #3c85ee;
|
||||
min-width: 315px;
|
||||
border-radius: 0px 0px 3px 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
& .hide__upload {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
display: inline-flex;
|
||||
& > a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
transition: 0.4s ease all;
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > p {
|
||||
color: #ffffff;
|
||||
margin: 0px;
|
||||
font-size: 15px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.file__container {
|
||||
& > .file__control--panel {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
}
|
||||
.main__wrapper--container {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
&.settings__container {
|
||||
& > .content__block {
|
||||
& > .small__switcher--content {
|
||||
max-width: 690px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > .content__block {
|
||||
& .small__switcher--content {
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
background: white;
|
||||
margin-top: 0;
|
||||
padding-bottom: 15px;
|
||||
// top: 109px;
|
||||
margin-top: -2px;
|
||||
& > a {
|
||||
text-decoration: none;
|
||||
font-size: 30px;
|
||||
color: #3c85ee;
|
||||
transition: 0.4s ease all;
|
||||
display: inline-flex;
|
||||
margin-right: 23px;
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload__status {
|
||||
& > .head__upload {
|
||||
padding: 15px 12px;
|
||||
}
|
||||
& .content__upload {
|
||||
& > .elem__upload {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
// .small__switcher--content {
|
||||
// width: 92% !important;
|
||||
// }
|
||||
|
||||
.upload__overlay {
|
||||
& .inner__upload {
|
||||
& > p {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main__wrapper--container {
|
||||
min-height: auto;
|
||||
}
|
||||
.file__container {
|
||||
& > .file__control--panel.empty__control--panel {
|
||||
padding: 15px 0px;
|
||||
& .file__get--started {
|
||||
& > h6 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
& > p {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
& > .get__started--image {
|
||||
margin-bottom: 12px;
|
||||
& > img {
|
||||
max-width: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload__status {
|
||||
right: 0px;
|
||||
width: 100%;
|
||||
border-radius: 0px;
|
||||
max-width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
& > .head__upload {
|
||||
padding: 10px;
|
||||
}
|
||||
& .content__upload {
|
||||
// display: none;
|
||||
max-height: 120px;
|
||||
overflow-y: scroll;
|
||||
& > .elem__upload {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.recent__table--wrap {
|
||||
& > .main__access {
|
||||
grid-template-columns: repeat(auto-fit, minmax(40%, 48%));
|
||||
grid-column-gap: 10px;
|
||||
& .elem__access {
|
||||
& > .access__image {
|
||||
min-height: 85px;
|
||||
max-height: 85px;
|
||||
& > img {
|
||||
min-height: 85px;
|
||||
max-height: 85px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.location__row {
|
||||
@media (max-width: 780px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.modified__row {
|
||||
@media (max-width: 780px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: $desktop-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,4 +0,0 @@
|
||||
@import '../components/body';
|
||||
@import "../components/file_content";
|
||||
@import "../components/file_panel";
|
||||
@import "../components/modals";
|
||||
@@ -1,593 +0,0 @@
|
||||
.modal__wrap{
|
||||
position: fixed;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width:100%;
|
||||
height:100vh;
|
||||
z-index:8;
|
||||
background: rgba(33, 43, 54, 0.9);
|
||||
& .inner__modal{
|
||||
display: flex;
|
||||
width:100%;
|
||||
height:100%;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
& .destination__modal{
|
||||
width:100%;
|
||||
max-width:460px;
|
||||
background-color:#fff;
|
||||
&>.destination__structure{
|
||||
&>.folder__structure{
|
||||
& .selected__destination{
|
||||
background-color:#3c85ee!important;
|
||||
&>span{
|
||||
&>i{
|
||||
color:#fff!important;
|
||||
}
|
||||
}
|
||||
&>.info__name{
|
||||
&>p{
|
||||
color:#fff!important;
|
||||
&>span>i{
|
||||
color:#fff!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.elem__structure{
|
||||
cursor: pointer;
|
||||
margin-bottom: 15px;
|
||||
&{
|
||||
&>.child__structure{
|
||||
& p{
|
||||
font-size:14px!important;
|
||||
}
|
||||
&>.elem__structure{
|
||||
&>.parent__structure{
|
||||
padding-left:55px;
|
||||
}
|
||||
&>.child__structure{
|
||||
&>.elem__structure{
|
||||
&>.parent__structure{
|
||||
padding-left:65px;
|
||||
}
|
||||
&>.child__structure{
|
||||
padding-left:10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .parent__structure{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0px;
|
||||
padding-left:45px;
|
||||
padding-right:25px;
|
||||
min-height:40px;
|
||||
transition:.4s ease all;
|
||||
&.last__structure{
|
||||
&>.info__name{
|
||||
&>p{
|
||||
padding-left:9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>span{
|
||||
&>i{
|
||||
transition:.4s ease all;
|
||||
}
|
||||
}
|
||||
&.active__parent{
|
||||
&:last-child{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
&>span{
|
||||
& i{
|
||||
transform:rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
&>span>img{
|
||||
width:80px;
|
||||
}
|
||||
background-color:#3c85ee;
|
||||
& *{
|
||||
color:#fff!important;
|
||||
}
|
||||
}
|
||||
& .info__name{
|
||||
position: relative;
|
||||
& p{
|
||||
color: #2E2E38;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin: 0px;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
&>span{
|
||||
display: inline-flex;
|
||||
margin-right:7px;
|
||||
&>i{
|
||||
color:#3c85ee;
|
||||
font-size:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&>span{
|
||||
&>i{
|
||||
color:#7780AF;
|
||||
font-size:20px;
|
||||
}
|
||||
padding-right: 10px;
|
||||
transition: .4s ease all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .destination__move{
|
||||
padding:15px 0px;
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
border-top:1px solid #E9ECFB;
|
||||
& a{
|
||||
min-width:150px;
|
||||
min-height:45px;
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
background-color:#3c85ee;
|
||||
border-radius:5px;
|
||||
color:#FFFFFF;
|
||||
font-size:15px;
|
||||
font-weight:bold;
|
||||
text-decoration:none;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .destination__structure{
|
||||
padding:20px 0px
|
||||
}
|
||||
& .destination__head{
|
||||
padding: 18px 30px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border-bottom: 1px solid #DFE2F3;
|
||||
&>h2{
|
||||
margin:0px;
|
||||
color:#212B36;
|
||||
font-size:16px;
|
||||
font-weight:400;
|
||||
}
|
||||
&>.close__modal{
|
||||
position: absolute;
|
||||
right:20px;
|
||||
&>a{
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
&>img{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .password__modal{
|
||||
width:100%;
|
||||
max-width:460px;
|
||||
background-color:#fff;
|
||||
& .password__content{
|
||||
padding-top:15px;
|
||||
padding-bottom:35px;
|
||||
padding-left: 30px;
|
||||
padding-right:30px;
|
||||
&>form{
|
||||
& .password__submit{
|
||||
& input[type="submit"]{
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #3c85ee;
|
||||
border: 1px solid #3c85ee;
|
||||
border-radius: 5px;
|
||||
color: #FFFFFF;
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: .4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
& div {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #3c85ee;
|
||||
border: 1px solid #3c85ee;
|
||||
border-radius: 5px;
|
||||
color: #FFFFFF;
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: .4s ease all;
|
||||
position: relative;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
& input[type="file"]{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
& p {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -3px;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
& button {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #3c85ee;
|
||||
border: 1px solid #3c85ee;
|
||||
border-radius: 5px;
|
||||
color: #FFFFFF;
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: .4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .group__password{
|
||||
width:100%;
|
||||
margin-bottom:20px;
|
||||
&:last-child{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
&>input{
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
border: 1px solid #BEC9D3;
|
||||
padding-left: 15px;
|
||||
outline:none;
|
||||
padding-right: 15px;
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .head__password{
|
||||
padding: 18px 30px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border-bottom: 1px solid #DFE2F3;
|
||||
&>.close__modal{
|
||||
position: absolute;
|
||||
right:20px;
|
||||
&>a{
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
&>img{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>h2{
|
||||
color:#212B36;
|
||||
font-size:16px;
|
||||
font-weight:400;
|
||||
margin:0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .share__modal{
|
||||
width:100%;
|
||||
max-width:460px;
|
||||
background-color:#fff;
|
||||
&>div{
|
||||
&.get__share--link{
|
||||
padding:25px 30px;
|
||||
&>p{
|
||||
margin-bottom:7px;
|
||||
margin-top:0px;
|
||||
color:#212B36;
|
||||
font-size:15px;
|
||||
font-weight:400;
|
||||
}
|
||||
&>.get__link{
|
||||
& .copied__wrap{
|
||||
position: absolute;
|
||||
min-width:85px;
|
||||
right:-19px;
|
||||
top:-32px;
|
||||
height:30px;
|
||||
background: rgba(44, 46, 47, 0.9);
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15), 0px 1px 0px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 5px;
|
||||
display:none;
|
||||
text-align:center;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
&:before{
|
||||
content:"";
|
||||
position: absolute;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 7px solid rgba(44, 46, 47, 0.9);
|
||||
top:30px;
|
||||
background:url('/assets/triangle.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size:cover;
|
||||
background-position:center;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
& img{
|
||||
margin-right:7px;
|
||||
display: inline-flex;
|
||||
}
|
||||
& p{
|
||||
color:#fff;
|
||||
font-size:13px;
|
||||
font-weight:400;
|
||||
margin:0px;
|
||||
display: inline-flex;
|
||||
min-height:30px;
|
||||
align-items:center;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
&>input{
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding-left: 12px;
|
||||
padding-right: 35px;
|
||||
color: #000;
|
||||
border: 1px solid #637381;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
&>a{
|
||||
position: absolute;
|
||||
right:10px;
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
width:100%;
|
||||
&.share__recipient{
|
||||
& .share__success{
|
||||
margin-top: 15px;
|
||||
& p{
|
||||
& span{
|
||||
display: inline-flex;
|
||||
margin-right:7px;
|
||||
}
|
||||
color:#00CF92;
|
||||
font-size:15px;
|
||||
font-weight:400;
|
||||
margin:0px;
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
}
|
||||
}
|
||||
padding:25px 30px;
|
||||
border-bottom:1px solid #DFE2F3;
|
||||
&>form{
|
||||
display: flex;
|
||||
width:100%;
|
||||
&>.group__submit{
|
||||
& input{
|
||||
min-height:48px;
|
||||
min-width:70px;
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
background-color:#3c85ee;
|
||||
color:#fff;
|
||||
font-size:15px;
|
||||
font-weight:bold;
|
||||
line-height:24px;
|
||||
text-decoration:none;
|
||||
border:0px;
|
||||
border-radius:4px;
|
||||
transition:.4s ease all;
|
||||
cursor:pointer;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.group__input{
|
||||
width:100%;
|
||||
margin-right: 15px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
&>span{
|
||||
position: absolute;
|
||||
left:12px;
|
||||
font-size:16px;
|
||||
top:14px;
|
||||
transition:.3s ease all;
|
||||
color:#212B36;
|
||||
}
|
||||
& input{
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
color: #000;
|
||||
border: 1px solid #637381;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>p{
|
||||
margin-bottom:7px;
|
||||
margin-top:0px;
|
||||
color:#212B36;
|
||||
font-size:15px;
|
||||
font-weight:400;
|
||||
}
|
||||
}
|
||||
&.share__head{
|
||||
padding:18px 30px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content:flex-start;
|
||||
border-bottom:1px solid #DFE2F3;
|
||||
&>.share__info{
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
& p{
|
||||
margin:0px;
|
||||
color:#212B36;
|
||||
font-size:15px;
|
||||
font-weight:400;
|
||||
// display: inline-flex;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 329px;
|
||||
@media (max-width:500px) {
|
||||
max-width: 283px;
|
||||
}
|
||||
@media (max-width:500px) {
|
||||
max-width: 283px;
|
||||
}
|
||||
@media (max-width:400px) {
|
||||
max-width: 200px;
|
||||
}
|
||||
@media (max-width:280px) {
|
||||
max-width: 151px;
|
||||
}
|
||||
}
|
||||
& span{
|
||||
color:#637381;
|
||||
font-size:13px;
|
||||
font-weight:300;
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
&>.share__type{
|
||||
max-width:30px;
|
||||
width:100%;
|
||||
display: inline-flex;
|
||||
align-items:center;
|
||||
margin-right:10px;
|
||||
}
|
||||
&>.close__modal{
|
||||
position: absolute;
|
||||
right:20px;
|
||||
&>a{
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
&>img{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-button__wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
@media (max-width:767px){
|
||||
.modal__wrap{
|
||||
& .inner__modal {
|
||||
padding-left:15px;
|
||||
padding-right:15px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@media (max-width:480px){
|
||||
div.modal__wrap{
|
||||
&>.inner__modal{
|
||||
& .password__modal{
|
||||
& .head__password{
|
||||
padding:18px 15px;
|
||||
}
|
||||
& .password__content{
|
||||
padding:15px;
|
||||
}
|
||||
}
|
||||
& .destination__modal{
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
& div.destination__head{
|
||||
padding:15px;
|
||||
}
|
||||
& div.destination__structure{
|
||||
padding:15px 0px;
|
||||
}
|
||||
& div.destination__move{
|
||||
padding:15px 0px;
|
||||
}
|
||||
}
|
||||
& .share__modal {
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
& div.share__head{
|
||||
padding:15px;
|
||||
}
|
||||
& div.share__recipient{
|
||||
padding:15px;
|
||||
}
|
||||
& div.get__share--link{
|
||||
padding:15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,486 +0,0 @@
|
||||
.main__settings--block{
|
||||
& .inner__settings{
|
||||
max-width:690px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
padding-top:30px;
|
||||
padding-bottom:30px;
|
||||
& .elem__settings{
|
||||
&>.settings__switchers{
|
||||
padding-top:25px;
|
||||
padding-left:15px;
|
||||
padding-right:15px;
|
||||
&>span{
|
||||
display: inline-flex;
|
||||
margin-bottom:10px;
|
||||
color:#637381;
|
||||
font-size:13px;
|
||||
font-weight:400;
|
||||
}
|
||||
&>p{
|
||||
margin:0px;
|
||||
margin-bottom:12px;
|
||||
display: flex;
|
||||
&:last-child{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
}
|
||||
& [type="checkbox"]:not(:checked),
|
||||
& [type="checkbox"]:checked {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
& [type="checkbox"]:not(:checked) + label,
|
||||
& [type="checkbox"]:checked + label {
|
||||
position: relative;
|
||||
padding-left: 34px;
|
||||
cursor: pointer;
|
||||
color:#2C2E2F;
|
||||
font-size:15px;
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
/* checkbox aspect */
|
||||
& [type="checkbox"]:not(:checked) + label:before,
|
||||
& [type="checkbox"]:checked + label:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
width: 24px; height: 24px;
|
||||
border: 2px solid #ECECEC;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
|
||||
left: 0%;
|
||||
top: 50%;
|
||||
box-sizing:border-box;
|
||||
transform: translate(0%,-50%);
|
||||
}
|
||||
/* checked mark aspect */
|
||||
& [type="checkbox"]:not(:checked) + label:after,
|
||||
& [type="checkbox"]:checked + label:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width:24px;
|
||||
height:24px;
|
||||
background:url("/assets/activecheckbox.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size:auto;
|
||||
background-position:center;
|
||||
background-color:#3c85ee;
|
||||
border-radius:5px;
|
||||
font-size: 1.3em;
|
||||
line-height: 0.8;
|
||||
color: #09ad7e;
|
||||
box-sizing:border-box;
|
||||
transition: all .2s;
|
||||
font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
|
||||
left: 0%;
|
||||
top: 50%;
|
||||
transform: translate(0%,-50%);
|
||||
}
|
||||
/* checked mark aspect changes */
|
||||
& [type="checkbox"]:not(:checked) + label:after {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
& [type="checkbox"]:checked + label:after {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
left: 0%;
|
||||
top: 50%;
|
||||
transform: translate(0%,-50%);
|
||||
}
|
||||
/* disabled checkbox */
|
||||
& [type="checkbox"]:disabled:not(:checked) + label:before,
|
||||
& [type="checkbox"]:disabled:checked + label:before {
|
||||
box-shadow: none;
|
||||
border-color: #bbb;
|
||||
background-color: #ddd;
|
||||
}
|
||||
& [type="checkbox"]:disabled:checked + label:after {
|
||||
color: #999;
|
||||
}
|
||||
& [type="checkbox"]:disabled + label {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
margin-bottom:50px;
|
||||
&>.history__table{
|
||||
&>table{
|
||||
width:100%;
|
||||
& tr{
|
||||
width:100%;
|
||||
&>td{
|
||||
padding-top:35px;
|
||||
padding-bottom:35px;
|
||||
border-bottom:1px solid #E8EEF2;
|
||||
&:last-child{
|
||||
text-align:right;
|
||||
}
|
||||
&>a{
|
||||
color:#3c85ee;
|
||||
font-weight:500;
|
||||
font-size:15px;
|
||||
text-decoration:none;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
&:nth-child(1){
|
||||
padding-left:15px;
|
||||
}
|
||||
&:last-child{
|
||||
padding-right:15px;
|
||||
}
|
||||
padding-left:10px;
|
||||
padding-right:10px;
|
||||
&.date__history{
|
||||
color:#637381;
|
||||
font-size:15px;
|
||||
font-weight:400;
|
||||
width:140px;
|
||||
min-width:140px;
|
||||
}
|
||||
&.plan__history{
|
||||
min-width:240px;
|
||||
width:240px;
|
||||
}
|
||||
&.amount__history{
|
||||
min-width:100px;
|
||||
max-width:100px;
|
||||
}
|
||||
&.status__history{
|
||||
min-width:85px;
|
||||
width:85px;
|
||||
&.unpaid{
|
||||
color:#BF0711;
|
||||
font-weight:500;
|
||||
}
|
||||
&.paid{
|
||||
color:#39B54B;
|
||||
font-weight:500;
|
||||
}
|
||||
}
|
||||
color:#212B36;
|
||||
font-size:15px;
|
||||
font-weight:400;
|
||||
}
|
||||
&>th{
|
||||
text-align:left;
|
||||
border-bottom:1px solid #E8EEF2;
|
||||
color:#637381;
|
||||
font-size:13px;
|
||||
font-weight:400;
|
||||
padding:15px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.more__accounts{
|
||||
& .elem__control--settings{
|
||||
&>.control__title{
|
||||
&>p{
|
||||
color:#212B36;
|
||||
font-size:15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom:0px;
|
||||
}
|
||||
& .head__settings{
|
||||
padding:10px 15px;
|
||||
background-color:#F6F5FD;
|
||||
&>h2{
|
||||
margin:0px;
|
||||
color:#212B36;
|
||||
font-size:18px;
|
||||
font-weight:500;
|
||||
}
|
||||
}
|
||||
& .elem__control--settings{
|
||||
& .more__space{
|
||||
border:1px solid #E8EEF2;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
padding:10px 12px;
|
||||
width:100%;
|
||||
margin-top:20px;
|
||||
&>a{
|
||||
color:#3c85ee;
|
||||
font-size:13px;
|
||||
font-weight:500;
|
||||
text-decoration:none;
|
||||
min-width:80px;
|
||||
margin-left:10px;
|
||||
transition:.4s ease all;
|
||||
&:hover{
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
& p{
|
||||
margin:0px;
|
||||
font-size:13px;
|
||||
font-weight:400;
|
||||
display: inline-flex;
|
||||
flex-wrap:wrap;
|
||||
align-items:center;
|
||||
color:#637381;
|
||||
&>span{
|
||||
color:#212B36;
|
||||
font-weight:bold;
|
||||
}
|
||||
&>img{
|
||||
margin-right:7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .available__space--wrap{
|
||||
max-width:200px;
|
||||
width:100%;
|
||||
padding-right:25px;
|
||||
&>span{
|
||||
color:#637381;
|
||||
font-size:12px;
|
||||
font-weight:400;
|
||||
}
|
||||
& .space__bar{
|
||||
width:100%;
|
||||
height:11px;
|
||||
background-color:#EDEAF9;
|
||||
border-radius:50px;
|
||||
margin-bottom:3px;
|
||||
position: relative;
|
||||
& .active__space--bar{
|
||||
height:100%;
|
||||
position: absolute;
|
||||
left:0px;
|
||||
top:0px;
|
||||
border-radius:50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .control__title .double__title{
|
||||
&>p{
|
||||
color:#212B36;
|
||||
font-size:16px;
|
||||
font-weight:400;
|
||||
margin:0px;
|
||||
}
|
||||
&>span{
|
||||
display: inline-flex;
|
||||
color:#637381;
|
||||
font-size:13px;
|
||||
max-width: 100px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.storage__control{
|
||||
flex-direction:column;
|
||||
&>.active__storage{
|
||||
|
||||
width:100%;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
position: relative;
|
||||
& .value__updater{
|
||||
right:0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
padding:22px 15px;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
position: relative;
|
||||
border-bottom:1px solid #E8EEF2;
|
||||
|
||||
& .control__title{
|
||||
& p{
|
||||
margin:0px;
|
||||
color:#637381;
|
||||
font-size:15px;
|
||||
font-weight:400;
|
||||
}
|
||||
}
|
||||
& .control__value{
|
||||
padding-right:70px;
|
||||
width:50%;
|
||||
& .profile__picture{
|
||||
& p{
|
||||
display: inline-flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
min-width:48px;
|
||||
max-width:48px;
|
||||
min-height:48px;
|
||||
border-radius:250px;
|
||||
text-decoration:none;
|
||||
& span{
|
||||
font-size:24px;
|
||||
font-weight:400;
|
||||
}
|
||||
}
|
||||
}
|
||||
& p{
|
||||
text-align:left;
|
||||
color:#212B36;
|
||||
font-size:15px;
|
||||
font-weight:400;
|
||||
width:100%;
|
||||
margin:0px;
|
||||
}
|
||||
}
|
||||
& .value__updater{
|
||||
position: absolute;
|
||||
right:20px;
|
||||
& a{
|
||||
color:#3c85ee;
|
||||
font-size:15px;
|
||||
font-weight:500;
|
||||
transition:.4s ease all;
|
||||
text-decoration:none;
|
||||
&:hover{
|
||||
opacity:.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings__container{
|
||||
padding-right:250px;
|
||||
padding-left:250px;
|
||||
}
|
||||
@media (max-width:1440px){
|
||||
.settings__container{
|
||||
padding-right:150px;
|
||||
padding-left:250px;
|
||||
}
|
||||
}
|
||||
@media (max-width:1200px){
|
||||
.settings__container{
|
||||
padding-left:0px;
|
||||
padding-right:0px;
|
||||
}
|
||||
.main__settings--block{
|
||||
& .inner__settings{
|
||||
padding-top:15px;
|
||||
margin-top: 56px;
|
||||
& .elem__settings{
|
||||
&>.history__table{
|
||||
width:100%;
|
||||
overflow-x:scroll;
|
||||
&>table{
|
||||
width:690px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width:640px){
|
||||
.main__settings--block{
|
||||
& .inner__settings{
|
||||
& .elem__settings{
|
||||
margin-bottom:35px;
|
||||
&>.settings__switchers [type="checkbox"]:not(:checked) + label, &>.main__settings--block .inner__settings .elem__settings > &>.settings__switchers [type="checkbox"]:checked + label{
|
||||
font-size:14px;
|
||||
}
|
||||
&>.history__table{
|
||||
width:100%;
|
||||
overflow-x:scroll;
|
||||
&>table{
|
||||
& tr{
|
||||
&>td{
|
||||
padding-top:20px;
|
||||
padding-bottom:20px;
|
||||
&.date__history, &.plan__history , &.amount__history , &.status__history {
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .head__settings{
|
||||
& h2{
|
||||
font-size:16px;
|
||||
}
|
||||
}
|
||||
& .elem__control--settings{
|
||||
&.storage__control > .active__storage{
|
||||
justify-content: center;
|
||||
}
|
||||
&>.active__storage{
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
&>.more__space{
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
justify-content: center;
|
||||
align-items:center;
|
||||
& p{
|
||||
justify-content:center;
|
||||
text-align:center;
|
||||
&>span , &>img{
|
||||
margin-bottom:5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
padding:15px;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
& .control__title{
|
||||
&>.double__title{
|
||||
text-align:center;
|
||||
}
|
||||
&>p{
|
||||
font-size:14px;
|
||||
}
|
||||
margin-bottom:5px;
|
||||
}
|
||||
& .control__value{
|
||||
width:100%;
|
||||
max-width:180px;
|
||||
& .available__space--wrap{
|
||||
padding-right:0px;
|
||||
&>span{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top:5px;
|
||||
}
|
||||
}
|
||||
& .profile__picture{
|
||||
text-align: center;
|
||||
}
|
||||
padding-right:0px;
|
||||
&>p{
|
||||
word-break:break-all;
|
||||
text-align:center;
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
& .value__updater{
|
||||
&>a{
|
||||
font-size:13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,44 +2,9 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import "./base/settings";
|
||||
@import "./base/base";
|
||||
@import "./components/content-container";
|
||||
@import "./components/LoginPage";
|
||||
@import "./components/box-layout";
|
||||
@import "./components/button";
|
||||
@import "./components/Header";
|
||||
@import "./components/HomePage";
|
||||
@import "./components/Dataform";
|
||||
@import "./components/Folder";
|
||||
@import "./components/File";
|
||||
@import "./components/Filter";
|
||||
@import "./components/LeftSection";
|
||||
@import "./components/Subbar";
|
||||
@import "./components/RightSection";
|
||||
@import "./components/Uploader";
|
||||
@import "./components/loader";
|
||||
@import "./components/Spinner";
|
||||
@import "./components/QuickAccess";
|
||||
@import "./components/Spacer";
|
||||
@import "./components/Popup-window";
|
||||
@import "./components/ContentMenu";
|
||||
@import "./components/Sharemenu";
|
||||
@import "./components/DownloadPage";
|
||||
@import "./components/SettingsMenu";
|
||||
@import "./components/Swal";
|
||||
@import "./components/Photoviewer";
|
||||
@import "./components/MoverMenu";
|
||||
@import "./components/Folder-tree";
|
||||
@import "./components/VerifyEmailPage";
|
||||
@import "./components/ResetPasswordPage";
|
||||
@import "./components/AddGoogleAccountPage";
|
||||
@import "./components/AddStoragePage";
|
||||
@import "./components/AddStorageItems";
|
||||
@import "./components/UploadSwitcher";
|
||||
@import "./components/main.scss";
|
||||
@import "./components/settings.scss";
|
||||
@import "./components/MobileContextMenu";
|
||||
|
||||
.animate {
|
||||
transition: 0.2s ease all;
|
||||
|
||||
Reference in New Issue
Block a user