diff --git a/app/assets/stylesheets/app/_footer.scss b/app/assets/stylesheets/app/_footer.scss index 6cb0c071d..9934f5355 100644 --- a/app/assets/stylesheets/app/_footer.scss +++ b/app/assets/stylesheets/app/_footer.scss @@ -39,10 +39,6 @@ h2 { } } - - input { - border-radius: 0px; - } } #footer-bar .footer-bar-link { @@ -85,13 +81,14 @@ h2 { background-color: white; } +.panel .close-button { + &:hover { + text-decoration: none; + } +} + #account-panel { width: 400px; - - #signout-button { - text-align: right; - display: block; - } } a.disabled { diff --git a/app/assets/templates/frontend/directives/account-menu.html.haml b/app/assets/templates/frontend/directives/account-menu.html.haml index dac816181..bf99e0e65 100644 --- a/app/assets/templates/frontend/directives/account-menu.html.haml +++ b/app/assets/templates/frontend/directives/account-menu.html.haml @@ -4,172 +4,176 @@ %h1.title Account %a.close-button Close .content - .panel-section.hero{"ng-if" => "!user"} - .step-one{"ng-if" => "!formData.showLogin && !formData.showRegister && !formData.mfa"} - %h1.title Sign in or register to enable sync and end-to-end encryption. - .button-group.stretch - .button.info.featured{"ng-click" => "formData.showLogin = true"} - .label Sign In - .button.info.featured{"ng-click" => "formData.showRegister = true"} - .label Register - %p - Standard Notes is free on every platform, and comes standard with sync and encryption. - .step-two{"ng-if" => "formData.showLogin || formData.showRegister"} - .float-group.h20 - %h3.pull-left {{formData.showLogin ? "Sign In" : "Register (free)"}} - %a.pull-right.pt-5{"ng-click" => "formData.showLogin = false; formData.showRegister = false;"} Cancel + .panel-section.hero{"ng-if" => "!user && !formData.showLogin && !formData.showRegister && !formData.mfa"} + %h1.title Sign in or register to enable sync and end-to-end encryption. + .button-group.stretch + .button.info.featured{"ng-click" => "formData.showLogin = true"} + .label Sign In + .button.info.featured{"ng-click" => "formData.showRegister = true"} + .label Register + %p + Standard Notes is free on every platform, and comes standard with sync and encryption. - %form.mt-5 - %input.form-control.mt-10{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'formData.email'} - %input.form-control{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.user_password'} - %input.form-control{:placeholder => 'Confirm Password', "ng-if" => "formData.showRegister", :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.password_conf'} + .panel-section{"ng-if" => "formData.showLogin || formData.showRegister"} + %h3.title + {{formData.showLogin ? "Sign In" : "Register (free)"}} - %a.block{"ng-click" => "formData.showAdvanced = !formData.showAdvanced"} Advanced Options - .advanced-options.mt-10{"ng-if" => "formData.showAdvanced"} - .float-group - %label.pull-left Sync Server Domain - %input.form-control.mt-5{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'formData.url'} + %form.panel-form + %input{:placeholder => 'Email', :autofocus => 'autofocus', :name => 'email', :required => true, :type => 'email', 'ng-model' => 'formData.email'} + %input{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.user_password'} + %input{:placeholder => 'Confirm Password', "ng-if" => "formData.showRegister", :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.password_conf'} - .checkbox.mt-10 - %p - %input{"type" => "checkbox", "ng-model" => "formData.ephemeral", "ng-true-value" => "false", "ng-false-value" => "true"} - Stay signed in - .checkbox.mt-10{"ng-if" => "notesAndTagsCount() > 0"} - %p - %input{"type" => "checkbox", "ng-model" => "formData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"} - Merge local data ({{notesAndTagsCount()}} notes and tags) - %button.ui-button.block.mt-10{"ng-click" => "submitAuthForm()"} {{formData.showLogin ? "Sign In" : "Register"}} + %a.panel-row{"ng-click" => "formData.showAdvanced = !formData.showAdvanced"} + Advanced Options + .notification.info{"ng-if" => "formData.showRegister"} + %h2.title No Password Reset. + .text Because your notes are encrypted using your password, Standard Notes does not have a password reset option. You cannot forget your password. + .advanced-options.panel-row{"ng-if" => "formData.showAdvanced"} + .float-group + %label.pull-left Sync Server Domain + %input.form-control.mt-5{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'formData.url'} + + .button-group.stretch.panel-row.form-submit + .button.info.featured{"ng-click" => "submitAuthForm()"} + {{formData.showLogin ? "Sign In" : "Register"}} + + %label + %input{"type" => "checkbox", "ng-model" => "formData.ephemeral", "ng-true-value" => "false", "ng-false-value" => "true"} + Stay signed in + %label + %input{"type" => "checkbox", "ng-model" => "formData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"} + Merge local data ({{notesAndTagsCount()}} notes and tags) %form.mt-5{"ng-if" => "formData.mfa"} %p {{formData.mfa.message}} %input.form-control.mt-10{:autofocus => "true", :name => 'mfa', :required => true, 'ng-model' => 'formData.userMfaCode'} %button.ui-button.block.mt-10{"ng-click" => "submitMfaForm()"} {{"Sign In"}} - .mt-15{"ng-if" => "formData.showRegister"} - %h3 No Password Reset. - %p.mt-5 Because your notes are encrypted using your password, Standard Notes does not have a password reset option. You cannot forget your password. + %em.block.center-align.mt-10{"ng-if" => "formData.status", "style" => "font-size: 14px;"} + {{formData.status}} - %em.block.center-align.mt-10{"ng-if" => "formData.status", "style" => "font-size: 14px;"} {{formData.status}} - - - .panel-section{"ng-if" => "user"} - %h2 {{user.email}} - %p {{server}} - %div.bold.mt-10.tinted{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"} - .spinner.inline.mr-5.tinted - {{"Syncing" + (syncStatus.total > 0 ? ":" : "")}} - %span{"ng-if" => "syncStatus.total > 0"} {{syncStatus.current}}/{{syncStatus.total}} - %p.bold.mt-10.red.block{"ng-if" => "syncStatus.error"} Error syncing: {{syncStatus.error.message}} + %div{"ng-if" => "!formData.showLogin && !formData.showRegister"} + .panel-section{"ng-if" => "user"} + %h2 {{user.email}} + %p {{server}} + %div.bold.mt-10.tinted{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"} + .spinner.inline.mr-5.tinted + {{"Syncing" + (syncStatus.total > 0 ? ":" : "")}} + %span{"ng-if" => "syncStatus.total > 0"} {{syncStatus.current}}/{{syncStatus.total}} + %p.bold.mt-10.red.block{"ng-if" => "syncStatus.error"} Error syncing: {{syncStatus.error.message}} - %a.block.mt-5{"ng-click" => "newPasswordData.changePassword = !newPasswordData.changePassword"} Change Password - %section.gray-bg.mt-10.medium-padding{"ng-if" => "newPasswordData.changePassword"} - %p.bold Change Password (Beta) - %p.mt-10 Since your encryption key is based on your password, changing your password requires all your notes and tags to be re-encrypted using your new key. - %p.mt-5 If you have thousands of items, this can take several minutes — you must keep the application window open during this process. - %p.mt-5 After changing your password, you must log out of all other applications currently signed in to your account. - %p.bold.mt-5 It is highly recommended you download a backup of your data before proceeding. - %div.mt-10{"ng-if" => "!newPasswordData.status"} - %a.red.mr-5{"ng-if" => "!newPasswordData.showForm", "ng-click" => "showPasswordChangeForm()"} Continue - %a{"ng-click" => "newPasswordData.changePassword = false; newPasswordData.showForm = false"} Cancel - %div.mt-10{"ng-if" => "newPasswordData.showForm"} - %form - %input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPassword", "placeholder" => "Enter new password"} - %input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPasswordConfirmation", "placeholder" => "Confirm new password"} - %button.ui-button.block{"ng-click" => "submitPasswordChange()"} Submit - %p.italic.mt-10{"ng-if" => "newPasswordData.status"} {{newPasswordData.status}} + %a.block.mt-5{"ng-click" => "newPasswordData.changePassword = !newPasswordData.changePassword"} Change Password + %section.gray-bg.mt-10.medium-padding{"ng-if" => "newPasswordData.changePassword"} + %p.bold Change Password (Beta) + %p.mt-10 Since your encryption key is based on your password, changing your password requires all your notes and tags to be re-encrypted using your new key. + %p.mt-5 If you have thousands of items, this can take several minutes — you must keep the application window open during this process. + %p.mt-5 After changing your password, you must log out of all other applications currently signed in to your account. + %p.bold.mt-5 It is highly recommended you download a backup of your data before proceeding. + %div.mt-10{"ng-if" => "!newPasswordData.status"} + %a.red.mr-5{"ng-if" => "!newPasswordData.showForm", "ng-click" => "showPasswordChangeForm()"} Continue + %a{"ng-click" => "newPasswordData.changePassword = false; newPasswordData.showForm = false"} Cancel + %div.mt-10{"ng-if" => "newPasswordData.showForm"} + %form + %input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPassword", "placeholder" => "Enter new password"} + %input.form-control{:type => 'password', "ng-model" => "newPasswordData.newPasswordConfirmation", "placeholder" => "Confirm new password"} + %button.ui-button.block{"ng-click" => "submitPasswordChange()"} Submit + %p.italic.mt-10{"ng-if" => "newPasswordData.status"} {{newPasswordData.status}} - %a.block.mt-5{"ng-click" => "showAdvanced = !showAdvanced"} Advanced - %div{"ng-if" => "showAdvanced"} - %a.block.mt-15{"href" => "{{dashboardURL()}}", "target" => "_blank"} Data Dashboard - %a.block.mt-5{"ng-click" => "reencryptPressed()"} Re-encrypt All Items - %a.block.mt-5{"ng-click" => "showCredentials = !showCredentials"} Show Credentials - %section.gray-bg.mt-10.medium-padding{"ng-if" => "showCredentials"} - %label.block - Encryption key: - .wrap.normal.mt-1.selectable {{encryptionKey()}} - %label.block.mt-5.mb-0 - Server password: - .wrap.normal.mt-1.selectable {{serverPassword() ? serverPassword() : 'Not available. Sign out then sign back in to compute.'}} - %label.block.mt-5.mb-0 - Authentication key: - .wrap.normal.mt-1.selectable {{authKey() ? authKey() : 'Not available. Sign out then sign back in to compute.'}} + %a.block.mt-5{"ng-click" => "showAdvanced = !showAdvanced"} Advanced + %div{"ng-if" => "showAdvanced"} + %a.block.mt-15{"href" => "{{dashboardURL()}}", "target" => "_blank"} Data Dashboard + %a.block.mt-5{"ng-click" => "reencryptPressed()"} Re-encrypt All Items + %a.block.mt-5{"ng-click" => "showCredentials = !showCredentials"} Show Credentials + %section.gray-bg.mt-10.medium-padding{"ng-if" => "showCredentials"} + %label.block + Encryption key: + .wrap.normal.mt-1.selectable {{encryptionKey()}} + %label.block.mt-5.mb-0 + Server password: + .wrap.normal.mt-1.selectable {{serverPassword() ? serverPassword() : 'Not available. Sign out then sign back in to compute.'}} + %label.block.mt-5.mb-0 + Authentication key: + .wrap.normal.mt-1.selectable {{authKey() ? authKey() : 'Not available. Sign out then sign back in to compute.'}} - %div{"ng-if" => "securityUpdateAvailable()"} - %a.block.mt-5{"ng-click" => "clickedSecurityUpdate()"} Security Update Available - %section.gray-bg.mt-10.medium-padding{"ng-if" => "securityUpdateData.showForm"} - %p - %a{"href" => "https://standardnotes.org/help/security-update", "target" => "_blank"} Learn more. - %div.mt-10{"ng-if" => "!securityUpdateData.processing"} - %p.bold Enter your password to update: - %form.mt-5 - %input.form-control{:type => 'password', "ng-model" => "securityUpdateData.password", "placeholder" => "Enter password"} - %button.ui-button.block{"ng-click" => "submitSecurityUpdateForm()"} Update - %div.mt-5{"ng-if" => "securityUpdateData.processing"} - %p.tinted Processing... + %div{"ng-if" => "securityUpdateAvailable()"} + %a.block.mt-5{"ng-click" => "clickedSecurityUpdate()"} Security Update Available + %section.gray-bg.mt-10.medium-padding{"ng-if" => "securityUpdateData.showForm"} + %p + %a{"href" => "https://standardnotes.org/help/security-update", "target" => "_blank"} Learn more. + %div.mt-10{"ng-if" => "!securityUpdateData.processing"} + %p.bold Enter your password to update: + %form.mt-5 + %input.form-control{:type => 'password', "ng-model" => "securityUpdateData.password", "placeholder" => "Enter password"} + %button.ui-button.block{"ng-click" => "submitSecurityUpdateForm()"} Update + %div.mt-5{"ng-if" => "securityUpdateData.processing"} + %p.tinted Processing... - .panel-section - %h3.title Encryption - %p - {{encryptionStatusString()}} - %div.mt-5{"ng-if" => "encryptionEnabled()"} - %i {{encryptionStatusForNotes()}} - - .panel-section - %h3.title Passcode Lock - %div{"ng-if" => "!hasPasscode() && passcodeOptionAvailable()"} - .button.info{"ng-click" => "addPasscodeClicked()", "ng-if" => "!formData.showPasscodeForm"} - .label Add Passcode - - %form.mt-5{"ng-if" => "formData.showPasscodeForm", "ng-submit" => "submitPasscodeForm()"} - %p.bold Choose a passcode: - %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.passcode", "placeholder" => "Passcode", "autofocus" => "true"} - %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.confirmPasscode", "placeholder" => "Confirm Passcode"} - %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Set Passcode - %p Add an app passcode to lock the app and encrypt on-device key storage. - %div{"ng-if" => "hasPasscode()"} + .panel-section + %h3.title Encryption %p - Passcode lock is enabled. - %span{"ng-if" => "isDesktopApplication()"} Your passcode will be required on new sessions after app quit. - %a.block.mt-5{"ng-click" => "removePasscodePressed()"} Remove Passcode - %div{"ng-if" => "!passcodeOptionAvailable()"} - %p Passcode lock is only available to permanent sessions. (You chose not to stay signed in.) + {{encryptionStatusString()}} + %div.mt-5{"ng-if" => "encryptionEnabled()"} + %i {{encryptionStatusForNotes()}} + + .panel-section + %h3.title Passcode Lock + %div{"ng-if" => "!hasPasscode() && passcodeOptionAvailable()"} + .button.info{"ng-click" => "addPasscodeClicked()", "ng-if" => "!formData.showPasscodeForm"} + .label Add Passcode + + %form.mt-5{"ng-if" => "formData.showPasscodeForm", "ng-submit" => "submitPasscodeForm()"} + %p.bold Choose a passcode: + %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.passcode", "placeholder" => "Passcode", "autofocus" => "true"} + %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.confirmPasscode", "placeholder" => "Confirm Passcode"} + %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Set Passcode + %p Add an app passcode to lock the app and encrypt on-device key storage. + %div{"ng-if" => "hasPasscode()"} + %p + Passcode lock is enabled. + %span{"ng-if" => "isDesktopApplication()"} Your passcode will be required on new sessions after app quit. + %a.block.mt-5{"ng-click" => "removePasscodePressed()"} Remove Passcode + %div{"ng-if" => "!passcodeOptionAvailable()"} + %p Passcode lock is only available to permanent sessions. (You chose not to stay signed in.) - .panel-section{"ng-if" => "!importData.loading"} - %h3.title Data Backups - %div{"ng-if" => "encryptedBackupsAvailable()"} - %label.normal.inline - %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "true", "ng-change" => "archiveFormData.encrypted = true"} - Encrypted - %label.normal.inline - %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"} - Decrypted + .panel-section{"ng-if" => "!importData.loading"} + %h3.title Data Backups + %div{"ng-if" => "encryptedBackupsAvailable()"} + %label.normal.inline + %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "true", "ng-change" => "archiveFormData.encrypted = true"} + Encrypted + %label.normal.inline + %input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"} + Decrypted - .button-group - .button.info{"ng-click" => "downloadDataArchive()", "ng-class" => "{'mt-5' : !user}"} - .label Download Backup + .button-group + .button.info{"ng-click" => "downloadDataArchive()", "ng-class" => "{'mt-5' : !user}"} + .label Download Backup - %label.button.info - %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"} - .label Import From Backup + %label.button.info + %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"} + .label Import From Backup - %div{"ng-if" => "importData.requestPassword"} - %form{"ng-submit" => "submitImportPassword()"} - %p Enter the account password associated with the import file. - %input.form-control.mt-5{:type => 'password', "ng-model" => "importData.password", "autofocus" => "true"} - %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Decrypt & Import + %div{"ng-if" => "importData.requestPassword"} + %form{"ng-submit" => "submitImportPassword()"} + %p Enter the account password associated with the import file. + %input.form-control.mt-5{:type => 'password', "ng-model" => "importData.password", "autofocus" => "true"} + %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Decrypt & Import - %p.mt-5{"ng-if" => "user"} Notes are downloaded in the Standard File format, which allows you to re-import back into this app easily. To download as plain text files, choose "Decrypted". + %p.mt-5{"ng-if" => "user"} Notes are downloaded in the Standard File format, which allows you to re-import back into this app easily. To download as plain text files, choose "Decrypted". - .spinner.mt-10{"ng-if" => "importData.loading"} + .spinner.mt-10{"ng-if" => "importData.loading"} .footer - %a#signout-button{"ng-click" => "destroyLocalData()"} {{ user ? "Sign out and clear local data" : "Clear all local data" }} + %a.right{"ng-if" => "formData.showLogin || formData.showRegister", "ng-click" => "formData.showLogin = false; formData.showRegister = false;"} + Cancel + %a.right{"ng-if" => "!formData.showLogin && !formData.showRegister", "ng-click" => "destroyLocalData()"} + {{ user ? "Sign out and clear local data" : "Clear all local data" }} diff --git a/vendor/assets/stylesheets/stylekit.css b/vendor/assets/stylesheets/stylekit.css index 8ed3df59f..d169ed8f3 100644 --- a/vendor/assets/stylesheets/stylekit.css +++ b/vendor/assets/stylesheets/stylekit.css @@ -6,12 +6,12 @@ .sn-component .panel { box-shadow: 0px 2px 13px #C8C8C8; border-radius: 0.7rem; - overflow: hidden; + overflow: scroll; } .sn-component .panel .header { display: flex; justify-content: space-between; - padding: 1.1rem 1.8rem; + padding: 1.1rem 2rem; border-bottom: 1px solid #E1E1E1; background-color: #F6F6F6; align-items: center; @@ -20,11 +20,19 @@ font-weight: bold; } .sn-component .panel .footer { - padding: 1rem 1.8rem; + padding: 1rem 2rem; border-top: 1px solid #F1F1F1; } +.sn-component .panel .footer .left { + text-align: right; + display: block; +} +.sn-component .panel .footer .right { + text-align: right; + display: block; +} .sn-component .panel .content { - padding: 1.4rem 1.8rem; + padding: 1.9rem 2rem; padding-bottom: 0; } .sn-component .panel .content p { @@ -35,7 +43,7 @@ font-weight: bold; } .sn-component .panel .content .panel-section { - padding-bottom: 1.4rem; + padding-bottom: 1.6rem; } .sn-component .panel .content .panel-section.hero { text-align: center; @@ -66,6 +74,19 @@ color: #086DD6; margin-top: -4px; } +.sn-component .panel .content .panel-section .panel-row { + display: block; + padding: 0.4rem 0; +} +.sn-component .panel .content .panel-form { + width: 100%; +} +.sn-component .panel .content .panel-form.half { + width: 50%; +} +.sn-component .panel .content .panel-form .form-submit { + margin-top: 0.15rem; +} .sn-component .red { color: #F80324; } @@ -98,32 +119,72 @@ .sn-component p { margin: 0.5rem 0; } +.sn-component input { + box-sizing: border-box; + padding: 0.75rem 0.8rem; + margin: 0.30rem 0; + border-radius: 3px; + border: 1px solid #e1e1e1; + font-size: 1.1rem; + width: 100%; + outline: 0; +} +.sn-component input.info { + border-color: #086DD6; + background-color: transparent; +} +.sn-component label { + margin: 0.7rem 0; + display: block; + font-size: 1.1rem; +} +.sn-component label input[type='checkbox'] { + width: auto; + margin-right: 0.5rem; + /* Space after checkbox */ +} +.sn-component .checkbox-group { + padding-top: 0.5rem; + padding-bottom: 0.3rem; +} +.sn-component ::placeholder { + /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: #c4c4c4; +} +.sn-component :-ms-input-placeholder { + /* Internet Explorer 10-11 */ + color: #c4c4c4; +} +.sn-component ::-ms-input-placeholder { + /* Microsoft Edge */ + color: #c4c4c4; +} .sn-component .button-group.stretch { display: flex; } -.sn-component .button-group.stretch .button, .sn-component .button-group.stretch .box { +.sn-component .button-group.stretch .button, .sn-component .button-group.stretch .box, .sn-component .button-group.stretch .notification { display: block; flex-grow: 1; text-align: center; } -.sn-component .button-group .button, .sn-component .button-group .box { +.sn-component .button-group .button, .sn-component .button-group .box, .sn-component .button-group .notification { display: inline-block; margin-bottom: 5px; } -.sn-component .button-group .button:not(:last-child), .sn-component .button-group .box:not(:last-child) { +.sn-component .button-group .button:not(:last-child), .sn-component .button-group .box:not(:last-child), .sn-component .button-group .notification:not(:last-child) { margin-right: 5px; } -.sn-component .button-group .button:not(:last-child).featured, .sn-component .button-group .box:not(:last-child).featured { +.sn-component .button-group .button:not(:last-child).featured, .sn-component .button-group .box:not(:last-child).featured, .sn-component .button-group .notification:not(:last-child).featured { margin-right: 8px; } -.sn-component .box-group .box { +.sn-component .box-group .box, .sn-component .box-group .notification { display: inline-block; margin-bottom: 5px; } -.sn-component .box-group .box:not(:last-child) { +.sn-component .box-group .box:not(:last-child), .sn-component .box-group .notification:not(:last-child) { margin-right: 5px; } -.sn-component .button, .sn-component .box { +.sn-component .button, .sn-component .box, .sn-component .notification { display: table; border-radius: 3px; padding: 0.5rem 0.7rem; @@ -132,70 +193,86 @@ text-align: center; border: 1px solid; } -.sn-component .button .label, .sn-component .box .label, .sn-component .button .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .button .subtitle, .sn-component .box .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .box .subtitle { +.sn-component .button .label, .sn-component .box .label, .sn-component .notification .label, .sn-component .button .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .button .subtitle, .sn-component .box .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .box .subtitle, .sn-component .notification .panel .content .panel-section .subtitle, .sn-component .panel .content .panel-section .notification .subtitle { font-weight: bold; display: block; text-align: center; } -.sn-component .box { +.sn-component .box, .sn-component .notification { padding: 2.5rem 1.5rem; } -.sn-component .info { +.sn-component .button.info, .sn-component .info.box, .sn-component .info.notification, .sn-component .box.info, .sn-component .info.notification, .sn-component .notification.info { background-color: rgba(8, 109, 214, 0.1); border-color: #086DD6; color: #086DD6; } -.sn-component .info:hover { +.sn-component .button.info:hover, .sn-component .info.box:hover, .sn-component .info.notification:hover, .sn-component .box.info:hover, .sn-component .info.notification:hover, .sn-component .notification.info:hover { background-color: #d5e9fd; color: #0975e5; } -.sn-component .info.featured { +.sn-component .button.info.featured, .sn-component .info.featured.box, .sn-component .info.featured.notification, .sn-component .box.info.featured, .sn-component .info.featured.notification, .sn-component .notification.info.featured { background-color: #086DD6; border: none; color: white; - padding: 0.75rem 0; + padding: 0.75rem 1.25rem; font-size: 1.1rem; } -.sn-component .info.featured:hover { +.sn-component .button.info.featured:hover, .sn-component .info.featured.box:hover, .sn-component .info.featured.notification:hover, .sn-component .box.info.featured:hover, .sn-component .info.featured.notification:hover, .sn-component .notification.info.featured:hover { background-color: #1181f6; } -.sn-component .warning { - background-color: rgba(214, 173, 8, 0.1); - border-color: #D6AD08; - color: #D6AD08; +.sn-component .button.warning, .sn-component .warning.box, .sn-component .warning.notification, .sn-component .box.warning, .sn-component .warning.notification, .sn-component .notification.warning { + background-color: rgba(246, 162, 0, 0.1); + border-color: #f6a200; + color: #f6a200; } -.sn-component .warning:hover { - background-color: #fdf5d5; - color: #e5b909; +.sn-component .button.warning:hover, .sn-component .warning.box:hover, .sn-component .warning.notification:hover, .sn-component .box.warning:hover, .sn-component .warning.notification:hover, .sn-component .notification.warning:hover { + background-color: #fff8ec; + color: #ffaa06; } -.sn-component .warning.featured { - background-color: #D6AD08; +.sn-component .button.warning.featured, .sn-component .warning.featured.box, .sn-component .warning.featured.notification, .sn-component .box.warning.featured, .sn-component .warning.featured.notification, .sn-component .notification.warning.featured { + background-color: #f6a200; border: none; color: white; - padding: 0.75rem 0; + padding: 0.75rem 1.25rem; font-size: 1.1rem; } -.sn-component .warning.featured:hover { - background-color: #f6c811; +.sn-component .button.warning.featured:hover, .sn-component .warning.featured.box:hover, .sn-component .warning.featured.notification:hover, .sn-component .box.warning.featured:hover, .sn-component .warning.featured.notification:hover, .sn-component .notification.warning.featured:hover { + background-color: #ffb320; } -.sn-component .danger { +.sn-component .button.danger, .sn-component .danger.box, .sn-component .danger.notification, .sn-component .box.danger, .sn-component .danger.notification, .sn-component .notification.danger { background-color: rgba(248, 3, 36, 0.1); border-color: #F80324; color: #F80324; } -.sn-component .danger:hover { +.sn-component .button.danger:hover, .sn-component .danger.box:hover, .sn-component .danger.notification:hover, .sn-component .box.danger:hover, .sn-component .danger.notification:hover, .sn-component .notification.danger:hover { background-color: #fff1f3; color: #fc0e2e; } -.sn-component .danger.featured { +.sn-component .button.danger.featured, .sn-component .danger.featured.box, .sn-component .danger.featured.notification, .sn-component .box.danger.featured, .sn-component .danger.featured.notification, .sn-component .notification.danger.featured { background-color: #F80324; border: none; color: white; - padding: 0.75rem 0; + padding: 0.75rem 1.25rem; font-size: 1.1rem; } -.sn-component .danger.featured:hover { +.sn-component .button.danger.featured:hover, .sn-component .danger.featured.box:hover, .sn-component .danger.featured.notification:hover, .sn-component .box.danger.featured:hover, .sn-component .danger.featured.notification:hover, .sn-component .notification.danger.featured:hover { background-color: #fc2744; } +.sn-component .notification { + padding: 1.1rem 1rem; + margin: 1.4rem 0; + text-align: left; + border-radius: 0.2rem; + cursor: default; +} +.sn-component .notification.stretch { + width: 100%; +} +.sn-component .notification .text { + line-height: 1.5rem; + font-size: 1.05rem; + text-align: left; + font-weight: normal; +} /*# sourceMappingURL=stylekit.css.map */