web/satellite: text selection on specific elements disabled (#3424)
This commit is contained in:
parent
43c2b72911
commit
a59d07d4dc
@ -37,6 +37,7 @@ export default class AccountArea extends Vue {}
|
|||||||
color: #354049;
|
color: #354049;
|
||||||
margin-block-start: 0.5em;
|
margin-block-start: 0.5em;
|
||||||
margin-block-end: 0.5em;
|
margin-block-end: 0.5em;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -353,6 +353,7 @@ export default class ApiKeysArea extends Vue {
|
|||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
line-height: 39px;
|
line-height: 39px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.api-keys-header {
|
.api-keys-header {
|
||||||
|
@ -77,6 +77,7 @@ export default class ApiKeysCopyPopup extends Vue {
|
|||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 29px;
|
line-height: 29px;
|
||||||
margin-bottom: 26px;
|
margin-bottom: 26px;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__copy-area {
|
&__copy-area {
|
||||||
@ -130,19 +131,22 @@ export default class ApiKeysCopyPopup extends Vue {
|
|||||||
.copied-button {
|
.copied-button {
|
||||||
padding: 13px 28.5px;
|
padding: 13px 28.5px;
|
||||||
background-color: #196cda;
|
background-color: #196cda;
|
||||||
cursor: default;
|
border: 1px solid #196cda;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #2683ff;
|
||||||
|
border: 1px solid #2683ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-button,
|
.copy-button,
|
||||||
.copied-button {
|
.copied-button {
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: #2683ff;
|
|
||||||
padding: 13px 36px;
|
padding: 13px 36px;
|
||||||
cursor: pointer;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border: 1px solid #2683ff;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -151,6 +155,7 @@ export default class ApiKeysCopyPopup extends Vue {
|
|||||||
|
|
||||||
&__label {
|
&__label {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -122,6 +122,7 @@ export default class ApiKeysCreationPopup extends Vue {
|
|||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 29px;
|
line-height: 29px;
|
||||||
margin-bottom: 26px;
|
margin-bottom: 26px;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.next-button {
|
.next-button {
|
||||||
|
@ -86,6 +86,7 @@ export default class SortApiKeysHeader extends Vue {
|
|||||||
height: 40px;
|
height: 40px;
|
||||||
background-color: rgba(255, 255, 255, 0.3);
|
background-color: rgba(255, 255, 255, 0.3);
|
||||||
margin-top: 31px;
|
margin-top: 31px;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
&__date-item {
|
&__date-item {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
|
@ -184,6 +184,7 @@ export default class BucketArea extends Vue {
|
|||||||
margin-right: 50px;
|
margin-right: 50px;
|
||||||
margin-block-start: 0;
|
margin-block-start: 0;
|
||||||
margin-block-end: 0;
|
margin-block-end: 0;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -32,6 +32,7 @@ export default class SortBucketsHeader extends Vue {}
|
|||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
max-height: 40px;
|
max-height: 40px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
|
@ -84,6 +84,7 @@ export default class EmptyStateProjectArea extends Vue {
|
|||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
min-width: 900px;
|
min-width: 900px;
|
||||||
color: #354049;
|
color: #354049;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -90,6 +90,7 @@ export default class HeaderedInput extends HeaderlessInput {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 21px;
|
line-height: 21px;
|
||||||
color: #354049;
|
color: #354049;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__error {
|
&__error {
|
||||||
|
@ -29,6 +29,7 @@ export default class PagesBlock extends Vue {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.pages-container {
|
.pages-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
&__pages {
|
&__pages {
|
||||||
font-family: 'font_medium', sans-serif;
|
font-family: 'font_medium', sans-serif;
|
||||||
|
@ -126,6 +126,7 @@ export default class RegistrationSuccessPopup extends Vue {
|
|||||||
line-height: 39px;
|
line-height: 39px;
|
||||||
color: #384b65;
|
color: #384b65;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
:class="containerClassName"
|
:class="containerClassName"
|
||||||
:style="style"
|
:style="style"
|
||||||
@click="onPress">
|
@click="onPress">
|
||||||
<h1 class="label" :class="{'white': isWhite}">{{label}}</h1>
|
<h1 class="label">{{label}}</h1>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -49,6 +49,25 @@ export default class VButton extends Vue {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.white,
|
||||||
|
.red {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border: 1px solid #afb7c1 !important;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #354049 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
background-color: #dadde5 !important;
|
||||||
|
border-color: #dadde5 !important;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #acb0bc !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -56,6 +75,7 @@ export default class VButton extends Vue {
|
|||||||
background-color: #2683ff;
|
background-color: #2683ff;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
font-family: 'font_medium', sans-serif;
|
font-family: 'font_medium', sans-serif;
|
||||||
@ -64,49 +84,30 @@ export default class VButton extends Vue {
|
|||||||
color: #fff;
|
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 {
|
&:hover {
|
||||||
box-shadow: 0 4px 20px rgba(35, 121, 236, 0.4);
|
box-shadow: 0 4px 20px rgba(35, 121, 236, 0.4);
|
||||||
|
|
||||||
&.white {
|
&.white {
|
||||||
box-shadow: none;
|
box-shadow: none !important;
|
||||||
background-color: #2683ff;
|
background-color: #2683ff !important;
|
||||||
border: 1px solid #2683ff;
|
border: 1px solid #2683ff !important;
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
color: white;
|
color: white !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.red {
|
&.red {
|
||||||
box-shadow: none;
|
box-shadow: none !important;
|
||||||
background-color: transparent;
|
background-color: transparent !important;
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
color: #eb5757;
|
color: #eb5757 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
box-shadow: none;
|
box-shadow: none !important;
|
||||||
background-color: #dadde5 !important;
|
background-color: #dadde5 !important;
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
@ -268,6 +268,7 @@ export default class VDatePicker extends Vue {
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
user-select: none;
|
||||||
-webkit-animation: fadein 0.5s;
|
-webkit-animation: fadein 0.5s;
|
||||||
|
|
||||||
/* Safari, Chrome and Opera > 12.1 */
|
/* Safari, Chrome and Opera > 12.1 */
|
||||||
|
@ -11,6 +11,7 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 55px;
|
padding: 0 55px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
&__left-area,
|
&__left-area,
|
||||||
&__right-area {
|
&__right-area {
|
||||||
|
@ -30,6 +30,7 @@ export default class TabNavigation extends Vue {
|
|||||||
width: auto;
|
width: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
border-bottom: 1px solid #afb7c1;
|
border-bottom: 1px solid #afb7c1;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
|
@ -18,6 +18,7 @@ a {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-family: 'font_regular', sans-serif;
|
font-family: 'font_regular', sans-serif;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
&__logo {
|
&__logo {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -161,6 +161,7 @@ export default class ProjectDetailsArea extends Vue {
|
|||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 29px;
|
line-height: 29px;
|
||||||
color: #354049;
|
color: #354049;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__button-area {
|
&__button-area {
|
||||||
@ -192,6 +193,7 @@ export default class ProjectDetailsArea extends Vue {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 21px;
|
line-height: 21px;
|
||||||
color: rgba(56, 75, 101, 0.4);
|
color: rgba(56, 75, 101, 0.4);
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__project-name {
|
&__project-name {
|
||||||
@ -224,6 +226,7 @@ export default class ProjectDetailsArea extends Vue {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 21px;
|
line-height: 21px;
|
||||||
color: rgba(56, 75, 101, 0.4);
|
color: rgba(56, 75, 101, 0.4);
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__project-description {
|
&__project-description {
|
||||||
|
@ -22,7 +22,7 @@
|
|||||||
/>
|
/>
|
||||||
<DatePickerIcon
|
<DatePickerIcon
|
||||||
class="usage-report-container__options-area__option__image"
|
class="usage-report-container__options-area__option__image"
|
||||||
@click.prevent.self="onCustomDateClick"
|
@click.prevent="onCustomDateClick"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -259,6 +259,7 @@ export default class UsageReport extends Vue {
|
|||||||
color: #354049;
|
color: #354049;
|
||||||
margin-block-start: 0.5em;
|
margin-block-start: 0.5em;
|
||||||
margin-block-end: 0.5em;
|
margin-block-end: 0.5em;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -288,6 +289,7 @@ export default class UsageReport extends Vue {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 23px;
|
line-height: 23px;
|
||||||
color: #354049;
|
color: #354049;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__image {
|
&__image {
|
||||||
@ -347,6 +349,7 @@ export default class UsageReport extends Vue {
|
|||||||
color: #354049;
|
color: #354049;
|
||||||
margin-block-start: 0;
|
margin-block-start: 0;
|
||||||
margin-block-end: 0;
|
margin-block-end: 0;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__amount {
|
&__amount {
|
||||||
@ -397,6 +400,7 @@ export default class UsageReport extends Vue {
|
|||||||
line-height: 21px;
|
line-height: 21px;
|
||||||
color: #354049;
|
color: #354049;
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__image {
|
&__image {
|
||||||
|
@ -372,6 +372,7 @@ export default class AddUserPopup extends Vue {
|
|||||||
color: #384b65;
|
color: #384b65;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
width: 107%;
|
width: 107%;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -449,6 +450,7 @@ export default class AddUserPopup extends Vue {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
padding-left: 50px;
|
padding-left: 50px;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__button-container {
|
&__button-container {
|
||||||
|
@ -175,6 +175,7 @@ export default class HeaderArea extends Vue {
|
|||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
line-height: 39px;
|
line-height: 39px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -97,6 +97,7 @@ export default class SortingListHeader extends Vue {
|
|||||||
height: 40px;
|
height: 40px;
|
||||||
background-color: rgba(255, 255, 255, 0.3);
|
background-color: rgba(255, 255, 255, 0.3);
|
||||||
margin-top: 31px;
|
margin-top: 31px;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
&__name-container,
|
&__name-container,
|
||||||
&__added-container,
|
&__added-container,
|
||||||
|
@ -14,6 +14,6 @@ exports[`Button.vue renders correctly with isDisabled prop 1`] = `
|
|||||||
|
|
||||||
exports[`Button.vue renders correctly with isWhite prop 1`] = `
|
exports[`Button.vue renders correctly with isWhite prop 1`] = `
|
||||||
<div class="container white" style="width: inherit; height: inherit;">
|
<div class="container white" style="width: inherit; height: inherit;">
|
||||||
<h1 class="label white">Default</h1>
|
<h1 class="label">Default</h1>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
Loading…
Reference in New Issue
Block a user