Styling wip
This commit is contained in:
Mo Bitar
@@ -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 {
|
||||
|
||||
@@ -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" }}
|
||||
|
||||
149
vendor/assets/stylesheets/stylekit.css
vendored
149
vendor/assets/stylesheets/stylekit.css
vendored
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user