stylelint added, lint errors fixed (#3360)
This commit is contained in:
Nikolay Yurchenko
Vitalii Shpital
parent
9905f2c61e
commit
04b16c8b6c
1133
web/satellite/package-lock.json
generated
1133
web/satellite/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -4,7 +4,7 @@
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"lint": "vue-cli-service lint",
|
||||
"lint": "vue-cli-service lint && stylelint '**/*.{vue,scss}' --fix",
|
||||
"test": "vue-cli-service test:unit",
|
||||
"build": "vue-cli-service build",
|
||||
"dev": "vue-cli-service build --mode development"
|
||||
@ -38,6 +38,10 @@
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
"compression-webpack-plugin": "3.0.0",
|
||||
"stylelint": "11.1.1",
|
||||
"stylelint-webpack-plugin": "1.0.2",
|
||||
"stylelint-config-standard": "19.0.0",
|
||||
"stylelint-scss": "3.12.0",
|
||||
"jest-fetch-mock": "2.1.2",
|
||||
"node-sass": "4.12.0",
|
||||
"sass-loader": "7.1.0",
|
||||
@ -64,6 +68,41 @@
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
],
|
||||
"stylelint": {
|
||||
"plugins": [
|
||||
"stylelint-scss"
|
||||
],
|
||||
"extends": "stylelint-config-standard",
|
||||
"rules": {
|
||||
"indentation": 4,
|
||||
"string-quotes": "single",
|
||||
"no-duplicate-selectors": true,
|
||||
"selector-max-attribute": 1,
|
||||
"selector-combinator-space-after": "always",
|
||||
"selector-attribute-operator-space-before": "never",
|
||||
"selector-attribute-operator-space-after": "never",
|
||||
"selector-attribute-brackets-space-inside": "never",
|
||||
"declaration-block-trailing-semicolon": "always",
|
||||
"declaration-colon-space-before": "never",
|
||||
"declaration-colon-space-after": "always",
|
||||
"number-leading-zero": "always",
|
||||
"function-url-quotes": "always",
|
||||
"font-family-name-quotes": "always-unless-keyword",
|
||||
"comment-whitespace-inside": "always",
|
||||
"comment-empty-line-before": "always",
|
||||
"rule-empty-line-before": "always-multi-line",
|
||||
"selector-pseudo-element-colon-notation": "single",
|
||||
"selector-pseudo-class-parentheses-space-inside": "never",
|
||||
"selector-max-type": 1,
|
||||
"font-family-no-missing-generic-family-keyword": true,
|
||||
"at-rule-no-unknown": true,
|
||||
"media-feature-range-operator-space-before": "always",
|
||||
"media-feature-range-operator-space-after": "always",
|
||||
"media-feature-parentheses-space-inside": "never",
|
||||
"media-feature-colon-space-before": "never",
|
||||
"media-feature-colon-space-after": "always"
|
||||
}
|
||||
},
|
||||
"jest": {
|
||||
"automock": false,
|
||||
"setupFiles": [
|
||||
|
||||
@ -59,28 +59,24 @@ export default class App extends Vue {
|
||||
img,
|
||||
a {
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
user-drag: none;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "font_regular";
|
||||
font-family: 'font_regular';
|
||||
font-display: swap;
|
||||
src: url("../static/fonts/font_regular.ttf");
|
||||
src: url('../static/fonts/font_regular.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "font_medium";
|
||||
font-family: 'font_medium';
|
||||
font-display: swap;
|
||||
src: url("../static/fonts/font_medium.ttf");
|
||||
src: url('../static/fonts/font_medium.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "font_bold";
|
||||
font-family: 'font_bold';
|
||||
font-display: swap;
|
||||
src: url("../static/fonts/font_bold.ttf");
|
||||
src: url('../static/fonts/font_bold.ttf');
|
||||
}
|
||||
|
||||
a {
|
||||
@ -93,22 +89,25 @@ export default class App extends Vue {
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(56, 75, 101, 0.4);
|
||||
color: #354049;
|
||||
caret-color: #2683FF;
|
||||
caret-color: #2683ff;
|
||||
}
|
||||
|
||||
/* width */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 5px #fff;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #AFB7C1;
|
||||
background: #afb7c1;
|
||||
border-radius: 6px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
@ -19,19 +19,19 @@ export default class AccountArea extends Vue {}
|
||||
.account-area-container {
|
||||
padding: 44px 55px 55px 55px;
|
||||
position: relative;
|
||||
|
||||
|
||||
&__navigation {
|
||||
position: absolute;
|
||||
right: 55px;
|
||||
z-index: 99;
|
||||
background-color: #F5F6FA;
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
|
||||
|
||||
&__title {
|
||||
position: absolute;
|
||||
left: 55px;
|
||||
z-index: 99;
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
color: #354049;
|
||||
@ -41,6 +41,7 @@ export default class AccountArea extends Vue {}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.account-area-container {
|
||||
padding: 44px 40px 55px 40px;
|
||||
|
||||
|
||||
@ -164,13 +164,13 @@ export default class ChangePasswordPopup extends Vue {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.input-container.full-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.change-password-row-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -179,12 +179,12 @@ export default class ChangePasswordPopup extends Vue {
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.change-password-popup {
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
max-height: 470px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -192,7 +192,7 @@ export default class ChangePasswordPopup extends Vue {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
padding: 80px;
|
||||
|
||||
|
||||
&__info-panel-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -201,21 +201,21 @@ export default class ChangePasswordPopup extends Vue {
|
||||
margin-right: 100px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
&__form-container {
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
|
||||
|
||||
&__main-label-text {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 60px;
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
|
||||
&__button-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -225,7 +225,7 @@ export default class ChangePasswordPopup extends Vue {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__close-cross-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -236,22 +236,23 @@ export default class ChangePasswordPopup extends Vue {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover .close-cross-svg-path {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
|
||||
.change-password-popup {
|
||||
|
||||
|
||||
&__info-panel-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
&__form-container {
|
||||
|
||||
|
||||
&__button-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -124,7 +124,7 @@ export default class DeleteAccountPopup extends Vue {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
}
|
||||
|
||||
.input-container.full-input {
|
||||
@ -132,7 +132,7 @@ export default class DeleteAccountPopup extends Vue {
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #EB5757;
|
||||
background-color: #eb5757;
|
||||
}
|
||||
|
||||
.text {
|
||||
@ -144,7 +144,7 @@ export default class DeleteAccountPopup extends Vue {
|
||||
.delete-account {
|
||||
width: 100%;
|
||||
max-width: 845px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -161,10 +161,10 @@ export default class DeleteAccountPopup extends Vue {
|
||||
margin-right: 100px;
|
||||
|
||||
&__main-label-text {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
margin: 0 0 60px 0;
|
||||
}
|
||||
}
|
||||
@ -175,7 +175,7 @@ export default class DeleteAccountPopup extends Vue {
|
||||
|
||||
&__confirmation-text {
|
||||
margin: 0 0 25px 0;
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
|
||||
@ -206,18 +206,18 @@ export default class DeleteAccountPopup extends Vue {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .close-cross-svg-path {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
|
||||
.delete-account {
|
||||
padding: 10px;
|
||||
|
||||
&__info-panel-container {
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
&__form-container {
|
||||
|
||||
@ -125,7 +125,7 @@ export default class EditProfilePopup extends Vue {
|
||||
align-content: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
|
||||
.edit-profile-popup-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -137,9 +137,9 @@ export default class EditProfilePopup extends Vue {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.input-container.full-input {
|
||||
width: 100%;
|
||||
}
|
||||
@ -147,7 +147,7 @@ export default class EditProfilePopup extends Vue {
|
||||
.edit-profile-popup {
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -155,7 +155,7 @@ export default class EditProfilePopup extends Vue {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
padding: 80px;
|
||||
|
||||
|
||||
&__info-panel-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -164,12 +164,12 @@ export default class EditProfilePopup extends Vue {
|
||||
margin-right: 100px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
&__form-container {
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
margin-top: 10px;
|
||||
|
||||
|
||||
&__avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
@ -177,25 +177,25 @@ export default class EditProfilePopup extends Vue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #E8EAF2;
|
||||
background: #e8eaf2;
|
||||
margin-right: 20px;
|
||||
|
||||
|
||||
&__letter {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #354049;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__main-label-text {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 60px;
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
&__button-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -205,7 +205,7 @@ export default class EditProfilePopup extends Vue {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__close-cross-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -216,23 +216,23 @@ export default class EditProfilePopup extends Vue {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover .close-cross-svg-path {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
|
||||
.edit-profile-popup {
|
||||
|
||||
|
||||
&__info-panel-container {
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
|
||||
&__form-container {
|
||||
|
||||
|
||||
&__button-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -116,15 +116,15 @@ export default class ProfileArea extends Vue {
|
||||
.profile-container {
|
||||
position: relative;
|
||||
margin-top: 83px;
|
||||
font-family: 'font_regular';
|
||||
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__navigation {
|
||||
position: absolute;
|
||||
right: 55px;
|
||||
top: 44px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
|
||||
&__edit-profile {
|
||||
height: 66px;
|
||||
width: calc(100% - 80px);
|
||||
@ -136,14 +136,14 @@ export default class ProfileArea extends Vue {
|
||||
padding: 37px 40px;
|
||||
margin-top: 40px;
|
||||
background-color: #fff;
|
||||
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
&__avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
@ -151,25 +151,25 @@ export default class ProfileArea extends Vue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #E8EAF2;
|
||||
background: #e8eaf2;
|
||||
margin-right: 32px;
|
||||
|
||||
|
||||
&__letter {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #354049;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__secondary-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 40px;
|
||||
|
||||
|
||||
&__change-password {
|
||||
height: 66px;
|
||||
border-radius: 6px;
|
||||
@ -180,12 +180,12 @@ export default class ProfileArea extends Vue {
|
||||
padding: 37px 40px;
|
||||
background-color: #fff;
|
||||
width: calc(48% - 80px);
|
||||
|
||||
|
||||
&__text-container {
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__email-container {
|
||||
height: 66px;
|
||||
border-radius: 6px;
|
||||
@ -196,30 +196,30 @@ export default class ProfileArea extends Vue {
|
||||
padding: 37px 40px;
|
||||
background-color: #fff;
|
||||
width: calc(48% - 80px);
|
||||
|
||||
|
||||
&__text-container {
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__img {
|
||||
min-width: 60px;
|
||||
min-height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.no-margin {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.edit-svg {
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover {
|
||||
|
||||
.edit-svg__rect {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
|
||||
.edit-svg__path {
|
||||
@ -227,14 +227,14 @@ export default class ProfileArea extends Vue {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.input-container.full-input,
|
||||
.input-wrap.full-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.profile-bold-text {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
color: #354049;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
@ -248,22 +248,23 @@ export default class ProfileArea extends Vue {
|
||||
.profile-regular-text {
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
color: #AFB7C1;
|
||||
color: #afb7c1;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
|
||||
.profile-container {
|
||||
|
||||
|
||||
&__secondary-container {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
&__change-password {
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
|
||||
|
||||
&__email-container {
|
||||
margin-top: 40px;
|
||||
width: calc(100% - 80px);
|
||||
@ -271,31 +272,33 @@ export default class ProfileArea extends Vue {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-height: 825px) {
|
||||
|
||||
.profile-container {
|
||||
|
||||
&__secondary-container {
|
||||
margin-top: 20px;
|
||||
|
||||
|
||||
&__email-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__button-area {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
margin-top: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-height: 790px) {
|
||||
|
||||
.profile-container {
|
||||
height: 535px;
|
||||
overflow-y: scroll;
|
||||
|
||||
|
||||
&::-webkit-scrollbar,
|
||||
&::-webkit-scrollbar-track,
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@ -303,26 +306,30 @@ export default class ProfileArea extends Vue {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-height: 770px) {
|
||||
|
||||
.profile-container {
|
||||
height: 515px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-height: 750px) {
|
||||
|
||||
.profile-container {
|
||||
height: 495px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-height: 730px) {
|
||||
|
||||
.profile-container {
|
||||
height: 475px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-height: 710px) {
|
||||
|
||||
.profile-container {
|
||||
height: 455px;
|
||||
}
|
||||
|
||||
@ -97,7 +97,7 @@ export default class AccountBalance extends Vue {
|
||||
.button {
|
||||
|
||||
&:hover {
|
||||
background-color: #0059D0;
|
||||
background-color: #0059d0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@ -108,16 +108,16 @@ export default class AccountBalance extends Vue {
|
||||
justify-content: space-between;
|
||||
padding: 40px;
|
||||
margin-bottom: 32px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__title-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
margin-right: 13px;
|
||||
@ -131,11 +131,11 @@ export default class AccountBalance extends Vue {
|
||||
&:hover {
|
||||
|
||||
.account-balance-svg-path {
|
||||
fill: #FFFFFF;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.account-balance-svg-rect {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -173,7 +173,7 @@ export default class AccountBalance extends Vue {
|
||||
margin-top: 20px;
|
||||
|
||||
&__bold-text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
color: #354049;
|
||||
}
|
||||
}
|
||||
|
||||
@ -91,7 +91,7 @@ export default class BillingArea extends Vue {
|
||||
margin-bottom: 32px;
|
||||
|
||||
&__text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
margin: 0 17px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
@ -100,11 +100,11 @@ export default class BillingArea extends Vue {
|
||||
}
|
||||
|
||||
&__negative-balance {
|
||||
background-color: #FFD4D2;
|
||||
background-color: #ffd4d2;
|
||||
}
|
||||
|
||||
&__low-balance {
|
||||
background-color: #FCF8E3;
|
||||
background-color: #fcf8e3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,8 +56,8 @@ export default class BillingHistory extends Vue {
|
||||
|
||||
.billing-history-area {
|
||||
margin-top: 83px;
|
||||
background-color: #F5F6FA;
|
||||
font-family: 'font_regular';
|
||||
background-color: #f5f6fa;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__title-area {
|
||||
display: flex;
|
||||
@ -70,7 +70,7 @@ export default class BillingHistory extends Vue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 78px;
|
||||
@ -78,7 +78,7 @@ export default class BillingHistory extends Vue {
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
@ -89,25 +89,25 @@ export default class BillingHistory extends Vue {
|
||||
&:hover {
|
||||
|
||||
.billing-history-area__title-area__back-button {
|
||||
background-color: #2683FF;
|
||||
background-color: #2683ff;
|
||||
|
||||
.billing-history-svg-path {
|
||||
fill: #FFFFFF;
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
padding: 32px 44px 34px 36px;
|
||||
border-radius: 8px;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
@ -120,6 +120,7 @@ export default class BillingHistory extends Vue {
|
||||
}
|
||||
|
||||
@media (max-height: 1000px) and (max-width: 1230px) {
|
||||
|
||||
.billing-history-area {
|
||||
overflow-y: scroll;
|
||||
height: 65vh;
|
||||
|
||||
@ -20,11 +20,11 @@ export default class BillingItem extends Vue {}
|
||||
|
||||
<style scoped lang="scss">
|
||||
.download-link {
|
||||
color: #2683FF;
|
||||
font-family: 'font_bold';
|
||||
color: #2683ff;
|
||||
font-family: 'font_bold', sans-serif;
|
||||
|
||||
&:hover {
|
||||
color: #0059D0;
|
||||
color: #0059d0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,14 +34,14 @@ export default class BillingItem extends Vue {}
|
||||
align-items: center;
|
||||
width: calc(100% - 60px);
|
||||
border-top: 1px solid rgba(169, 181, 193, 0.3);
|
||||
|
||||
|
||||
&__item {
|
||||
width: 35%;
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
margin-right: 10px;
|
||||
color: #61666B;
|
||||
color: #61666b;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -66,19 +66,19 @@ export default class CardComponent extends Vue {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bold {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #61666B;
|
||||
color: #61666b;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
|
||||
.medium {
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #61666B;
|
||||
color: #61666b;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@ -89,7 +89,7 @@ export default class CardComponent extends Vue {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
background-color: #F5F6FA;
|
||||
background-color: #f5f6fa;
|
||||
border-radius: 6px;
|
||||
|
||||
&__info-area {
|
||||
@ -138,7 +138,7 @@ export default class CardComponent extends Vue {
|
||||
align-items: center;
|
||||
|
||||
&__label {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #000;
|
||||
|
||||
@ -57,23 +57,23 @@ export default class CardDialog extends Vue {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
z-index: 100;
|
||||
background-image: url("../../../../static/images/payments/Dialog.svg");
|
||||
background-image: url('../../../../static/images/payments/Dialog.svg');
|
||||
background-size: contain;
|
||||
width: 167px;
|
||||
height: 122px;
|
||||
cursor: initial;
|
||||
|
||||
&__make-default {
|
||||
color: #61666B;
|
||||
color: #61666b;
|
||||
}
|
||||
|
||||
&__delete {
|
||||
color: #EB5757;
|
||||
color: #eb5757;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
height: 35%;
|
||||
|
||||
@ -45,16 +45,16 @@ export default class DepositAndBilling extends Vue {
|
||||
.deposit-and-billing-area {
|
||||
margin-bottom: 32px;
|
||||
padding: 40px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
|
||||
&__title {
|
||||
font-size: 32px;
|
||||
@ -65,7 +65,7 @@ export default class DepositAndBilling extends Vue {
|
||||
display: flex;
|
||||
width: 120px;
|
||||
height: 48px;
|
||||
border: 1px solid #AFB7C1;
|
||||
border: 1px solid #afb7c1;
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -74,8 +74,8 @@ export default class DepositAndBilling extends Vue {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #2683FF;
|
||||
color: #FFFFFF;
|
||||
background-color: #2683ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -121,9 +121,9 @@ export default class MonthlyBillingSummary extends Vue {
|
||||
.current-month-area {
|
||||
margin-bottom: 32px;
|
||||
padding: 40px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
@ -133,7 +133,7 @@ export default class MonthlyBillingSummary extends Vue {
|
||||
&__month-info {
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
@ -165,13 +165,13 @@ export default class MonthlyBillingSummary extends Vue {
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
color: #AFB7C1;
|
||||
color: #afb7c1;
|
||||
}
|
||||
|
||||
&__usage-charges {
|
||||
margin: 18px 0 0 0;
|
||||
padding: 20px 20px 20px 20px;
|
||||
background-color: #F5F6FA;
|
||||
background-color: #f5f6fa;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
@ -198,7 +198,7 @@ export default class MonthlyBillingSummary extends Vue {
|
||||
&__referral-credits {
|
||||
margin: 18px 0 12px 0;
|
||||
padding: 20px 20px 20px 20px;
|
||||
background-color: #F5F6FA;
|
||||
background-color: #f5f6fa;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
@ -35,22 +35,22 @@ export default class PaginationArea extends Vue {}
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 39px;
|
||||
|
||||
|
||||
&__pages {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
&__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: 1px solid #AFB7C1;
|
||||
border: 1px solid #afb7c1;
|
||||
border-radius: 6px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
|
||||
&:hover {
|
||||
|
||||
.pagination-svg-path {
|
||||
@ -58,15 +58,15 @@ export default class PaginationArea extends Vue {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__items {
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
|
||||
|
||||
.selected {
|
||||
color: #2379EC;
|
||||
font-family: 'font_bold';
|
||||
|
||||
color: #2379ec;
|
||||
font-family: 'font_bold', sans-serif;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
@ -75,22 +75,22 @@ export default class PaginationArea extends Vue {}
|
||||
left: 0;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background-color: #2379EC;
|
||||
background-color: #2379ec;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__page-number {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: all .2s ease;
|
||||
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: #2379EC;
|
||||
|
||||
color: #2379ec;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
@ -99,10 +99,10 @@ export default class PaginationArea extends Vue {}
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #2379EC;
|
||||
background-color: #2379ec;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@ -178,7 +178,7 @@ export default class PaymentMethods extends Vue {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #0059D0;
|
||||
background-color: #0059d0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@ -186,19 +186,18 @@ export default class PaymentMethods extends Vue {
|
||||
.payment-methods-area {
|
||||
padding: 40px;
|
||||
margin-bottom: 47px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__top-container {
|
||||
display: flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
@ -215,7 +214,7 @@ export default class PaymentMethods extends Vue {
|
||||
&__cancel {
|
||||
|
||||
&__text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
text-decoration: underline;
|
||||
color: #354049;
|
||||
@ -233,7 +232,7 @@ export default class PaymentMethods extends Vue {
|
||||
align-items: center;
|
||||
|
||||
&__label {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
|
||||
@ -32,17 +32,17 @@ export default class SortingHeader extends Vue {}
|
||||
background-color: rgba(245, 246, 250, 0.5);
|
||||
width: calc(100% - 60px);
|
||||
padding: 0 30px;
|
||||
|
||||
|
||||
&__item {
|
||||
text-align: left;
|
||||
width: 35%;
|
||||
margin-right: 10px;
|
||||
|
||||
|
||||
&__name {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 10px;
|
||||
color: #AFB7C1;
|
||||
color: #afb7c1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,7 +87,7 @@ export default class StorjInput extends Vue {
|
||||
border-radius: 8px;
|
||||
background-color: transparent;
|
||||
padding: 0 36px 0 20px;
|
||||
font-family: font_medium;
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
color: #354049;
|
||||
@ -130,7 +130,7 @@ export default class StorjInput extends Vue {
|
||||
height: 100%;
|
||||
|
||||
&__label {
|
||||
font-family: font_medium;
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 28px;
|
||||
color: #354049;
|
||||
@ -147,7 +147,7 @@ export default class StorjInput extends Vue {
|
||||
width: 256px;
|
||||
position: absolute;
|
||||
height: auto;
|
||||
font-family: font_medium;
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
color: #354049;
|
||||
@ -165,7 +165,7 @@ export default class StorjInput extends Vue {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #F2F2F6;
|
||||
background-color: #f2f2f6;
|
||||
}
|
||||
}
|
||||
|
||||
@ -190,7 +190,7 @@ export default class StorjInput extends Vue {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #F2F2F6;
|
||||
background-color: #f2f2f6;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
||||
@ -346,10 +346,10 @@ export default class ApiKeysArea extends Vue {
|
||||
position: relative;
|
||||
padding: 40px 65px 55px 64px;
|
||||
height: 85vh;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
margin: 0;
|
||||
@ -363,7 +363,7 @@ export default class ApiKeysArea extends Vue {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: #F5F6FA;
|
||||
background-color: #f5f6fa;
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
z-index: 100;
|
||||
@ -378,7 +378,7 @@ export default class ApiKeysArea extends Vue {
|
||||
height: 56px;
|
||||
z-index: 100;
|
||||
opacity: 0.3;
|
||||
background-color: #F5F6FA;
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
}
|
||||
|
||||
@ -397,7 +397,7 @@ export default class ApiKeysArea extends Vue {
|
||||
|
||||
&__additional-info {
|
||||
font-size: 16px;
|
||||
color: #AFB7C1;
|
||||
color: #afb7c1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -409,7 +409,7 @@ export default class ApiKeysArea extends Vue {
|
||||
flex-direction: column;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
margin-top: 104px;
|
||||
@ -448,7 +448,7 @@ export default class ApiKeysArea extends Vue {
|
||||
margin-top: 2px;
|
||||
|
||||
&__confirmation-label {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
}
|
||||
@ -468,14 +468,14 @@ export default class ApiKeysArea extends Vue {
|
||||
}
|
||||
|
||||
.container.deletion {
|
||||
background-color: #FF4F4D;
|
||||
background-color: #ff4f4d;
|
||||
|
||||
&.label {
|
||||
color: #FFFFFF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #DE3E3D;
|
||||
background-color: #de3e3d;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@ -487,12 +487,14 @@ export default class ApiKeysArea extends Vue {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.api-keys-area {
|
||||
padding: 40px 40px 55px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 800px) {
|
||||
|
||||
.api-keys-items {
|
||||
|
||||
&__content {
|
||||
|
||||
@ -64,16 +64,16 @@ export default class ApiKeysCopyPopup extends Vue {
|
||||
<style scoped lang="scss">
|
||||
.save-api-popup {
|
||||
padding: 32px 40px 60px 40px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
border-radius: 24px;
|
||||
margin-top: 29px;
|
||||
max-width: 94.8%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
margin-bottom: 26px;
|
||||
@ -83,7 +83,7 @@ export default class ApiKeysCopyPopup extends Vue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #F5F6FA;
|
||||
background-color: #f5f6fa;
|
||||
padding: 29px 32px 29px 24px;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
@ -97,37 +97,6 @@ export default class ApiKeysCopyPopup extends Vue {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-button,
|
||||
.copied-button {
|
||||
display: flex;
|
||||
background-color: #2683FF;
|
||||
padding: 13px 36px;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #2683FF;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-family: 'font_bold';
|
||||
margin-left: 10px;
|
||||
|
||||
&__label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #196CDA;
|
||||
}
|
||||
}
|
||||
|
||||
.copied-button {
|
||||
padding: 13px 28.5px;
|
||||
background-color: #196CDA;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&__close-cross-container {
|
||||
@ -142,7 +111,7 @@ export default class ApiKeysCopyPopup extends Vue {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .close-cross-svg-path {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -150,11 +119,42 @@ export default class ApiKeysCopyPopup extends Vue {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: #F5F6FA;
|
||||
background-color: #f5f6fa;
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
z-index: 100;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.copied-button {
|
||||
padding: 13px 28.5px;
|
||||
background-color: #196cda;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.copy-button,
|
||||
.copied-button {
|
||||
display: flex;
|
||||
background-color: #2683ff;
|
||||
padding: 13px 36px;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
border: 1px solid #2683ff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-family: 'font_bold', sans-serif;
|
||||
margin-left: 10px;
|
||||
|
||||
&__label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #196cda;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -110,7 +110,7 @@ export default class ApiKeysCreationPopup extends Vue {
|
||||
<style scoped lang="scss">
|
||||
.new-api-key {
|
||||
padding: 32px 58px 41px 40px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
border-radius: 24px;
|
||||
margin-top: 29px;
|
||||
max-width: 93.5%;
|
||||
@ -118,7 +118,7 @@ export default class ApiKeysCreationPopup extends Vue {
|
||||
position: relative;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
margin-bottom: 26px;
|
||||
@ -140,7 +140,7 @@ export default class ApiKeysCreationPopup extends Vue {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .close-cross-svg-path {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -148,7 +148,7 @@ export default class ApiKeysCreationPopup extends Vue {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: #F5F6FA;
|
||||
background-color: #f5f6fa;
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
z-index: 100;
|
||||
|
||||
@ -52,7 +52,7 @@ export default class ApiKeysItem extends Vue {
|
||||
height: 83px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
@ -81,30 +81,30 @@ export default class ApiKeysItem extends Vue {
|
||||
}
|
||||
|
||||
.name {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #354049;
|
||||
margin-left: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.date {
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #354049;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.apikey-item-container.selected {
|
||||
background-color: #2683FF;
|
||||
background-color: #2683ff;
|
||||
|
||||
.apikey-item-container__common-info {
|
||||
|
||||
.checkbox-container {
|
||||
background-image: url(../../../static/images/apiKeys/Vector.png);
|
||||
background-image: url('../../../static/images/apiKeys/Vector.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 18px 12px;
|
||||
background-position: center;
|
||||
@ -121,7 +121,7 @@ export default class ApiKeysItem extends Vue {
|
||||
.avatar {
|
||||
|
||||
&__image {
|
||||
border: 1px solid #FFFFFF;
|
||||
border: 1px solid #fff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
}
|
||||
@ -130,7 +130,7 @@ export default class ApiKeysItem extends Vue {
|
||||
|
||||
.name,
|
||||
.date {
|
||||
color: #FFFFFF;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -87,6 +87,14 @@ export default class SortApiKeysHeader extends Vue {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
margin-top: 31px;
|
||||
|
||||
&__date-item {
|
||||
width: 60%;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__name-item,
|
||||
&__date-item {
|
||||
width: 40%;
|
||||
@ -96,23 +104,15 @@ export default class SortApiKeysHeader extends Vue {
|
||||
cursor: pointer;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
margin: 0 0 0 26px;
|
||||
color: #2A2A32;
|
||||
color: #2a2a32;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__date-item {
|
||||
width: 60%;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -176,12 +176,12 @@ export default class BucketArea extends Vue {
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 40px 60px 20px 60px;
|
||||
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
margin-right: 50px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
@ -191,7 +191,7 @@ export default class BucketArea extends Vue {
|
||||
.header-container.buckets-header-component {
|
||||
height: 55px !important;
|
||||
}
|
||||
|
||||
|
||||
.buckets-container,
|
||||
.buckets-notification-container {
|
||||
padding: 0 60px 0 60px;
|
||||
@ -204,11 +204,11 @@ export default class BucketArea extends Vue {
|
||||
padding: 16px 32px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #D0E3FE;
|
||||
background-color: #d0e3fe;
|
||||
margin-bottom: 25px;
|
||||
|
||||
&__text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 14px;
|
||||
margin-left: 26px;
|
||||
}
|
||||
@ -221,7 +221,7 @@ export default class BucketArea extends Vue {
|
||||
flex-direction: column;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
margin-top: 104px;
|
||||
@ -233,6 +233,7 @@ export default class BucketArea extends Vue {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.buckets-header {
|
||||
padding: 40px 40px 20px 40px;
|
||||
}
|
||||
@ -244,6 +245,7 @@ export default class BucketArea extends Vue {
|
||||
}
|
||||
|
||||
@media screen and (max-height: 880px) {
|
||||
|
||||
.buckets-overflow {
|
||||
overflow-y: scroll;
|
||||
height: 750px;
|
||||
@ -251,24 +253,28 @@ export default class BucketArea extends Vue {
|
||||
}
|
||||
|
||||
@media screen and (max-height: 853px) {
|
||||
|
||||
.buckets-overflow {
|
||||
height: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 805px) {
|
||||
|
||||
.buckets-overflow {
|
||||
height: 630px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 740px) {
|
||||
|
||||
.buckets-overflow {
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-height: 700px) {
|
||||
|
||||
.buckets-overflow {
|
||||
height: 570px;
|
||||
}
|
||||
|
||||
@ -50,11 +50,11 @@ export default class BucketItem extends Vue {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
margin-bottom: 1px;
|
||||
|
||||
|
||||
&__item {
|
||||
width: 25%;
|
||||
padding-left: 26px;
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -65,7 +65,7 @@ export default class NoBucketArea extends Vue {}
|
||||
|
||||
.no-buckets-area {
|
||||
padding: 50px 60px 50px 70px;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__header {
|
||||
width: 100%;
|
||||
@ -74,10 +74,10 @@ export default class NoBucketArea extends Vue {}
|
||||
align-items: center;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
}
|
||||
|
||||
&__image {
|
||||
@ -86,7 +86,7 @@ export default class NoBucketArea extends Vue {}
|
||||
}
|
||||
|
||||
&__info {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
height: 81px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -97,7 +97,7 @@ export default class NoBucketArea extends Vue {}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
color: #354049;
|
||||
@ -124,14 +124,14 @@ export default class NoBucketArea extends Vue {}
|
||||
align-items: flex-start;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: rgba(56, 75, 101, 0.7);
|
||||
@ -140,7 +140,7 @@ export default class NoBucketArea extends Vue {}
|
||||
}
|
||||
|
||||
&__s3-link {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
margin-top: 18px;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
@ -162,7 +162,7 @@ export default class NoBucketArea extends Vue {}
|
||||
height: 40px;
|
||||
min-width: 40px;
|
||||
margin-right: 42px;
|
||||
background-color: #2683FF;
|
||||
background-color: #2683ff;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -172,7 +172,7 @@ export default class NoBucketArea extends Vue {}
|
||||
&__text-area {
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
color: #354049;
|
||||
@ -180,7 +180,7 @@ export default class NoBucketArea extends Vue {}
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: rgba(56, 75, 101, 0.7);
|
||||
@ -190,8 +190,8 @@ export default class NoBucketArea extends Vue {}
|
||||
}
|
||||
|
||||
.s3-gateway-link {
|
||||
font-family: 'font_medium';
|
||||
color: #2683FF;
|
||||
font-family: 'font_medium', sans-serif;
|
||||
color: #2683ff;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
@ -200,25 +200,24 @@ export default class NoBucketArea extends Vue {}
|
||||
|
||||
.buckets-divider {
|
||||
height: 1px;
|
||||
background-color: #AFB7C1;
|
||||
background-color: #afb7c1;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.documentation-link__button {
|
||||
width: 205px;
|
||||
height: 48px;
|
||||
background-color: #2683FF;
|
||||
background-color: #2683ff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
|
||||
.documentation-link__button__label {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -227,26 +226,30 @@ export default class NoBucketArea extends Vue {}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.no-buckets-area {
|
||||
padding: 52px 40px 52px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height:790px) and (max-height: 818px) {
|
||||
@media screen and (min-height: 790px) and (max-height: 818px) {
|
||||
|
||||
.no-buckets-area {
|
||||
overflow-y: scroll;
|
||||
height: 628px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height:760px) and (max-height: 789px) {
|
||||
@media screen and (min-height: 760px) and (max-height: 789px) {
|
||||
|
||||
.no-buckets-area {
|
||||
overflow-y: scroll;
|
||||
height: 595px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height:730px) and (max-height: 759px) {
|
||||
@media screen and (min-height: 730px) and (max-height: 759px) {
|
||||
|
||||
.no-buckets-area {
|
||||
overflow-y: scroll;
|
||||
height: 550px;
|
||||
|
||||
@ -28,11 +28,11 @@ export default class SortBucketsHeader extends Vue {}
|
||||
<style scoped lang="scss">
|
||||
.sort-header-container {
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
background: #fff;
|
||||
opacity: 0.5;
|
||||
max-height: 40px;
|
||||
align-items: center;
|
||||
|
||||
|
||||
&__item {
|
||||
width: 25%;
|
||||
margin: 0;
|
||||
@ -40,10 +40,10 @@ export default class SortBucketsHeader extends Vue {}
|
||||
padding-left: 26px;
|
||||
|
||||
&__name {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #2A2A32;
|
||||
color: #2a2a32;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -57,7 +57,7 @@ export default class EmptyStateProjectArea extends Vue {
|
||||
justify-content: center;
|
||||
margin-top: 100px;
|
||||
color: rgba(56, 75, 101, 0.7);
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__wrap {
|
||||
text-align: center;
|
||||
@ -67,7 +67,7 @@ export default class EmptyStateProjectArea extends Vue {
|
||||
align-items: center;
|
||||
|
||||
&__additional-text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
width: 60%;
|
||||
margin-bottom: 10px;
|
||||
@ -78,7 +78,7 @@ export default class EmptyStateProjectArea extends Vue {
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 35px;
|
||||
margin-bottom: 15px;
|
||||
@ -89,12 +89,14 @@ export default class EmptyStateProjectArea extends Vue {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
|
||||
.empty-state {
|
||||
margin-top: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
|
||||
.empty-state {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@ -73,63 +73,63 @@ export default class HeaderedInput extends HeaderlessInput {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-top: 10px;
|
||||
width: 48%;
|
||||
font-family: 'font_regular';
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-top: 10px;
|
||||
width: 48%;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.label-container {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
&__label {
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
&__error {
|
||||
}
|
||||
|
||||
&__error {
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #FF5560;
|
||||
color: #ff5560;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.optional-label-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
&__optional {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
&__optional {
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #AFB7C1;
|
||||
}
|
||||
color: #afb7c1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.headered-input,
|
||||
.headered-textarea {
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
resize: none;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
text-indent: 20px;
|
||||
border-color: rgba(56, 75, 101, 0.4);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
resize: none;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
text-indent: 20px;
|
||||
border-color: rgba(56, 75, 101, 0.4);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.headered-textarea {
|
||||
padding-top: 20px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.add-label {
|
||||
|
||||
@ -141,7 +141,7 @@ export default class HeaderlessInput extends Vue {
|
||||
.input-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__image {
|
||||
position: absolute;
|
||||
@ -152,7 +152,7 @@ export default class HeaderlessInput extends Vue {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .input-wrap__image__path {
|
||||
fill: #2683FF !important;
|
||||
fill: #2683ff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -197,17 +197,17 @@ export default class HeaderlessInput extends Vue {
|
||||
}
|
||||
|
||||
.headerless-input::placeholder {
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.inputError::placeholder {
|
||||
color: #EB5757;
|
||||
color: #eb5757;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #FF5560;
|
||||
color: #ff5560;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ export default class PagesBlock extends Vue {
|
||||
display: flex;
|
||||
|
||||
&__pages {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
margin-right: 15px;
|
||||
width: 10px;
|
||||
@ -39,10 +39,10 @@ export default class PagesBlock extends Vue {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: all .2s ease;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: #2379EC;
|
||||
color: #2379ec;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
@ -52,7 +52,7 @@ export default class PagesBlock extends Vue {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #2379EC;
|
||||
background-color: #2379ec;
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,8 +63,8 @@ export default class PagesBlock extends Vue {
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: #2379EC;
|
||||
font-family: 'font_bold';
|
||||
color: #2379ec;
|
||||
font-family: 'font_bold', sans-serif;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
@ -74,7 +74,7 @@ export default class PagesBlock extends Vue {
|
||||
left: 0;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background-color: #2379EC;
|
||||
background-color: #2379ec;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -97,7 +97,7 @@ export default class RegistrationSuccessPopup extends Vue {
|
||||
.register-success-popup {
|
||||
width: 100%;
|
||||
max-width: 845px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -121,15 +121,15 @@ export default class RegistrationSuccessPopup extends Vue {
|
||||
margin-top: 10px;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #354049;
|
||||
@ -138,7 +138,7 @@ export default class RegistrationSuccessPopup extends Vue {
|
||||
}
|
||||
|
||||
&__verification-cooldown {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #354049;
|
||||
@ -146,7 +146,7 @@ export default class RegistrationSuccessPopup extends Vue {
|
||||
margin: 0;
|
||||
|
||||
&__bold-text {
|
||||
color: #2683FF;
|
||||
color: #2683ff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -172,12 +172,13 @@ export default class RegistrationSuccessPopup extends Vue {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .close-cross-svg-path {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
|
||||
.register-success-popup {
|
||||
|
||||
&__info-panel-container {
|
||||
|
||||
@ -53,17 +53,43 @@ export default class VButton extends Vue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683FF;
|
||||
background-color: #2683ff;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
|
||||
.label {
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.white,
|
||||
.red {
|
||||
background-color: transparent;
|
||||
border: 1px solid #afb7c1;
|
||||
|
||||
.label {
|
||||
color: #354049;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
background-color: #dadde5;
|
||||
border-color: #dadde5;
|
||||
|
||||
.label {
|
||||
color: #acb0bc;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
|
||||
box-shadow: 0 4px 20px rgba(35, 121, 236, 0.4);
|
||||
|
||||
&.white {
|
||||
box-shadow: none;
|
||||
background-color: #2683FF;
|
||||
border: 1px solid #2683FF;
|
||||
background-color: #2683ff;
|
||||
border: 1px solid #2683ff;
|
||||
|
||||
.label {
|
||||
color: white;
|
||||
@ -75,44 +101,18 @@ export default class VButton extends Vue {
|
||||
background-color: transparent;
|
||||
|
||||
.label {
|
||||
color: #EB5757;
|
||||
color: #eb5757;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
box-shadow: none;
|
||||
background-color: #DADDE5 !important;
|
||||
background-color: #dadde5 !important;
|
||||
|
||||
.label {
|
||||
color: #ACB0BC !important;
|
||||
color: #acb0bc !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: 'font_medium';
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.container.white,
|
||||
.container.red {
|
||||
background-color: transparent;
|
||||
border: 1px solid #AFB7C1;
|
||||
|
||||
.label {
|
||||
color: #354049;
|
||||
}
|
||||
}
|
||||
|
||||
.container.disabled {
|
||||
background-color: #DADDE5;
|
||||
border-color: #DADDE5;
|
||||
|
||||
.label {
|
||||
color: #ACB0BC;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -59,29 +59,12 @@ export default class VCheckbox extends Vue {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.container:hover .checkmark-input ~ .checkmark {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.container .checkmark-input:checked ~ .checkmark {
|
||||
border: 2px solid #2196F3;
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkmark.error {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.container .checkmark-input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container .checkmark:after {
|
||||
left: 9px;
|
||||
top: 5px;
|
||||
@ -93,4 +76,21 @@ export default class VCheckbox extends Vue {
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.container:hover .checkmark-input ~ .checkmark {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.container .checkmark-input:checked ~ .checkmark {
|
||||
border: 2px solid #2196f3;
|
||||
background-color: #2196f3;
|
||||
}
|
||||
|
||||
.checkmark.error {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.container .checkmark-input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,8 +19,8 @@
|
||||
<div class="cov-date-box" v-if="isDaysChoiceShown">
|
||||
<div class="cov-picker-box">
|
||||
<div class="week">
|
||||
<ul>
|
||||
<li v-for="week in daysInWeek" :key="week">{{week}}</li>
|
||||
<ul class="week-ul">
|
||||
<li class="week-li" v-for="week in daysInWeek" :key="week">{{week}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="day" v-for="(day, index) in daysToShow" :key="index" @click="checkDay(day)" :class="{'checked':day.checked,'unavailable':day.unavailable,'passive-day': !(day.inMonth), 'today': day.today}" :style="day.checked ? (option.color && option.color.checkedDay ? { background: option.color.checkedDay } : { background: '#2683FF' }) : {}">{{day.value}}</div>
|
||||
@ -269,20 +269,23 @@ export default class VDatePicker extends Vue {
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
-webkit-animation: fadein 0.5s;
|
||||
|
||||
/* Safari, Chrome and Opera > 12.1 */
|
||||
-moz-animation: fadein 0.5s;
|
||||
/* Firefox < 16 */
|
||||
-ms-animation: fadein 0.5s;
|
||||
|
||||
/* Internet Explorer */
|
||||
-o-animation: fadein 0.5s;
|
||||
|
||||
/* Opera < 12.1 */
|
||||
animation: fadein 0.5s;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -290,9 +293,11 @@ export default class VDatePicker extends Vue {
|
||||
|
||||
/* Firefox < 16 */
|
||||
@-moz-keyframes fadein {
|
||||
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -300,9 +305,11 @@ export default class VDatePicker extends Vue {
|
||||
|
||||
/* Safari, Chrome and Opera > 12.1 */
|
||||
@-webkit-keyframes fadein {
|
||||
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -310,9 +317,11 @@ export default class VDatePicker extends Vue {
|
||||
|
||||
/* Internet Explorer */
|
||||
@-ms-keyframes fadein {
|
||||
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -320,16 +329,18 @@ export default class VDatePicker extends Vue {
|
||||
|
||||
/* Opera < 12.1 */
|
||||
@-o-keyframes fadein {
|
||||
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.cov-date-body {
|
||||
background: #3F51B5;
|
||||
background: #3f51b5;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
@ -344,7 +355,7 @@ export default class VDatePicker extends Vue {
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
}
|
||||
|
||||
.cov-picker-box {
|
||||
@ -354,7 +365,6 @@ export default class VDatePicker extends Vue {
|
||||
box-sizing: border-box !important;
|
||||
-moz-box-sizing: border-box !important;
|
||||
-webkit-box-sizing: border-box !important;
|
||||
-ms-box-sizing: border-box !important;
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
height: 280px;
|
||||
@ -374,13 +384,13 @@ export default class VDatePicker extends Vue {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.week ul {
|
||||
.week-ul {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.week ul li {
|
||||
.week-li {
|
||||
width: 14.2%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
@ -394,8 +404,8 @@ export default class VDatePicker extends Vue {
|
||||
}
|
||||
|
||||
.checked {
|
||||
background: #2683FF;
|
||||
color: #FFF !important;
|
||||
background: #2683ff;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.unavailable {
|
||||
@ -432,7 +442,7 @@ export default class VDatePicker extends Vue {
|
||||
padding: 10px 0 !important;
|
||||
box-sizing: border-box;
|
||||
font-size: 18px;
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -451,15 +461,15 @@ export default class VDatePicker extends Vue {
|
||||
}
|
||||
|
||||
.day:hover {
|
||||
background: #EAEAEA;
|
||||
background: #eaeaea;
|
||||
}
|
||||
|
||||
.unavailable:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.cov-date-next::before,
|
||||
.cov-date-previous::before {
|
||||
.cov-date-next:before,
|
||||
.cov-date-previous:before {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
text-align: center;
|
||||
@ -476,8 +486,8 @@ export default class VDatePicker extends Vue {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.cov-date-next::after,
|
||||
.cov-date-previous::after {
|
||||
.cov-date-next:after,
|
||||
.cov-date-previous:after {
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
text-align: center;
|
||||
@ -494,13 +504,13 @@ export default class VDatePicker extends Vue {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.cov-date-previous::after {
|
||||
.cov-date-previous:after {
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.cov-date-previous::before {
|
||||
.cov-date-previous:before {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
@ -525,7 +535,7 @@ export default class VDatePicker extends Vue {
|
||||
|
||||
.cov-vue-date {
|
||||
display: inline-block;
|
||||
color: #5D5D5D;
|
||||
color: #5d5d5d;
|
||||
}
|
||||
|
||||
.watch-box {
|
||||
@ -538,16 +548,16 @@ export default class VDatePicker extends Vue {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #E3E3E3;
|
||||
background: #e3e3e3;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #C1C1C1;
|
||||
background: #c1c1c1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.cov-date-box {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
}
|
||||
|
||||
.today {
|
||||
|
||||
@ -48,7 +48,7 @@ export default class VInfo extends Vue {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-image: url('../../../static/images/Message.png');
|
||||
background-size:100% 100%;
|
||||
background-size: 100% 100%;
|
||||
z-index: 101;
|
||||
padding: 11px 18px 20px 18px;
|
||||
|
||||
@ -59,15 +59,15 @@ export default class VInfo extends Vue {
|
||||
line-height: 16px;
|
||||
|
||||
&__bold-text {
|
||||
color: #586C86;
|
||||
font-family: 'font_bold';
|
||||
color: #586c86;
|
||||
font-family: 'font_bold', sans-serif;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
&__regular-text {
|
||||
color: #5A6E87;
|
||||
font-family: 'font_regular';
|
||||
color: #5a6e87;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@ export default class VList extends Vue {
|
||||
width: 100%;
|
||||
|
||||
&__item {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -254,7 +254,7 @@ export default class VPagination extends Vue {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: 1px solid #AFB7C1;
|
||||
border: 1px solid #afb7c1;
|
||||
border-radius: 6px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
@ -78,13 +78,13 @@ export default class VSearch extends Vue {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 0 38px 0 18px;
|
||||
border: 1px solid #F2F2F2;
|
||||
border: 1px solid #f2f2f2;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 4px 4px rgba(231, 232, 238, 0.6);
|
||||
outline: none;
|
||||
border-radius: 36px;
|
||||
height: 56px;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-size: 16px;
|
||||
transition: all 0.4s ease-in-out;
|
||||
background-image: url('../../../static/images/common/search.png');
|
||||
@ -94,6 +94,6 @@ export default class VSearch extends Vue {
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #AFB7C1;
|
||||
color: #afb7c1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -50,7 +50,7 @@ export default class VerticalArrows extends Vue {
|
||||
.active {
|
||||
|
||||
.arrow-svg-path {
|
||||
fill: #2683FF !important;
|
||||
fill: #2683ff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,28 +0,0 @@
|
||||
// Copyright (C) 2019 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<EmptyState
|
||||
main-title="Create your first new project"
|
||||
:image-source="emptyImage"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import EmptyState from '@/components/common/EmptyStateArea.vue';
|
||||
|
||||
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
EmptyState,
|
||||
},
|
||||
})
|
||||
export default class DashboardArea extends Vue {
|
||||
public emptyImage: string = EMPTY_STATE_IMAGES.PROJECT;
|
||||
}
|
||||
</script>
|
||||
@ -34,15 +34,14 @@ export default class Page404 extends Vue {}
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
margin-bottom: 60px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
@ -34,15 +34,15 @@ export default class Page50X extends Vue {}
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
margin-bottom: 60px;
|
||||
font-size: 32px;
|
||||
}
|
||||
@ -50,10 +50,6 @@ export default class Page50X extends Vue {}
|
||||
img,
|
||||
a {
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
user-drag: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -55,19 +55,6 @@ export default class AccountButton extends Vue {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.account-button-container {
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
.account-button-toggle-container__user-name {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-button-toggle-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -78,11 +65,11 @@ export default class AccountButton extends Vue {
|
||||
|
||||
&__user-name {
|
||||
margin-left: 12px;
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #354049;
|
||||
transition: opacity .2s ease-in-out;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
@ -92,10 +79,10 @@ export default class AccountButton extends Vue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #E8EAF2;
|
||||
background: #e8eaf2;
|
||||
|
||||
&__letter {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #354049;
|
||||
@ -110,7 +97,21 @@ export default class AccountButton extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
.account-button-container {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
.account-button-toggle-container__user-name {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.account-button-toggle-container {
|
||||
|
||||
&__user-name,
|
||||
@ -119,4 +120,4 @@ export default class AccountButton extends Vue {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -76,15 +76,17 @@ export default class AccountDropdown extends Vue {
|
||||
border-radius: 4px;
|
||||
padding: 10px 0 10px 0;
|
||||
box-shadow: 0 4px rgba(231, 232, 238, 0.6);
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
z-index: 1120;
|
||||
}
|
||||
|
||||
.account-dropdown-overflow-container {
|
||||
position: relative;
|
||||
width: 210px;
|
||||
height: auto;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.account-dropdown-item-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -94,7 +96,7 @@ export default class AccountDropdown extends Vue {
|
||||
padding-right: 20px;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
margin-left: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
@ -102,10 +104,10 @@ export default class AccountDropdown extends Vue {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #F2F2F6;
|
||||
background-color: #f2f2f6;
|
||||
|
||||
.account-dropdown-svg-path {
|
||||
fill: #2683FF !important;
|
||||
fill: #2683ff !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@ export default class NewProjectArea extends Vue {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.new-project-container {
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.new-project-button-container {
|
||||
@ -50,21 +50,20 @@ export default class NewProjectArea extends Vue {
|
||||
width: 170px;
|
||||
height: 50px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #AFB7C1;
|
||||
border: 1px solid #afb7c1;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&__label {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2683FF;
|
||||
border: 1px solid #2683FF;
|
||||
background-color: #2683ff;
|
||||
border: 1px solid #2683ff;
|
||||
box-shadow: 0 4px 20px rgba(35, 121, 236, 0.4);
|
||||
|
||||
.new-project-button-container__label {
|
||||
@ -72,10 +71,10 @@ export default class NewProjectArea extends Vue {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.new-project-button-container.active {
|
||||
background-color: #2683FF;
|
||||
border: 1px solid #2683FF;
|
||||
background-color: #2683ff;
|
||||
border: 1px solid #2683ff;
|
||||
box-shadow: 0 4px 20px rgba(35, 121, 236, 0.4);
|
||||
|
||||
.new-project-button-container__label {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
.dashboard-header-container {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
background-color: white;
|
||||
@ -30,7 +30,7 @@
|
||||
margin-left: 13px;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #A9B5C1;
|
||||
color: #a9b5c1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -61,6 +61,7 @@
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
|
||||
.adapted-navigation,
|
||||
.navigation-blur,
|
||||
.dashboard-header-container__left-area__close-button {
|
||||
@ -69,6 +70,7 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.dashboard-header-container {
|
||||
padding: 0 40px;
|
||||
|
||||
@ -91,4 +93,4 @@
|
||||
position: absolute;
|
||||
left: calc(50% - 41px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -70,11 +70,11 @@ export default class ProjectSelectionArea extends Vue {
|
||||
<style scoped lang="scss">
|
||||
.project-selection-container {
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
&__no-projects-text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #354049;
|
||||
@ -92,11 +92,11 @@ export default class ProjectSelectionArea extends Vue {
|
||||
height: 50px;
|
||||
|
||||
&__name {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #354049;
|
||||
transition: opacity .2s ease-in-out;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&__expander-area {
|
||||
@ -110,6 +110,7 @@ export default class ProjectSelectionArea extends Vue {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.project-selection-container {
|
||||
margin-right: 30px;
|
||||
padding-right: 10px;
|
||||
|
||||
@ -85,7 +85,7 @@ export default class ProjectSelectionDropdown extends Vue {
|
||||
border-radius: 4px;
|
||||
padding: 10px 0 10px 0;
|
||||
box-shadow: 0 4px rgba(231, 232, 238, 0.6);
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
z-index: 1120;
|
||||
}
|
||||
|
||||
@ -96,8 +96,8 @@ export default class ProjectSelectionDropdown extends Vue {
|
||||
overflow-x: hidden;
|
||||
height: auto;
|
||||
max-height: 240px;
|
||||
background-color: #FFFFFF;
|
||||
font-family: 'font_regular';
|
||||
background-color: #fff;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__project-choice {
|
||||
display: flex;
|
||||
@ -115,7 +115,7 @@ export default class ProjectSelectionDropdown extends Vue {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #F2F2F6;
|
||||
background-color: #f2f2f6;
|
||||
}
|
||||
|
||||
&__mark-container {
|
||||
@ -129,27 +129,31 @@ export default class ProjectSelectionDropdown extends Vue {
|
||||
}
|
||||
|
||||
.selected {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
}
|
||||
|
||||
/* width */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 5px #fff;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #AFB7C1;
|
||||
background: #afb7c1;
|
||||
border-radius: 6px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.project-selection-choice-container {
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
@ -29,25 +29,25 @@ export default class TabNavigation extends Vue {
|
||||
.tab-navigation-container {
|
||||
width: auto;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #AFB7C1;
|
||||
|
||||
border-bottom: 1px solid #afb7c1;
|
||||
|
||||
&__item {
|
||||
width: 150px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
&__name {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #AFB7C1;
|
||||
color: #afb7c1;
|
||||
}
|
||||
|
||||
|
||||
&.router-link-exact-active,
|
||||
&:hover {
|
||||
border-bottom: 3px solid #2683FF;
|
||||
border-bottom: 3px solid #2683ff;
|
||||
|
||||
.tab-navigation-container__item__name {
|
||||
color: #354049;
|
||||
|
||||
@ -17,7 +17,7 @@ a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
@ -69,7 +69,7 @@ a {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #5E6978;
|
||||
color: #5e6978;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -92,10 +92,10 @@ a {
|
||||
|
||||
&.router-link-active,
|
||||
&:hover {
|
||||
border-left: 3px solid #2683FF;
|
||||
border-left: 3px solid #2683ff;
|
||||
|
||||
.svg .navigation-svg-path:not(.white) {
|
||||
fill: #2683FF !important;
|
||||
fill: #2683ff !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -106,7 +106,7 @@ a {
|
||||
align-items: center;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #354049;
|
||||
@ -129,15 +129,15 @@ a {
|
||||
&.router-link-active {
|
||||
|
||||
.account-item {
|
||||
color: #2683FF;
|
||||
color: #2683ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events:none;
|
||||
opacity:0.6;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.divider {
|
||||
@ -154,6 +154,7 @@ a {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.divider {
|
||||
margin-left: 42px;
|
||||
}
|
||||
|
||||
@ -80,7 +80,7 @@ export default class NotificationItem extends Vue {
|
||||
}
|
||||
|
||||
&__message {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 14px;
|
||||
height: auto;
|
||||
width: 270px;
|
||||
@ -91,7 +91,7 @@ export default class NotificationItem extends Vue {
|
||||
|
||||
&__buttons-group {
|
||||
display: flex;
|
||||
|
||||
|
||||
&__close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
@ -162,7 +162,7 @@ export default class DeleteProjectPopup extends Vue {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
}
|
||||
|
||||
.input-container.full-input {
|
||||
@ -170,14 +170,14 @@ export default class DeleteProjectPopup extends Vue {
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #EB5757;
|
||||
background-color: #eb5757;
|
||||
}
|
||||
|
||||
.delete-project-popup {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
height: 460px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -194,10 +194,10 @@ export default class DeleteProjectPopup extends Vue {
|
||||
margin-right: 55px;
|
||||
|
||||
&__main-label-text {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -209,7 +209,7 @@ export default class DeleteProjectPopup extends Vue {
|
||||
height: 335px;
|
||||
|
||||
&__confirmation-text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
margin-bottom: 30px;
|
||||
@ -221,9 +221,9 @@ export default class DeleteProjectPopup extends Vue {
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
padding-left: 10px;
|
||||
color: #EB5757;
|
||||
color: #eb5757;
|
||||
}
|
||||
}
|
||||
|
||||
@ -232,7 +232,7 @@ export default class DeleteProjectPopup extends Vue {
|
||||
}
|
||||
|
||||
.delete-project-input {
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
margin-top: 10px;
|
||||
@ -269,12 +269,13 @@ export default class DeleteProjectPopup extends Vue {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .close-cross-svg-path {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
|
||||
.delete-project-popup {
|
||||
|
||||
&__info-panel-container {
|
||||
|
||||
@ -232,7 +232,7 @@ export default class NewProjectPopup extends Vue {
|
||||
width: 100%;
|
||||
max-width: 845px;
|
||||
height: 400px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -242,66 +242,66 @@ export default class NewProjectPopup extends Vue {
|
||||
padding: 100px 100px 100px 80px;
|
||||
|
||||
&__info-panel-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-right: 55px;
|
||||
height: 535px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-right: 55px;
|
||||
height: 535px;
|
||||
|
||||
&__main-label-text {
|
||||
font-family: 'font_bold';
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
color: #384B65;
|
||||
margin-bottom: 60px;
|
||||
margin-top: 50px;
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
color: #384b65;
|
||||
margin-bottom: 60px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&__form-container {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
|
||||
&__button-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&__close-cross-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 40px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 40px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .close-cross-svg-path {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
|
||||
.new-project-popup {
|
||||
|
||||
&__info-panel-container {
|
||||
display: none;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__form-container {
|
||||
|
||||
&__button-container {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,11 +82,11 @@ export default class ProjectCreationSuccessPopup extends Vue {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.project-creation-success-popup {
|
||||
width: 100%;
|
||||
max-width: 845px;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -94,7 +94,7 @@ export default class ProjectCreationSuccessPopup extends Vue {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
padding: 80px 100px 80px 50px;
|
||||
|
||||
|
||||
&__info-panel-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -103,20 +103,20 @@ export default class ProjectCreationSuccessPopup extends Vue {
|
||||
margin-right: 100px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
&__form-container {
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
margin-top: 10px;
|
||||
|
||||
|
||||
&__main-label-text {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
&__button-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -127,7 +127,7 @@ export default class ProjectCreationSuccessPopup extends Vue {
|
||||
}
|
||||
|
||||
&__confirmation-text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #354049;
|
||||
@ -135,12 +135,12 @@ export default class ProjectCreationSuccessPopup extends Vue {
|
||||
margin: 0;
|
||||
|
||||
&__link {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
color: #2683ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__close-cross-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -151,22 +151,23 @@ export default class ProjectCreationSuccessPopup extends Vue {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover .close-cross-svg-path {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
|
||||
.project-creation-success-popup {
|
||||
|
||||
|
||||
&__info-panel-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
&__form-container {
|
||||
|
||||
|
||||
&__button-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -154,21 +154,21 @@ export default class ProjectDetailsArea extends Vue {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 85vh;
|
||||
font-family: 'font_regular';
|
||||
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
|
||||
&__button-area {
|
||||
margin-top: 3vh;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.project-details-info-container {
|
||||
height: auto;
|
||||
margin-top: 37px;
|
||||
@ -176,7 +176,7 @@ export default class ProjectDetailsArea extends Vue {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
|
||||
&__name-container {
|
||||
min-height: 67px;
|
||||
width: 100%;
|
||||
@ -200,15 +200,19 @@ export default class ProjectDetailsArea extends Vue {
|
||||
color: #354049;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__description-container {
|
||||
@extend .project-details-info-container__name-container;
|
||||
min-height: 67px;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
height: auto;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 28px;
|
||||
background-color: #fff;
|
||||
|
||||
&__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -221,7 +225,7 @@ export default class ProjectDetailsArea extends Vue {
|
||||
line-height: 21px;
|
||||
color: rgba(56, 75, 101, 0.4);
|
||||
}
|
||||
|
||||
|
||||
&__project-description {
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
@ -232,15 +236,20 @@ export default class ProjectDetailsArea extends Vue {
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&--editing {
|
||||
@extend .project-details-info-container__description-container;
|
||||
min-height: 67px;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
height: auto;
|
||||
padding: 28px;
|
||||
background-color: #fff;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
|
||||
&__buttons-area {
|
||||
margin-top: 2vh;
|
||||
display: flex;
|
||||
@ -249,14 +258,14 @@ export default class ProjectDetailsArea extends Vue {
|
||||
width: 380px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
.project-details-svg {
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover {
|
||||
|
||||
.project-details-svg__rect {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
|
||||
.project-details-svg__path {
|
||||
@ -265,22 +274,33 @@ export default class ProjectDetailsArea extends Vue {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__portability-container {
|
||||
@extend .project-details-info-container__description-container;
|
||||
|
||||
min-height: 67px;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
height: auto;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 28px;
|
||||
background-color: #fff;
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
|
||||
&__text {
|
||||
margin-left: 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__buttons-area {
|
||||
@extend .project-details-info-container__portability-container__info;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 380px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@ -65,6 +65,7 @@ export default class ProjectOverviewArea extends Vue {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.project-overview {
|
||||
padding: 44px 40px 55px 40px;
|
||||
|
||||
|
||||
@ -252,9 +252,9 @@ export default class UsageReport extends Vue {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: 56px;
|
||||
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
color: #354049;
|
||||
@ -262,7 +262,7 @@ export default class UsageReport extends Vue {
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__options-area {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -270,7 +270,7 @@ export default class UsageReport extends Vue {
|
||||
justify-content: flex-end;
|
||||
height: 100%;
|
||||
margin-top: 39px;
|
||||
|
||||
|
||||
&__option {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -278,81 +278,81 @@ export default class UsageReport extends Vue {
|
||||
justify-content: center;
|
||||
width: 271px;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border: solid 1px #F2F2F2;
|
||||
background-color: #fff;
|
||||
border: solid 1px #f2f2f2;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
|
||||
|
||||
&__label {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
|
||||
&__image {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
background-color: #2683FF;
|
||||
|
||||
background-color: #2683ff;
|
||||
|
||||
.usage-report-container__options-area__option__label {
|
||||
color: #FFFFFF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.usage-report-container__options-area__option__image {
|
||||
|
||||
|
||||
.usage-report-svg-path {
|
||||
fill: #ffffff !important;
|
||||
fill: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__main-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 33px;
|
||||
|
||||
|
||||
&__info-area {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40vh;
|
||||
|
||||
|
||||
&__item {
|
||||
max-width: 454px;
|
||||
max-height: 393px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
margin-right: 20px;
|
||||
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
&__title {
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
color: #354049;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
|
||||
&__amount {
|
||||
margin-top: 22px;
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 44px;
|
||||
line-height: 67px;
|
||||
color: #354049;
|
||||
@ -361,65 +361,65 @@ export default class UsageReport extends Vue {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__footer {
|
||||
padding: 0 32px;
|
||||
height: 86px;
|
||||
margin-top: 24px;
|
||||
background-color: #ffffff;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
&__rollup-info {
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #AFB7C1;
|
||||
|
||||
color: #afb7c1;
|
||||
|
||||
&__bold-text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
color: #354049;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__report-area {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
&__download-text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #354049;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
|
||||
&__image {
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
.background {
|
||||
fill: #E2ECF7;
|
||||
fill: #e2ecf7;
|
||||
}
|
||||
|
||||
|
||||
.blue {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__image:hover {
|
||||
|
||||
|
||||
.background {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
|
||||
|
||||
.blue {
|
||||
fill: #FFFFFF;
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -428,10 +428,11 @@ export default class UsageReport extends Vue {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
|
||||
.usage-report-container {
|
||||
|
||||
&__header {
|
||||
|
||||
|
||||
&__title {
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
@ -449,34 +450,34 @@ export default class UsageReport extends Vue {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__main-area {
|
||||
|
||||
|
||||
&__info-area {
|
||||
|
||||
|
||||
&__item {
|
||||
|
||||
|
||||
&__title {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
|
||||
&__amount {
|
||||
font-size: 36px;
|
||||
line-height: 54px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__footer {
|
||||
|
||||
|
||||
&__rollup-info {
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
|
||||
&__report-area {
|
||||
|
||||
|
||||
&__download-text {
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
@ -488,6 +489,7 @@ export default class UsageReport extends Vue {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1350px) {
|
||||
|
||||
.usage-report-container {
|
||||
|
||||
&__options-area {
|
||||
|
||||
@ -83,7 +83,7 @@ export default class ReferralStats extends Vue {
|
||||
|
||||
&__title {
|
||||
text-align: center;
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
@ -92,7 +92,7 @@ export default class ReferralStats extends Vue {
|
||||
justify-content: space-around;
|
||||
left: 15%;
|
||||
right: 15%;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
}
|
||||
|
||||
&__card {
|
||||
@ -115,7 +115,7 @@ export default class ReferralStats extends Vue {
|
||||
&-title {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
@ -129,7 +129,7 @@ export default class ReferralStats extends Vue {
|
||||
|
||||
&-number {
|
||||
display: block;
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 46px;
|
||||
line-height: 60px;
|
||||
margin-bottom: 27px;
|
||||
|
||||
@ -259,7 +259,7 @@ export default class AddUserPopup extends Vue {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
}
|
||||
|
||||
.add-user-row {
|
||||
@ -278,7 +278,7 @@ export default class AddUserPopup extends Vue {
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
@ -289,7 +289,6 @@ export default class AddUserPopup extends Vue {
|
||||
&:first-child {
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
@ -299,7 +298,7 @@ export default class AddUserPopup extends Vue {
|
||||
|
||||
.inactive-label {
|
||||
cursor: default;
|
||||
color: #DADDE5;
|
||||
color: #dadde5;
|
||||
}
|
||||
|
||||
.error-input {
|
||||
@ -312,11 +311,11 @@ export default class AddUserPopup extends Vue {
|
||||
.add-user-row__item__image {
|
||||
|
||||
&__rect {
|
||||
fill: #DADDE5;
|
||||
fill: #dadde5;
|
||||
}
|
||||
|
||||
&__path {
|
||||
fill: #ACB0BC;
|
||||
fill: #acb0bc;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -326,7 +325,7 @@ export default class AddUserPopup extends Vue {
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #EB5757;
|
||||
background-color: #eb5757;
|
||||
}
|
||||
|
||||
.add-user {
|
||||
@ -347,7 +346,7 @@ export default class AddUserPopup extends Vue {
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #fff;
|
||||
padding: 80px 20px 80px 60px;
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
@ -367,10 +366,10 @@ export default class AddUserPopup extends Vue {
|
||||
}
|
||||
|
||||
&__main-label-text {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 29px;
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
margin-top: 0;
|
||||
width: 107%;
|
||||
}
|
||||
@ -394,7 +393,7 @@ export default class AddUserPopup extends Vue {
|
||||
&__error {
|
||||
margin: 0;
|
||||
padding-left: 10px;
|
||||
color: #EB5757;
|
||||
color: #eb5757;
|
||||
}
|
||||
}
|
||||
|
||||
@ -430,7 +429,7 @@ export default class AddUserPopup extends Vue {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .delete-input-svg-path {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -446,7 +445,7 @@ export default class AddUserPopup extends Vue {
|
||||
|
||||
&__common-label {
|
||||
margin: 0 0 10px 0;
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
padding-left: 50px;
|
||||
@ -474,7 +473,7 @@ export default class AddUserPopup extends Vue {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .close-cross-svg-path {
|
||||
fill: #2683FF;
|
||||
fill: #2683ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -500,7 +499,7 @@ export default class AddUserPopup extends Vue {
|
||||
align-items: center;
|
||||
|
||||
&__text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@ -511,6 +510,7 @@ export default class AddUserPopup extends Vue {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1025px) {
|
||||
|
||||
.add-user {
|
||||
padding: 10px;
|
||||
max-width: 1000px;
|
||||
|
||||
@ -171,7 +171,7 @@ export default class HeaderArea extends Vue {
|
||||
.team-header-container {
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
margin: 0;
|
||||
@ -186,13 +186,13 @@ export default class HeaderArea extends Vue {
|
||||
height: 85px;
|
||||
|
||||
&__info-text {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
&__delete-confirmation {
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
}
|
||||
@ -233,7 +233,7 @@ export default class HeaderArea extends Vue {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: #F5F6FA;
|
||||
background-color: #f5f6fa;
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
z-index: 100;
|
||||
@ -248,19 +248,19 @@ export default class HeaderArea extends Vue {
|
||||
height: 56px;
|
||||
z-index: 100;
|
||||
opacity: 0.3;
|
||||
background-color: #F5F6FA;
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
}
|
||||
|
||||
.container.deletion {
|
||||
background-color: #FF4F4D;
|
||||
background-color: #ff4f4d;
|
||||
|
||||
&.label {
|
||||
color: #FFFFFF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #DE3E3D;
|
||||
background-color: #de3e3d;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,7 +72,7 @@ export default class ProjectMemberListItem extends Vue {
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
width: calc(100% - 28px);
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__base-info {
|
||||
width: 50%;
|
||||
@ -89,12 +89,12 @@ export default class ProjectMemberListItem extends Vue {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #FF8658;
|
||||
background-color: #ff8658;
|
||||
|
||||
&__letter {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #F5F6FA;
|
||||
color: #f5f6fa;
|
||||
}
|
||||
}
|
||||
|
||||
@ -103,15 +103,15 @@ export default class ProjectMemberListItem extends Vue {
|
||||
&__user-name {
|
||||
margin: 0 0 0 20px;
|
||||
font-size: 16px;
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
&__owner-status {
|
||||
margin: 0 0 0 20px;
|
||||
font-size: 13px;
|
||||
color: #AFB7C1;
|
||||
font-family: 'font_medium';
|
||||
color: #afb7c1;
|
||||
font-family: 'font_medium', sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -130,26 +130,26 @@ export default class ProjectMemberListItem extends Vue {
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
background-image: url("../../../static/images/team/checkboxEmpty.png");
|
||||
background-image: url('../../../static/images/team/checkboxEmpty.png');
|
||||
margin-right: 20px;
|
||||
min-width: 23px;
|
||||
height: 23px;
|
||||
}
|
||||
|
||||
.user-container.selected {
|
||||
background-color: #2683FF;
|
||||
background-color: #2683ff;
|
||||
|
||||
.checkbox {
|
||||
min-width: 23px;
|
||||
height: 23px;
|
||||
background-image: url("../../../static/images/team/checkboxChecked.png");
|
||||
background-image: url('../../../static/images/team/checkboxChecked.png');
|
||||
}
|
||||
|
||||
.user-container__base-info__name-area__user-name,
|
||||
.user-container__base-info__name-area__owner-status,
|
||||
.user-container__date,
|
||||
.user-container__user-email {
|
||||
color: #FFFFFF;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -165,11 +165,11 @@ export default class ProjectMembersArea extends Vue {
|
||||
<style scoped lang="scss">
|
||||
.team-area {
|
||||
padding: 40px 65px 55px 64px;
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__header {
|
||||
width: 100%;
|
||||
background-color: #F5F6FA;
|
||||
background-color: #f5f6fa;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
@ -193,7 +193,7 @@ export default class ProjectMembersArea extends Vue {
|
||||
flex-direction: column;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
margin-top: 100px;
|
||||
@ -210,12 +210,14 @@ export default class ProjectMembersArea extends Vue {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.team-area {
|
||||
padding: 40px 40px 55px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 800px) {
|
||||
|
||||
.team-area {
|
||||
|
||||
&__container {
|
||||
|
||||
@ -103,10 +103,10 @@ export default class SortingListHeader extends Vue {
|
||||
&__email-container {
|
||||
|
||||
&__title {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #2A2A32;
|
||||
color: #2a2a32;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -157,14 +157,14 @@ export default class DashboardArea extends Vue {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dashboard-container {
|
||||
.dashboard-container {
|
||||
position: fixed;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #F5F6FA;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #f5f6fa;
|
||||
z-index: 10;
|
||||
|
||||
&__wrap {
|
||||
@ -184,16 +184,18 @@ export default class DashboardArea extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.regular-navigation {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
|
||||
.dashboard-container {
|
||||
|
||||
&__main-area{
|
||||
&__main-area {
|
||||
left: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,8 +19,8 @@ body {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 60px 0 0 104px;
|
||||
background-color: #F5F6FA;
|
||||
font-family: 'font_regular';
|
||||
background-color: #f5f6fa;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__wrapper {
|
||||
min-width: 45%;
|
||||
@ -47,13 +47,13 @@ body {
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #AFB7C1;
|
||||
border: 1px solid #afb7c1;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
|
||||
&__label {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
@ -62,8 +62,8 @@ body {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2683FF;
|
||||
border: 1px solid #2683FF;
|
||||
background-color: #2683ff;
|
||||
border: 1px solid #2683ff;
|
||||
|
||||
.forgot-password-container__login-button__label {
|
||||
color: white;
|
||||
@ -101,9 +101,9 @@ body {
|
||||
width: 100%;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 22px;
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
line-height: 27px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
@ -112,7 +112,7 @@ body {
|
||||
|
||||
&__info-text {
|
||||
font-size: 14px;
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
line-height: 19px;
|
||||
opacity: 0.8;
|
||||
margin-block-start: 0;
|
||||
@ -132,7 +132,7 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683FF;
|
||||
background-color: #2683ff;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
@ -140,7 +140,7 @@ body {
|
||||
box-shadow: none;
|
||||
|
||||
&__label {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
@ -149,7 +149,7 @@ body {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
|
||||
box-shadow: 0 4px 20px rgba(35, 121, 236, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -166,15 +166,15 @@ body {
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
|
||||
.st1{fill:#2683FF;}
|
||||
.st2{fill:#007AFF;}
|
||||
.st3{fill:#0062FF;}
|
||||
.st4{fill:#FFFFFF;}
|
||||
.st5{fill:#6CB9FF;}
|
||||
.st6{fill:#499FFC;}
|
||||
.st7{fill:#F7F9F9;}
|
||||
.st8{fill:#0F002D;}
|
||||
.st9{fill:#DEDEFC;}
|
||||
.st1 { fill: #2683ff; }
|
||||
.st2 { fill: #007aff; }
|
||||
.st3 { fill: #0062ff; }
|
||||
.st4 { fill: #fff; }
|
||||
.st5 { fill: #6cb9ff; }
|
||||
.st6 { fill: #499ffc; }
|
||||
.st7 { fill: #f7f9f9; }
|
||||
.st8 { fill: #0f002d; }
|
||||
.st9 { fill: #dedefc; }
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
@ -204,7 +204,9 @@ body {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 840px) {
|
||||
|
||||
.forgot-password-container {
|
||||
overflow: hidden;
|
||||
|
||||
@ -222,7 +224,9 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 810px) {
|
||||
|
||||
.forgot-password-container {
|
||||
|
||||
&__wrapper {
|
||||
@ -234,14 +238,18 @@ body {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
|
||||
.forgot-password-container {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
|
||||
.forgot-password-container {
|
||||
|
||||
&__wrapper {
|
||||
@ -249,7 +257,9 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 520px) {
|
||||
|
||||
.forgot-password-container {
|
||||
|
||||
&__wrapper {
|
||||
@ -257,7 +267,9 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
|
||||
.forgot-password-container {
|
||||
|
||||
&__wrapper {
|
||||
@ -265,7 +277,9 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
|
||||
.forgot-password-container {
|
||||
|
||||
&__wrapper {
|
||||
|
||||
@ -14,8 +14,8 @@
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 60px 0 0 104px;
|
||||
background-color: #F5F6FA;
|
||||
font-family: 'font_regular';
|
||||
background-color: #f5f6fa;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
&__wrapper {
|
||||
min-width: 50%;
|
||||
@ -42,13 +42,13 @@
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #AFB7C1;
|
||||
border: 1px solid #afb7c1;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
|
||||
&__label {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
@ -57,8 +57,8 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2683FF;
|
||||
border: 1px solid #2683FF;
|
||||
background-color: #2683ff;
|
||||
border: 1px solid #2683ff;
|
||||
|
||||
.login-container__register-button__label {
|
||||
color: white;
|
||||
@ -95,9 +95,9 @@
|
||||
width: 100%;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 22px;
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
line-height: 27px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
@ -120,7 +120,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683FF;
|
||||
background-color: #2683ff;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
@ -129,7 +129,7 @@
|
||||
z-index: 1;
|
||||
|
||||
&__label {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
@ -138,7 +138,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #0059D0;
|
||||
background-color: #0059d0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -157,18 +157,23 @@
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #AFB7C1;
|
||||
color: #afb7c1;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
&__terms {
|
||||
margin-right: 35px;
|
||||
}
|
||||
|
||||
&__terms,
|
||||
&__help {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
color: #2683FF;
|
||||
color: #2683ff;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
|
||||
@ -176,14 +181,6 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__signature {
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
&__terms {
|
||||
margin-right: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
&__login-button.container {
|
||||
@ -201,20 +198,20 @@
|
||||
align-items: center;
|
||||
|
||||
&__nav-link {
|
||||
font-family: 'font_regular';
|
||||
font-family: 'font_regular', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
min-width: 140px;
|
||||
color: #2683FF;
|
||||
color: #2683ff;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-family: 'font_medium';
|
||||
font-family: 'font_medium', sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -227,15 +224,15 @@
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
|
||||
.st1{fill:#2683FF;}
|
||||
.st2{fill:#007AFF;}
|
||||
.st3{fill:#0062FF;}
|
||||
.st4{fill:#FFFFFF;}
|
||||
.st5{fill:#6CB9FF;}
|
||||
.st6{fill:#499FFC;}
|
||||
.st7{fill:#F7F9F9;}
|
||||
.st8{fill:#0F002D;}
|
||||
.st9{fill:#DEDEFC;}
|
||||
.st1 { fill: #2683ff; }
|
||||
.st2 { fill: #007aff; }
|
||||
.st3 { fill: #0062ff; }
|
||||
.st4 { fill: #fff; }
|
||||
.st5 { fill: #6cb9ff; }
|
||||
.st6 { fill: #499ffc; }
|
||||
.st7 { fill: #f7f9f9; }
|
||||
.st8 { fill: #0f002d; }
|
||||
.st9 { fill: #dedefc; }
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
@ -246,7 +243,7 @@
|
||||
height: 100vh;
|
||||
width: 0;
|
||||
z-index: 100;
|
||||
background-color: #2683FF;
|
||||
background-color: #2683ff;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.5s linear;
|
||||
@ -282,6 +279,7 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1500px) {
|
||||
|
||||
.login-container {
|
||||
|
||||
&__wrapper {
|
||||
@ -291,6 +289,7 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
|
||||
.login-container {
|
||||
|
||||
&__wrapper {
|
||||
@ -308,6 +307,7 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1168px) {
|
||||
|
||||
.login-container {
|
||||
|
||||
&__wrapper {
|
||||
@ -325,6 +325,7 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
|
||||
.login-container {
|
||||
padding: 60px 20px 20px 20px;
|
||||
|
||||
@ -350,6 +351,7 @@
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 420px) {
|
||||
|
||||
.login-container {
|
||||
padding: 40px 15px 50px 15px;
|
||||
|
||||
@ -415,6 +417,7 @@
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 340px) {
|
||||
|
||||
.login-container {
|
||||
padding: 40px 15px 50px 15px;
|
||||
|
||||
@ -480,6 +483,7 @@
|
||||
}
|
||||
|
||||
@media screen and (max-height: 850px) {
|
||||
|
||||
.login-area {
|
||||
|
||||
&__info-area {
|
||||
@ -489,6 +493,7 @@
|
||||
}
|
||||
|
||||
@media screen and (max-height: 700px) {
|
||||
|
||||
.login-area {
|
||||
|
||||
&__info-area {
|
||||
@ -498,6 +503,7 @@
|
||||
}
|
||||
|
||||
@media screen and (max-height: 610px) {
|
||||
|
||||
.login-area {
|
||||
|
||||
&__info-area {
|
||||
|
||||
@ -17,9 +17,10 @@ body {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: flex-start; padding: 60px 0 0 104px;
|
||||
background-color: #F5F6FA;
|
||||
font-family: 'font_regular';
|
||||
align-items: flex-start;
|
||||
padding: 60px 0 0 104px;
|
||||
background-color: #f5f6fa;
|
||||
font-family: 'font_regular', sans-serif;
|
||||
|
||||
.register-input {
|
||||
position: relative;
|
||||
@ -57,13 +58,13 @@ body {
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #AFB7C1;
|
||||
border: 1px solid #afb7c1;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
|
||||
&__label {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
@ -72,8 +73,8 @@ body {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2683FF;
|
||||
border: 1px solid #2683FF;
|
||||
background-color: #2683ff;
|
||||
border: 1px solid #2683ff;
|
||||
|
||||
.register-container__register-button__label {
|
||||
color: white;
|
||||
@ -110,9 +111,9 @@ body {
|
||||
width: 100%;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 22px;
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
line-height: 27px;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
@ -142,12 +143,12 @@ body {
|
||||
line-height: 20px;
|
||||
margin-top: 14px;
|
||||
margin-left: 10px;
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: #2683FF;
|
||||
font-family: 'font_bold';
|
||||
color: #2683ff;
|
||||
font-family: 'font_bold', sans-serif;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
@ -183,7 +184,7 @@ body {
|
||||
left: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border: 2px solid #384B65;
|
||||
border: 2px solid #384b65;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@ -192,12 +193,12 @@ body {
|
||||
}
|
||||
|
||||
.container input:checked ~ .checkmark {
|
||||
border: 2px solid #384B65;
|
||||
border: 2px solid #384b65;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
@ -206,28 +207,28 @@ body {
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container .checkmark:after {
|
||||
left: 9px;
|
||||
top: 5px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid #384B65;
|
||||
border: solid #384b65;
|
||||
border-width: 0 3px 3px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__create-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683FF;
|
||||
background-color: #2683ff;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
@ -235,7 +236,7 @@ body {
|
||||
box-shadow: none;
|
||||
|
||||
&__label {
|
||||
font-family: 'font_bold';
|
||||
font-family: 'font_bold', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin-block-start: 0;
|
||||
@ -244,7 +245,7 @@ body {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #0059D0;
|
||||
background-color: #0059d0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -289,18 +290,19 @@ body {
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
|
||||
.st1{fill:#2683FF;}
|
||||
.st2{fill:#007AFF;}
|
||||
.st3{fill:#0062FF;}
|
||||
.st4{fill:#FFFFFF;}
|
||||
.st5{fill:#6CB9FF;}
|
||||
.st6{fill:#499FFC;}
|
||||
.st7{fill:#F7F9F9;}
|
||||
.st8{fill:#0F002D;}
|
||||
.st9{fill:#DEDEFC;}
|
||||
.st1 { fill: #2683ff; }
|
||||
.st2 { fill: #007aff; }
|
||||
.st3 { fill: #0062ff; }
|
||||
.st4 { fill: #fff; }
|
||||
.st5 { fill: #6cb9ff; }
|
||||
.st6 { fill: #499ffc; }
|
||||
.st7 { fill: #f7f9f9; }
|
||||
.st8 { fill: #0f002d; }
|
||||
.st9 { fill: #dedefc; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1500px) {
|
||||
|
||||
.register-container {
|
||||
|
||||
&__wrapper {
|
||||
@ -308,7 +310,9 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
|
||||
.register-container {
|
||||
|
||||
&__wrapper {
|
||||
@ -320,7 +324,9 @@ body {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 840px) {
|
||||
|
||||
.register-container {
|
||||
overflow: hidden;
|
||||
|
||||
@ -338,7 +344,9 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 810px) {
|
||||
|
||||
.register-container {
|
||||
|
||||
&__wrapper {
|
||||
@ -350,14 +358,18 @@ body {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
|
||||
.register-container {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
|
||||
.register-container {
|
||||
|
||||
&__wrapper {
|
||||
@ -365,7 +377,9 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 520px) {
|
||||
|
||||
.register-container {
|
||||
|
||||
&__wrapper {
|
||||
@ -373,7 +387,9 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
|
||||
.register-container {
|
||||
|
||||
&__wrapper {
|
||||
@ -381,7 +397,9 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
|
||||
.register-container {
|
||||
|
||||
&__wrapper {
|
||||
@ -397,6 +415,7 @@ body {
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.register-area {
|
||||
|
||||
&__title-container {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*Copyright (C) 2019 Storj Labs, Inc.*/
|
||||
/*See LICENSE for copying information.*/
|
||||
/* Copyright (C) 2019 Storj Labs, Inc. */
|
||||
/* See LICENSE for copying information. */
|
||||
|
||||
.container {
|
||||
position: fixed;
|
||||
@ -19,48 +19,47 @@
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.container__title {
|
||||
font-family: 'font', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
}
|
||||
.container__title {
|
||||
font-family: 'font', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
}
|
||||
|
||||
.container__info {
|
||||
width: 566px;
|
||||
text-align: center;
|
||||
font-family: 'font', sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.container__info {
|
||||
width: 566px;
|
||||
text-align: center;
|
||||
font-family: 'font', sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.container__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683FF;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 216px;
|
||||
height: 48px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.container__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683ff;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 216px;
|
||||
height: 48px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.container__button p {
|
||||
font-family: 'font', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #fff;
|
||||
}
|
||||
.container__button p {
|
||||
font-family: 'font', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.container__button:hover {
|
||||
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
|
||||
}
|
||||
.container__button:hover {
|
||||
box-shadow: 0 4px 20px rgba(35, 121, 236, 0.4);
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*Copyright (C) 2019 Storj Labs, Inc.*/
|
||||
/*See LICENSE for copying information.*/
|
||||
/* Copyright (C) 2019 Storj Labs, Inc. */
|
||||
/* See LICENSE for copying information. */
|
||||
|
||||
.error-container {
|
||||
position: fixed;
|
||||
@ -27,7 +27,8 @@ h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
img, a {
|
||||
img,
|
||||
a {
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>bucket usage rollups</title>
|
||||
<title>Bucket usage rollups</title>
|
||||
<link href="/static/static/fonts/font_regular.ttf" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="error.css">
|
||||
<style>
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
/*Copyright (C) 2019 Storj Labs, Inc.*/
|
||||
/*See LICENSE for copying information.*/
|
||||
/* Copyright (C) 2019 Storj Labs, Inc. */
|
||||
|
||||
/* See LICENSE for copying information. */
|
||||
|
||||
body {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.reset-password-container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
@ -17,22 +19,26 @@ body {
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 60px 0px 0px 104px;
|
||||
background-color: #F5F6FA;
|
||||
padding: 60px 0 0 104px;
|
||||
background-color: #f5f6fa;
|
||||
}
|
||||
|
||||
.reset-password-container .reset-password-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reset-password-container .reset-password-input span {
|
||||
position: absolute;
|
||||
top: 66px;
|
||||
right: 43px;
|
||||
}
|
||||
|
||||
.reset-password-container__wrapper {
|
||||
min-width: 45%;
|
||||
height: 86vh;
|
||||
}
|
||||
|
||||
.reset-password-container__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -40,22 +46,25 @@ body {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reset-password-container__logo {
|
||||
cursor: pointer;
|
||||
width: 139px;
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
.reset-password-container__login-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #AFB7C1;
|
||||
border: 1px solid #afb7c1;
|
||||
cursor: pointer;
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.reset-password-container__login-button p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
@ -64,13 +73,16 @@ body {
|
||||
margin-block-end: 0;
|
||||
color: #354049;
|
||||
}
|
||||
|
||||
.reset-password-container__login-button:hover {
|
||||
background-color: #2683FF;
|
||||
border: 1px solid #2683FF;
|
||||
background-color: #2683ff;
|
||||
border: 1px solid #2683ff;
|
||||
}
|
||||
|
||||
.reset-password-container__login-button:hover p {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.reset-password-area-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -79,6 +91,7 @@ body {
|
||||
justify-content: flex-end;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.reset-password-area {
|
||||
background-color: transparent;
|
||||
width: 477px;
|
||||
@ -89,6 +102,7 @@ body {
|
||||
align-items: flex-start;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
.reset-password-area__title-container {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
@ -98,6 +112,7 @@ body {
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reset-password-area__title-container h1 {
|
||||
font-family: 'font_bold';
|
||||
font-size: 22px;
|
||||
@ -106,6 +121,7 @@ body {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.reset-password-area__submit-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -116,6 +132,7 @@ body {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.reset-password-area__submit-container__send-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -127,6 +144,7 @@ body {
|
||||
height: 48px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.reset-password-area__submit-container__send-button p {
|
||||
font-family: 'font_bold';
|
||||
font-size: 14px;
|
||||
@ -135,9 +153,11 @@ body {
|
||||
margin-block-end: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.reset-password-area__submit-container__send-button:hover {
|
||||
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
|
||||
box-shadow: 0 4px 20px rgba(35, 121, 236, 0.4);
|
||||
}
|
||||
|
||||
.reset-password-area input {
|
||||
font-family: 'font_regular';
|
||||
font-size: 16px;
|
||||
@ -150,19 +170,23 @@ body {
|
||||
border-color: rgba(56, 75, 101, 0.4);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.reset-password-area input::placeholder {
|
||||
color: #384B65;
|
||||
color: #384b65;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.reset-password-area input:first-of-type {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.planet {
|
||||
position: absolute;
|
||||
bottom: -61px;
|
||||
right: -257px;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -182,13 +206,16 @@ body {
|
||||
-o-transition: all 0.5s linear;
|
||||
transition: all 0.5s linear;
|
||||
}
|
||||
|
||||
.loading-overlay img {
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.loading-overlay.active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
@ -196,23 +223,31 @@ body {
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1500px) {
|
||||
|
||||
.reset-password-container__wrapper {
|
||||
min-width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
|
||||
.reset-password-container__wrapper {
|
||||
min-width: 75%;
|
||||
}
|
||||
|
||||
.image {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 840px) {
|
||||
|
||||
.reset-password-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.reset-password-container__wrapper {
|
||||
height: 770px;
|
||||
overflow-y: scroll;
|
||||
@ -220,70 +255,93 @@ body {
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
}
|
||||
|
||||
.reset-password-container__wrapper::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 810px) {
|
||||
|
||||
.reset-password-container__wrapper {
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.reset-password-area__submit-container {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 840px) {
|
||||
|
||||
.planet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
|
||||
.reset-password-container {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.planet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
|
||||
.reset-password-container__wrapper {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 520px) {
|
||||
|
||||
.reset-password-container__wrapper {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
|
||||
.reset-password-container__wrapper {
|
||||
width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
|
||||
.reset-password-container__wrapper {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.reset-password-container__header {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.reset-password-container__login-button {
|
||||
width: 120px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.reset-password-area__title-container h1 {
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.reset-password-area__submit-container__terms-area h2 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.reset-password-area__submit-container__send-button {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.reset-password-area__submit-container__send-button p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
/*Copyright (C) 2019 Storj Labs, Inc.*/
|
||||
/*See LICENSE for copying information.*/
|
||||
/* Copyright (C) 2019 Storj Labs, Inc. */
|
||||
|
||||
/* See LICENSE for copying information. */
|
||||
|
||||
.container {
|
||||
position: fixed;
|
||||
@ -19,48 +20,47 @@
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.container__title {
|
||||
font-family: 'font', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
}
|
||||
.container__title {
|
||||
font-family: 'font', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
}
|
||||
|
||||
.container__info {
|
||||
width: 566px;
|
||||
text-align: center;
|
||||
font-family: 'font', sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.container__info {
|
||||
width: 566px;
|
||||
text-align: center;
|
||||
font-family: 'font', sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.container__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683FF;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 216px;
|
||||
height: 48px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.container__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #2683ff;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
width: 216px;
|
||||
height: 48px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.container__button p {
|
||||
font-family: 'font', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #fff;
|
||||
}
|
||||
.container__button p {
|
||||
font-family: 'font', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.container__button:hover {
|
||||
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
|
||||
}
|
||||
.container__button:hover {
|
||||
box-shadow: 0 4px 20px rgba(35, 121, 236, 0.4);
|
||||
}
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
|
||||
import sinon from 'sinon';
|
||||
|
||||
import TestList from '@/components/common/test/TestList.vue';
|
||||
|
||||
import { mount } from '@vue/test-utils';
|
||||
|
||||
import TestList from '../mock/components/TestList.vue';
|
||||
|
||||
describe('TestList.vue', () => {
|
||||
it('should render list of primitive types', function () {
|
||||
const wrapper = mount(TestList, {
|
||||
|
||||
@ -12,9 +12,10 @@
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
import TestListItem from '@/components/common/test/TestListItem.vue';
|
||||
import VList from '@/components/common/VList.vue';
|
||||
|
||||
import TestListItem from './TestListItem.vue';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
VList,
|
||||
@ -39,6 +40,3 @@ export default class TestList extends Vue {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
|
||||
const path = require('path');
|
||||
const CompressionWebpackPlugin = require('compression-webpack-plugin');
|
||||
const StyleLintPlugin = require('stylelint-webpack-plugin');
|
||||
const productionGzipExtensions = ['js', 'css', 'ttf'];
|
||||
|
||||
module.exports = {
|
||||
@ -16,6 +17,9 @@ module.exports = {
|
||||
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
|
||||
threshold: 10240,
|
||||
minRatio: 0.8
|
||||
}),
|
||||
new StyleLintPlugin({
|
||||
files: ['**/*.{vue,sss,less,scss,sass}'],
|
||||
})
|
||||
],
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user