diff --git a/src/App.vue b/src/App.vue index 3f52797..c7cd0c9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -52,11 +52,22 @@ export default { margin-top: 60px; } +/* Global Styles */ + button { font-size: 16px; padding: 8px; border-radius: 3px; margin: 5px 10px 5px 0px; + cursor: pointer; +} + +button:disabled { + cursor: auto; +} + +.clickable { + cursor: pointer; } input[type='checkbox'] { @@ -75,4 +86,85 @@ input[type='checkbox'] { input[type='checkbox']:checked { background: #679; } + +/* Modal */ + +.modal, .overlay { + width: 100%; + height: 100%; + position: fixed; + left: 0; + top: 0; +} +.overlay { + opacity: 0.5; + background-color: black; +} +.modal-card { + position: relative; + max-width: 80%; + margin: auto; + margin-top: 30px; + padding: 20px; + background-color: white; + min-height: 500px; + z-index: 10; + opacity: 1; +} + +/* Email Modal */ + +.email-display { + text-align: left; +} + +/* Mail Table */ + +.mail-table { + max-width: 1000px; + margin: auto; + border-collapse: collapse; +} +.mail-table tr.read { + background-color: #EEE; +} +.mail-table tr { + height: 40px; +} +.mail-table td { + border-bottom: 1px solid black; + padding: 5px; + text-align: left; +} +.mail-table tr:first-of-type td { + border-top: 1px solid black; +} +.mail-table td p { + max-height: 1.2em; + overflow-y: hidden; + margin: 0; +} + +.mail-table td.date { + width: 120px; +} + +/* Bulk Action Bar */ + +.bulk-action-bar { + width: 100%; + max-width: 1000px; + margin: auto; + text-align: left; + padding-bottom: 8px; +} + +.bulk-action-bar input { + margin: 5px; +} + +.bulk-action-bar .checkbox { + margin-right: 6px; + margin-left: 3px; +} diff --git a/src/components/BulkActionBar.vue b/src/components/BulkActionBar.vue index 307792e..a001cc2 100644 --- a/src/components/BulkActionBar.vue +++ b/src/components/BulkActionBar.vue @@ -67,19 +67,5 @@ \ No newline at end of file diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue index 499a9e9..df747ac 100644 --- a/src/components/MailTable.vue +++ b/src/components/MailTable.vue @@ -1,5 +1,5 @@