129 lines
4.7 KiB
Plaintext
129 lines
4.7 KiB
Plaintext
.card
|
|
.card-body
|
|
%h1= t(".heading")
|
|
%p.lead= t(".lead")
|
|
= t(".body_html")
|
|
|
|
- if current_user.theme
|
|
.pull-right
|
|
= button_to t(".delete"), delete_user_theme_path, data: { confirm: t("voc.confirm") }, tabindex: -1, method: :delete, class: "btn btn-danger"
|
|
= bootstrap_form_for(current_user.theme || Theme.new, url: { action: "update_theme" }, html: { id: "update_theme" }, method: :patch) do |f|
|
|
.card
|
|
.card-body
|
|
%h2 General
|
|
%p
|
|
Here you'll find general page values that are basically visible all across the page.
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :background_color, class: 'color', data: { default: 0xF0EDF4 }
|
|
.col-sm-6
|
|
= f.text_field :body_text, class: 'color', data: { default: 0x000000 }
|
|
.card
|
|
.card-body
|
|
%h2 Colors
|
|
%p
|
|
Colors you can find used on the site. The names of the colors usually describe the context.
|
|
The "text" colors for all styles represent the color that text on top of these colors has.
|
|
|
|
%ul
|
|
%li
|
|
%b Primary:
|
|
The primary/brand color of the site, used for navigation, links, etc.
|
|
%li
|
|
%b Danger:
|
|
Color used for errors or critical actions like deleting something.
|
|
%li
|
|
%b Warning:
|
|
Color used for warnings if something non-critical has happened.
|
|
%li
|
|
%b Info:
|
|
Color used for informational popups or messages.
|
|
%li
|
|
%b Success:
|
|
Color used for messages if something went through successfully.
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :primary_color, class: 'color', data: { default: 0x5E35B1 }
|
|
.col-sm-6
|
|
= f.text_field :primary_text, class: 'color', data: { default: 0xFFFFFF }
|
|
.col-sm-12
|
|
.alert.alert-primary
|
|
A simple primary alert—check it out!
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :danger_color, class: 'color', data: { default: 0xDC3545 }
|
|
.col-sm-6
|
|
= f.text_field :danger_text, class: 'color', data: { default: 0xFFFFFF }
|
|
.col-sm-12
|
|
.alert.alert-danger
|
|
A simple danger alert—check it out!
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :warning_color, class: 'color', data: { default: 0xFFC107 }
|
|
.col-sm-6
|
|
= f.text_field :warning_text, class: 'color', data: { default: 0x292929 }
|
|
.col-sm-12
|
|
.alert.alert-warning
|
|
A simple warning alert—check it out!
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :info_color, class: 'color', data: { default: 0x17A2B8 }
|
|
.col-sm-6
|
|
= f.text_field :info_text, class: 'color', data: { default: 0xFFFFFF }
|
|
.col-sm-12
|
|
.alert.alert-info
|
|
A simple info alert—check it out!
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :success_color, class: 'color', data: { default: 0x28A745 }
|
|
.col-sm-6
|
|
= f.text_field :success_text, class: 'color', data: { default: 0xFFFFFF }
|
|
.col-sm-12
|
|
.alert.alert-success
|
|
A simple success alert—check it out!
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :dark_color, class: 'color', data: { default: 0x343A40 }
|
|
.col-sm-6
|
|
= f.text_field :dark_text, class: 'color', data: { default: 0xFFFFFF }
|
|
.col-sm-12
|
|
%a.btn.btn-dark.mb-3{ href: '#' } A dark button
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :light_color, class: 'color', data: { default: 0xF8F9FA }
|
|
.col-sm-6
|
|
= f.text_field :light_text, class: 'color', data: { default: 0xFFFFFF }
|
|
.col-sm-12
|
|
%a.btn.btn-light.mb-3{ href: '#' } A light button
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :muted_text, class: 'color', data: { default: 0x6C757D }
|
|
.col-sm-6
|
|
%p.pt-4.text-muted Some muted text
|
|
.card
|
|
.card-body
|
|
%h2 Forms and Inputs
|
|
%p
|
|
Styles for form inputs, like textfields.
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :input_color, class: 'color', data: { default: 0xFFFFFF }
|
|
.col-sm-6
|
|
= f.text_field :input_text, class: 'color', data: { default: 0x000000 }
|
|
.card
|
|
.card-body
|
|
%h2 Raised Content
|
|
%p
|
|
Raised content basically describes all the different boxes and panels you can see across the site.
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :raised_background, class: 'color', data: { default: 0xFFFFFF }
|
|
.col-sm-6
|
|
= f.text_field :raised_accent, class: 'color', data: { default: 0xF7F7F7 }
|
|
.card-footer
|
|
%p Some text on top of a accented area on a raised element!
|
|
.card
|
|
.card-body
|
|
.pull-left
|
|
= f.submit t('views.actions.save'), class: 'btn btn-primary'
|