-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #87 from bcgov/6686-embedded-help
6686 embedded help
- Loading branch information
Showing
19 changed files
with
421 additions
and
130 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,81 @@ | ||
| /* Body */ | ||
| body { | ||
| background-color: #F1F1F1; | ||
| padding-bottom: 20px; | ||
| background-color: #f1f1f1; | ||
| padding-bottom: 20px; | ||
| } | ||
|
|
||
| hr { | ||
| background-color: #606060; | ||
| border: 1px solid #606060; | ||
| background-color: #606060; | ||
| border: 1px solid #606060; | ||
| } | ||
|
|
||
| th div { | ||
| float: left; | ||
| } | ||
|
|
||
| /* Main */ | ||
| main { | ||
| max-width: 1320px; | ||
| min-width: 1100px; | ||
| width: 100%; | ||
| min-height: calc(100vh - 168px); | ||
| margin: 0 auto; | ||
| padding: 20px 60px 60px 60px; | ||
| background-color: #FFFFFF; | ||
| max-width: 1320px; | ||
| min-width: 1100px; | ||
| width: 100%; | ||
| min-height: calc(100vh - 168px); | ||
| margin: 0 auto; | ||
| padding: 20px 60px 60px 60px; | ||
| background-color: #ffffff; | ||
| } | ||
| main .content { | ||
| padding: 0; | ||
| font-size: 1rem; | ||
| padding: 0; | ||
| font-size: 1rem; | ||
| } | ||
| main .content:after { | ||
| content: ""; | ||
| display: table; | ||
| clear: both; | ||
| content: ''; | ||
| display: table; | ||
| clear: both; | ||
| } | ||
|
|
||
| /* Sub groups */ | ||
| .subgroup { | ||
| /*.v-card.subgroup*/ | ||
| padding: 20px; margin:0px -20px 20px -20px; max-width: 110%; | ||
| padding: 20px; | ||
| margin: 0px -20px 20px -20px; | ||
| max-width: 110%; | ||
| } | ||
| .subgroup h2 { | ||
| font-weight: 100; | ||
| color: #999; | ||
| font-size: 24px; | ||
| line-height: 30px; | ||
| text-transform: uppercase; | ||
| margin-top: 0; | ||
| margin-bottom: 20px; | ||
| font-weight: 100; | ||
| color: #999; | ||
| font-size: 24px; | ||
| line-height: 30px; | ||
| text-transform: uppercase; | ||
| margin-top: 0; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| /* Input */ | ||
| /* Input */ | ||
| input { | ||
| display: block; | ||
| width: 100%; | ||
| display: block; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .checkbox-group .v-input--selection-controls { | ||
| margin-top: 8px; | ||
| } | ||
|
|
||
| /* Vuetify Components */ | ||
| /*.v-icon.v-icon { | ||
| vertical-align: baseline; | ||
| margin-top: 8px; | ||
| } | ||
| */ | ||
|
|
||
| /* tables */ | ||
| .theme--light.v-data-table.base-table thead tr:last-child th { | ||
| border-top: 2px solid #003366; | ||
| border-bottom: 2px solid #003366; | ||
| border-top: 2px solid #003366; | ||
| border-bottom: 2px solid #003366; | ||
| } | ||
|
|
||
| .v-data-table td, .v-data-table th { | ||
| padding: 0 16px; | ||
| .v-data-table td, | ||
| .v-data-table th { | ||
| padding: 0 16px; | ||
| } | ||
| .select-table tr { | ||
| cursor: pointer; | ||
| cursor: pointer; | ||
| } | ||
| .select-table tr.v-data-table__empty-wrapper { | ||
| cursor: default; | ||
| cursor: default; | ||
| } | ||
|
|
||
| .flex { | ||
| display: flex; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <template> | ||
| <div class="instructions"> | ||
| <a href="#" id="show-modal" @click="showModal = true">Instructions</a> | ||
| </div> | ||
| <Teleport to="body"> | ||
| <!-- use the modal component, pass in the prop --> | ||
| <AppModal :show="showModal" @close="showModal = false"> | ||
| <template #header> | ||
| <h3>Instructions</h3> | ||
| </template> | ||
| <template #body> | ||
| <slot></slot> | ||
| </template> | ||
| <template #footer></template> | ||
| </AppModal> | ||
| </Teleport> | ||
| </template> | ||
| <script> | ||
| import AppModal from './AppModal.vue' | ||
| export default { | ||
| name: 'AppHelp', | ||
| components: { AppModal }, | ||
| data() { | ||
| return { | ||
| showModal: false, | ||
| } | ||
| }, | ||
| } | ||
| </script> | ||
| <style scoped> | ||
| .instructions { | ||
| float: right; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| <template> | ||
| <Transition name="modal"> | ||
| <div v-if="show" class="modal-mask" @keydown.esc="$emit('close')" tabindex="0"> | ||
| <div class="modal-wrapper"> | ||
| <div class="modal-container" v-draggable=""> | ||
| <div class="modal-header"> | ||
| <slot name="header"></slot> | ||
| </div> | ||
|
|
||
| <div class="modal-body"> | ||
| <slot name="body"></slot> | ||
| </div> | ||
|
|
||
| <div class="modal-footer"> | ||
| <slot name="footer"> | ||
| <AppButton class="modal-default-button" mode="secondary" @click="$emit('close')">OK</AppButton> | ||
| </slot> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </Transition> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| props: { | ||
| show: Boolean, | ||
| }, | ||
| } | ||
| </script> | ||
|
|
||
| <style> | ||
| .modal-mask { | ||
| position: fixed; | ||
| z-index: 9998; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: rgba(0, 0, 0, 0.5); | ||
| display: table; | ||
| transition: opacity 0.3s ease; | ||
| } | ||
| .modal-wrapper { | ||
| display: table-cell; | ||
| vertical-align: middle; | ||
| } | ||
| .modal-container { | ||
| width: 600px; | ||
| margin: 0px auto; | ||
| padding: 20px 30px; | ||
| background-color: #fff; | ||
| border-radius: 4px; | ||
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); | ||
| transition: all 0.3s ease; | ||
| cursor: grab; | ||
| max-height: 600px; | ||
| overflow: auto; | ||
| } | ||
| .modal-header h3 { | ||
| margin-top: 0; | ||
| color: #003366; | ||
| } | ||
| .modal-body { | ||
| margin: 20px 0; | ||
| } | ||
| .modal-footer { | ||
| padding-bottom: 40px; | ||
| } | ||
| .modal-default-button { | ||
| float: right; | ||
| } | ||
| :slotted(ul) { | ||
| list-style: disc; | ||
| margin-left: 20px; | ||
| } | ||
| /* | ||
| * The following styles are auto-applied to elements with | ||
| * transition="modal" when their visibility is toggled | ||
| * by Vue.js. | ||
| * | ||
| * You can easily play with the modal transition by editing | ||
| * these styles. | ||
| */ | ||
| .modal-enter-from { | ||
| opacity: 0; | ||
| } | ||
| .modal-leave-to { | ||
| opacity: 0; | ||
| } | ||
| .modal-enter-from .modal-container, | ||
| .modal-leave-to .modal-container { | ||
| -webkit-transform: scale(1.1); | ||
| transform: scale(1.1); | ||
| } | ||
| </style> |
Oops, something went wrong.