commit
e37446f789
10
js/index.js
10
js/index.js
@ -41,8 +41,18 @@ const app = new Vue({
|
|||||||
CcpoApproval,
|
CcpoApproval,
|
||||||
LocalDatetime
|
LocalDatetime
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted: function() {
|
mounted: function() {
|
||||||
|
this.$on('modalOpen', isOpen => {
|
||||||
|
if (isOpen) {
|
||||||
|
document.body.className += ' modal-open'
|
||||||
|
} else {
|
||||||
|
document.body.className = document.body.className.replace(' modal-open', '')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
const modalOpen = document.querySelector("#modalOpen")
|
const modalOpen = document.querySelector("#modalOpen")
|
||||||
|
|
||||||
if (modalOpen) {
|
if (modalOpen) {
|
||||||
const modal = modalOpen.getAttribute("data-modal")
|
const modal = modalOpen.getAttribute("data-modal")
|
||||||
this.openModal(modal)
|
this.openModal(modal)
|
||||||
|
@ -2,9 +2,11 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
closeModal: function(name) {
|
closeModal: function(name) {
|
||||||
this.modals[name] = false
|
this.modals[name] = false
|
||||||
|
this.$emit('modalOpen', false)
|
||||||
},
|
},
|
||||||
openModal: function (name) {
|
openModal: function (name) {
|
||||||
this.modals[name] = true
|
this.modals[name] = true
|
||||||
|
this.$emit('modalOpen', true)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: function() {
|
data: function() {
|
||||||
|
@ -8,10 +8,6 @@
|
|||||||
> footer {
|
> footer {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.modalOpen {
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.global-layout {
|
.global-layout {
|
||||||
|
@ -1,5 +1,11 @@
|
|||||||
$fixed-footer-height: 5rem + ($gap * 4);
|
$fixed-footer-height: 5rem + ($gap * 4);
|
||||||
|
|
||||||
|
body {
|
||||||
|
&.modal-open {
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
@ -11,6 +17,7 @@ $fixed-footer-height: 5rem + ($gap * 4);
|
|||||||
|
|
||||||
.modal__container {
|
.modal__container {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
max-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal__dialog {
|
.modal__dialog {
|
||||||
@ -36,7 +43,13 @@ $fixed-footer-height: 5rem + ($gap * 4);
|
|||||||
background-color: $color-white;
|
background-color: $color-white;
|
||||||
padding: $gap * 2;
|
padding: $gap * 2;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
-ms-overflow-style: scrollbar;
|
||||||
|
|
||||||
|
@include ie-only {
|
||||||
|
max-height: calc(100vh - #{$gap * 8});
|
||||||
|
}
|
||||||
|
|
||||||
@include media($medium-screen) {
|
@include media($medium-screen) {
|
||||||
padding: $gap * 4;
|
padding: $gap * 4;
|
||||||
@ -52,9 +65,19 @@ $fixed-footer-height: 5rem + ($gap * 4);
|
|||||||
|
|
||||||
.modal__dismiss {
|
.modal__dismiss {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: $gap;
|
||||||
right: 0;
|
right: $gap;
|
||||||
width: 8rem;
|
width: 8rem;
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
top: $gap * 2;
|
||||||
|
right: $gap * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media($large-screen) {
|
||||||
|
top: $gap * 4;
|
||||||
|
right: $gap * 4;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.block-list {
|
.block-list {
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
{% endassets %}
|
{% endassets %}
|
||||||
<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
|
<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
|
||||||
</head>
|
</head>
|
||||||
<body class="{% if g.modalOpen %} modalOpen{% endif %}">
|
<body>
|
||||||
|
|
||||||
<div id='app-root'>
|
<div id='app-root'>
|
||||||
|
|
||||||
|
@ -7,6 +7,7 @@
|
|||||||
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
<div id='modalOpen' data-modal='styleguideModal'></div>
|
||||||
|
|
||||||
{% call Modal(name='styleguideModal', dismissable=True) %}
|
{% call Modal(name='styleguideModal', dismissable=True) %}
|
||||||
<h1>A modal dialog</h1>
|
<h1>A modal dialog</h1>
|
||||||
@ -130,29 +131,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
<textinput inline-template validation='dollars' value='1231231'>
|
|
||||||
<div v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
|
|
||||||
<label for='basic-text-1'>
|
|
||||||
Dollars Text Input
|
|
||||||
<span class='usa-input__help'>
|
|
||||||
This is some help text to explain what this form field is and why you should fill it out.
|
|
||||||
</span>
|
|
||||||
<template v-if='showError'>{{ Icon('alert') }}</template>
|
|
||||||
<template v-if='showValid'>{{ Icon('ok') }}</template>
|
|
||||||
</label>
|
|
||||||
<masked-input
|
|
||||||
v-on:input='onInput'
|
|
||||||
v-on:change='onChange'
|
|
||||||
v-model='renderedValue'
|
|
||||||
id='basic-text-1'
|
|
||||||
type='text'
|
|
||||||
ref='input'
|
|
||||||
placeholder='$'
|
|
||||||
:guide="true"
|
|
||||||
:mask="mask">
|
|
||||||
</masked-input>
|
|
||||||
</div>
|
|
||||||
</textinput>
|
|
||||||
|
|
||||||
<div class='usa-input usa-input--error'>
|
<div class='usa-input usa-input--error'>
|
||||||
<label for='basic-text-2'>
|
<label for='basic-text-2'>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user