StyleKit wip/
This commit is contained in:
Mo Bitar
@@ -16,54 +16,15 @@ h2 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
background-color: #f1f1f1;
|
||||
border-top: 1px solid rgba(black, 0.04);
|
||||
background-color: #F6F6F6;
|
||||
border-top: 1px solid #D3D3D3;
|
||||
height: $footer-height;
|
||||
max-height: $footer-height;
|
||||
z-index: 100;
|
||||
font-size: 10px;
|
||||
color: $dark-gray;
|
||||
|
||||
.medium-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
|
||||
&.gray {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
&.block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 2px 0px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 4px;
|
||||
font-size: 13px;
|
||||
.pull-left, .pull-right {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
section {
|
||||
@@ -80,16 +41,103 @@ h2 {
|
||||
}
|
||||
|
||||
input {
|
||||
// margin-bottom: 10px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
#room-bar {
|
||||
display: inline-block;
|
||||
border-left: 1px solid gray;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
#footer-bar .footer-bar-link {
|
||||
margin-left: 10px;
|
||||
&:not(:first-child) {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
z-index: 1000;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> .label {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #515263;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $blue-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bar-link .panel {
|
||||
max-height: 85vh;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
left: 10px;
|
||||
bottom: 40px;
|
||||
min-width: 300px;
|
||||
z-index: 1000;
|
||||
margin-top: 15px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#account-panel {
|
||||
width: 400px;
|
||||
|
||||
#signout-button {
|
||||
text-align: right;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
a.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.icon.ion-locked {
|
||||
margin-left: 5px;
|
||||
border-left: 1px solid gray;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Global Ext Menu */
|
||||
|
||||
.ext-section {
|
||||
|
||||
min-height: 50px;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
&.opened {
|
||||
h1 {
|
||||
padding-top: 0px;
|
||||
// padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#room-bar {
|
||||
display: inline-block;
|
||||
border-left: 1px solid rgba(black, 0.1);
|
||||
padding-left: 15px;
|
||||
padding-right: 10px;
|
||||
margin-left: 15px;
|
||||
position: relative;
|
||||
|
||||
.room-item {
|
||||
@@ -132,123 +180,8 @@ h2 {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#footer-bar .footer-bar-link {
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
margin-left: 8px;
|
||||
color: #515263;
|
||||
|
||||
z-index: 1000;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
user-select: none;
|
||||
|
||||
> a {
|
||||
color: #515263;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bar-link .panel {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
|
||||
max-height: 85vh;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 20px;
|
||||
min-width: 300px;
|
||||
z-index: 1000;
|
||||
margin-top: 15px;
|
||||
|
||||
box-shadow: 0px 0px 15px rgba(black, 0.2);
|
||||
border: none;
|
||||
cursor: default;
|
||||
overflow: auto;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
button.light {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0px;
|
||||
font-size: 12px;
|
||||
height: 30px;
|
||||
padding-top: 3px;
|
||||
text-align: center;
|
||||
margin-bottom: 6px;
|
||||
background-color: white;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(gray, 0.15);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(gray, 0.10);
|
||||
}
|
||||
}
|
||||
|
||||
.half-button {
|
||||
$spacing: 2px;
|
||||
width: calc(50% - #{$spacing});
|
||||
margin-left: $spacing/2.0;
|
||||
margin-right: $spacing/2.0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.gray-bg {
|
||||
background-color: #f6f6f6;
|
||||
border: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
.white-bg {
|
||||
background-color: white;
|
||||
border: 1px solid rgba(gray, 0.2);
|
||||
}
|
||||
|
||||
a.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.icon.ion-locked {
|
||||
margin-left: 5px;
|
||||
border-left: 1px solid gray;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Global Ext Menu */
|
||||
|
||||
.ext-section {
|
||||
|
||||
min-height: 50px;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
&.opened {
|
||||
h1 {
|
||||
padding-top: 0px;
|
||||
// padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.spinner {
|
||||
|
||||
@@ -66,7 +66,7 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
font-size: 20px;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
background-color: $bg-color;
|
||||
}
|
||||
@@ -108,7 +108,7 @@ p {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
$footer-height: 25px;
|
||||
$footer-height: 32px;
|
||||
|
||||
.app {
|
||||
height: calc(100% - #{$footer-height});
|
||||
|
||||
@@ -81,34 +81,34 @@ $screen-md-max: ($screen-lg-min - 1) !default;
|
||||
|
||||
button:focus {outline:0;}
|
||||
|
||||
|
||||
.button-group {
|
||||
clear: both;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.ui-button {
|
||||
background-color: $blue-color;
|
||||
border: 0;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
min-height: 36px;
|
||||
font-size: 14px;
|
||||
|
||||
&.block {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
//
|
||||
// .button-group {
|
||||
// clear: both;
|
||||
// height: 36px;
|
||||
// }
|
||||
//
|
||||
// .ui-button {
|
||||
// background-color: $blue-color;
|
||||
// border: 0;
|
||||
// color: white;
|
||||
// font-weight: bold;
|
||||
// min-height: 36px;
|
||||
// font-size: 14px;
|
||||
//
|
||||
// &.block {
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
.panel {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
min-width: 300px;
|
||||
z-index: 1000;
|
||||
margin-top: 10px;
|
||||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
|
||||
border: none;
|
||||
background-color: white;
|
||||
// margin-top: 10px;
|
||||
// box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
|
||||
// border: none;
|
||||
// background-color: white;
|
||||
}
|
||||
|
||||
.panel-right {
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
.panel.panel-default.panel-right.account-data-menu
|
||||
.panel-body.large-padding
|
||||
%div{"ng-if" => "!user"}
|
||||
|
||||
-# Account Section
|
||||
.mb-10
|
||||
|
||||
.sn-component
|
||||
.panel.panel-right#account-panel
|
||||
.header
|
||||
%h1.title Account
|
||||
%a.close-button Close
|
||||
.content
|
||||
.panel-section.hero{"ng-if" => "!user"}
|
||||
.step-one{"ng-if" => "!formData.showLogin && !formData.showRegister && !formData.mfa"}
|
||||
%h3 Sign in or register to enable sync and end-to-end encryption.
|
||||
.small-v-space
|
||||
|
||||
.button-group.mt-5
|
||||
%button.ui-button.half-button{"ng-click" => "formData.showLogin = true"}
|
||||
%span Sign In
|
||||
%button.ui-button.half-button{"ng-click" => "formData.showRegister = true"}
|
||||
%span Register
|
||||
%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
|
||||
@@ -52,9 +52,8 @@
|
||||
|
||||
%em.block.center-align.mt-10{"ng-if" => "formData.status", "style" => "font-size: 14px;"} {{formData.status}}
|
||||
|
||||
-# End account section
|
||||
|
||||
%div{"ng-if" => "user"}
|
||||
.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"}
|
||||
@@ -116,24 +115,25 @@
|
||||
%p.tinted Processing...
|
||||
|
||||
|
||||
.mt-25
|
||||
%h4 Encryption Status
|
||||
.panel-section
|
||||
%h3.title Encryption
|
||||
%p
|
||||
{{encryptionStatusString()}}
|
||||
%div.mt-5{"ng-if" => "encryptionEnabled()"}
|
||||
%i {{encryptionStatusForNotes()}}
|
||||
|
||||
.mt-25
|
||||
%h4 Passcode Lock
|
||||
.panel-section
|
||||
%h3.title Passcode Lock
|
||||
%div{"ng-if" => "!hasPasscode() && passcodeOptionAvailable()"}
|
||||
%p Add an app passcode to lock the app and encrypt on-device key storage.
|
||||
%a.block.mt-5{"ng-click" => "addPasscodeClicked()", "ng-if" => "!formData.showPasscodeForm"} Add Passcode
|
||||
.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.
|
||||
@@ -144,9 +144,9 @@
|
||||
|
||||
|
||||
|
||||
.mt-25{"ng-if" => "!importData.loading"}
|
||||
%h4 Data Archives
|
||||
.mt-5{"ng-if" => "encryptedBackupsAvailable()"}
|
||||
.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
|
||||
@@ -154,11 +154,13 @@
|
||||
%input{"type" => "radio", "ng-model" => "archiveFormData.encrypted", "ng-value" => "false", "ng-change" => "archiveFormData.encrypted = false"}
|
||||
Decrypted
|
||||
|
||||
%a.block.mt-5{"ng-click" => "downloadDataArchive()", "ng-class" => "{'mt-5' : !user}"} Download Data Archive
|
||||
.button-group
|
||||
.button.info{"ng-click" => "downloadDataArchive()", "ng-class" => "{'mt-5' : !user}"}
|
||||
.label Download Backup
|
||||
|
||||
%label.block.mt-5
|
||||
%label.button.info
|
||||
%input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"}
|
||||
.fake-link.tinted Import Data from Archive
|
||||
.label Import From Backup
|
||||
|
||||
%div{"ng-if" => "importData.requestPassword"}
|
||||
%form{"ng-submit" => "submitImportPassword()"}
|
||||
@@ -169,5 +171,5 @@
|
||||
%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"}
|
||||
|
||||
%a.block.mt-25.red{"ng-click" => "destroyLocalData()"} {{ user ? "Sign out and clear local data" : "Clear all local data" }}
|
||||
.footer
|
||||
%a#signout-button{"ng-click" => "destroyLocalData()"} {{ user ? "Sign out and clear local data" : "Clear all local data" }}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.background{"ng-click" => "dismiss()"}
|
||||
.background{"ng-click" => "deny()"}
|
||||
|
||||
.content
|
||||
%h3 The following extension has requested these permissions:
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
#footer-bar
|
||||
.pull-left
|
||||
.footer-bar-link{"click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"}
|
||||
%a{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account
|
||||
%a.label{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account
|
||||
%account-menu{"ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess"}
|
||||
|
||||
.footer-bar-link{"click-outside" => "ctrl.showExtensionsMenu = false;", "is-open" => "ctrl.showExtensionsMenu"}
|
||||
%a{"ng-click" => "ctrl.toggleExtensions()"} Extensions
|
||||
%a.label{"ng-click" => "ctrl.toggleExtensions()"} Extensions
|
||||
%global-extensions-menu{"ng-if" => "ctrl.showExtensionsMenu"}
|
||||
|
||||
.footer-bar-link
|
||||
%a{"href" => "https://standardnotes.org/help", "target" => "_blank"}
|
||||
%a.label{"href" => "https://standardnotes.org/help", "target" => "_blank"}
|
||||
Help
|
||||
|
||||
%room-bar#room-bar
|
||||
@@ -21,13 +21,13 @@
|
||||
|
||||
.footer-bar-link{"style" => "margin-right: 5px;"}
|
||||
%span{"ng-if" => "ctrl.lastSyncDate", "style" => "float: left; font-weight: normal; margin-right: 8px;"}
|
||||
%span{"ng-if" => "!ctrl.isRefreshing"}
|
||||
%span.label{"ng-if" => "!ctrl.isRefreshing"}
|
||||
Last refreshed {{ctrl.lastSyncDate | appDateTime}}
|
||||
%span{"ng-if" => "ctrl.isRefreshing"}
|
||||
.spinner{"style" => "margin-top: 2px;"}
|
||||
|
||||
%strong{"ng-if" => "ctrl.offline"} Offline
|
||||
%a{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"} Refresh
|
||||
%strong.label{"ng-if" => "ctrl.offline"} Offline
|
||||
%a.label{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"} Refresh
|
||||
|
||||
%span{"ng-if" => "ctrl.hasPasscode()"}
|
||||
%span.label{"ng-if" => "ctrl.hasPasscode()"}
|
||||
%i.icon.ion-locked{"ng-if" => "ctrl.hasPasscode()", "ng-click" => "ctrl.lockApp()"}
|
||||
|
||||
@@ -39,6 +39,7 @@
|
||||
<%= javascript_include_tag "compiled.min.js", debug: false %>
|
||||
<% end %>
|
||||
<%= stylesheet_link_tag "app", media: "all", debug: false %>
|
||||
<%= stylesheet_link_tag 'stylekit.css', media: 'all', 'data-turbolinks-track' => true %>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
|
||||
# Precompile additional assets.
|
||||
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
|
||||
# Rails.application.config.assets.precompile += %w( search.js )
|
||||
Rails.application.config.assets.precompile += %w( app.css compiled.min.js compiled.js )
|
||||
Rails.application.config.assets.precompile += %w( stylekit.css app.css compiled.min.js compiled.js )
|
||||
|
||||
# zip library
|
||||
Rails.application.config.assets.precompile += %w( zip/zip.js zip/z-worker.js zip/inflate.js zip/deflate.js )
|
||||
|
||||
201
vendor/assets/stylesheets/stylekit.css
vendored
Normal file
201
vendor/assets/stylesheets/stylekit.css
vendored
Normal file
@@ -0,0 +1,201 @@
|
||||
.sn-component {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
user-select: none;
|
||||
}
|
||||
.sn-component .panel {
|
||||
box-shadow: 0px 2px 13px #C8C8C8;
|
||||
border-radius: 0.7rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sn-component .panel .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1.1rem 1.8rem;
|
||||
border-bottom: 1px solid #E1E1E1;
|
||||
background-color: #F6F6F6;
|
||||
align-items: center;
|
||||
}
|
||||
.sn-component .panel .header .close-button {
|
||||
font-weight: bold;
|
||||
}
|
||||
.sn-component .panel .footer {
|
||||
padding: 1rem 1.8rem;
|
||||
border-top: 1px solid #F1F1F1;
|
||||
}
|
||||
.sn-component .panel .content {
|
||||
padding: 1.4rem 1.8rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.sn-component .panel .content p {
|
||||
color: #454545;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.sn-component .panel .content .label, .sn-component .panel .content .panel-section .subtitle {
|
||||
font-weight: bold;
|
||||
}
|
||||
.sn-component .panel .content .panel-section {
|
||||
padding-bottom: 1.4rem;
|
||||
}
|
||||
.sn-component .panel .content .panel-section.hero {
|
||||
text-align: center;
|
||||
}
|
||||
.sn-component .panel .content .panel-section.hero .title {
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
.sn-component .panel .content .panel-section p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.sn-component .panel .content .panel-section:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
}
|
||||
.sn-component .panel .content .panel-section:last-child {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.sn-component .panel .content .panel-section .outer-title {
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
padding-bottom: 0.9rem;
|
||||
margin-top: 2.1rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.sn-component .panel .content .panel-section .title {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.sn-component .panel .content .panel-section .subtitle {
|
||||
color: #086DD6;
|
||||
margin-top: -4px;
|
||||
}
|
||||
.sn-component .red {
|
||||
color: #F80324;
|
||||
}
|
||||
.sn-component .tinted {
|
||||
color: #086DD6;
|
||||
}
|
||||
.sn-component h1, .sn-component h2, .sn-component h3, .sn-component h4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.sn-component h1 {
|
||||
font-weight: 500;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.sn-component h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.sn-component h3 {
|
||||
font-weight: normal;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.sn-component h4 {
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.sn-component a {
|
||||
color: #086DD6;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sn-component p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.sn-component .button-group.stretch {
|
||||
display: flex;
|
||||
}
|
||||
.sn-component .button-group.stretch .button, .sn-component .button-group.stretch .box {
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.sn-component .button-group .button, .sn-component .button-group .box {
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.sn-component .button-group .button:not(:last-child), .sn-component .button-group .box:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.sn-component .button-group .button:not(:last-child).featured, .sn-component .button-group .box:not(:last-child).featured {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.sn-component .box-group .box {
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.sn-component .box-group .box:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.sn-component .button, .sn-component .box {
|
||||
display: table;
|
||||
border-radius: 3px;
|
||||
padding: 0.5rem 0.7rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
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 {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
.sn-component .box {
|
||||
padding: 2.5rem 1.5rem;
|
||||
}
|
||||
.sn-component .info {
|
||||
background-color: rgba(8, 109, 214, 0.1);
|
||||
border-color: #086DD6;
|
||||
color: #086DD6;
|
||||
}
|
||||
.sn-component .info:hover {
|
||||
background-color: #d5e9fd;
|
||||
color: #0975e5;
|
||||
}
|
||||
.sn-component .info.featured {
|
||||
background-color: #086DD6;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 0.75rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.sn-component .info.featured:hover {
|
||||
background-color: #1181f6;
|
||||
}
|
||||
.sn-component .warning {
|
||||
background-color: rgba(214, 173, 8, 0.1);
|
||||
border-color: #D6AD08;
|
||||
color: #D6AD08;
|
||||
}
|
||||
.sn-component .warning:hover {
|
||||
background-color: #fdf5d5;
|
||||
color: #e5b909;
|
||||
}
|
||||
.sn-component .warning.featured {
|
||||
background-color: #D6AD08;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 0.75rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.sn-component .warning.featured:hover {
|
||||
background-color: #f6c811;
|
||||
}
|
||||
.sn-component .danger {
|
||||
background-color: rgba(248, 3, 36, 0.1);
|
||||
border-color: #F80324;
|
||||
color: #F80324;
|
||||
}
|
||||
.sn-component .danger:hover {
|
||||
background-color: #fff1f3;
|
||||
color: #fc0e2e;
|
||||
}
|
||||
.sn-component .danger.featured {
|
||||
background-color: #F80324;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 0.75rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.sn-component .danger.featured:hover {
|
||||
background-color: #fc2744;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=stylekit.css.map */
|
||||
Reference in New Issue
Block a user