update views and styles to use classes for common styles.
This commit is contained in:
parent
8c94c176c9
commit
8db72adbe5
|
@ -8,7 +8,7 @@
|
||||||
// $sidebar-width: 242px;
|
// $sidebar-width: 242px;
|
||||||
|
|
||||||
// Active Admin's got SASS!
|
// Active Admin's got SASS!
|
||||||
@import "active_admin/mixins";
|
// @import "active_admin/mixins";
|
||||||
@import "arctic_admin/base";
|
@import "arctic_admin/base";
|
||||||
|
|
||||||
// Overriding any non-variable SASS must be done after the fact.
|
// Overriding any non-variable SASS must be done after the fact.
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
$primary-gradient: linear-gradient(141deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%);
|
$primary-gradient: linear-gradient(141deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%);
|
||||||
|
|
||||||
@import "bulma"; // https://bulma.io/documentation/
|
@import "bulma"; // https://bulma.io/documentation/
|
||||||
@import "./devise";
|
@import "./shared/all";
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background-image: radial-gradient(circle at 13% 47%, rgba(140, 140, 140,0.03) 0%, rgba(140, 140, 140,0.03) 25%,transparent 25%, transparent 100%),radial-gradient(circle at 28% 63%, rgba(143, 143, 143,0.03) 0%, rgba(143, 143, 143,0.03) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 81% 56%, rgba(65, 65, 65,0.03) 0%, rgba(65, 65, 65,0.03) 12%,transparent 12%, transparent 100%),radial-gradient(circle at 26% 48%, rgba(60, 60, 60,0.03) 0%, rgba(60, 60, 60,0.03) 6%,transparent 6%, transparent 100%),radial-gradient(circle at 97% 17%, rgba(150, 150, 150,0.03) 0%, rgba(150, 150, 150,0.03) 56%,transparent 56%, transparent 100%),radial-gradient(circle at 50% 100%, rgba(25, 25, 25,0.03) 0%, rgba(25, 25, 25,0.03) 36%,transparent 36%, transparent 100%),radial-gradient(circle at 55% 52%, rgba(69, 69, 69,0.03) 0%, rgba(69, 69, 69,0.03) 6%,transparent 6%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
|
background-image: radial-gradient(circle at 13% 47%, rgba(140, 140, 140,0.03) 0%, rgba(140, 140, 140,0.03) 25%,transparent 25%, transparent 100%),radial-gradient(circle at 28% 63%, rgba(143, 143, 143,0.03) 0%, rgba(143, 143, 143,0.03) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 81% 56%, rgba(65, 65, 65,0.03) 0%, rgba(65, 65, 65,0.03) 12%,transparent 12%, transparent 100%),radial-gradient(circle at 26% 48%, rgba(60, 60, 60,0.03) 0%, rgba(60, 60, 60,0.03) 6%,transparent 6%, transparent 100%),radial-gradient(circle at 97% 17%, rgba(150, 150, 150,0.03) 0%, rgba(150, 150, 150,0.03) 56%,transparent 56%, transparent 100%),radial-gradient(circle at 50% 100%, rgba(25, 25, 25,0.03) 0%, rgba(25, 25, 25,0.03) 36%,transparent 36%, transparent 100%),radial-gradient(circle at 55% 52%, rgba(69, 69, 69,0.03) 0%, rgba(69, 69, 69,0.03) 6%,transparent 6%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
|
||||||
|
|
|
@ -1,15 +0,0 @@
|
||||||
#registrations, #passwords {
|
|
||||||
padding-top: $size-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#registrations-column {
|
|
||||||
background-color: $white;
|
|
||||||
padding: $size-6;
|
|
||||||
}
|
|
||||||
|
|
||||||
#registrations-column-form, #registrations-column-form-submit-button,
|
|
||||||
#registration-edit-account-deletion-container, #registrations-edit-passwords,
|
|
||||||
#registrations-edit-update-password, #passwords-column-form, #unlocks-column-form,
|
|
||||||
#confirmations-column-form {
|
|
||||||
padding: $size-3;
|
|
||||||
}
|
|
|
@ -0,0 +1 @@
|
||||||
|
@import "./spacing";
|
|
@ -0,0 +1,12 @@
|
||||||
|
.top-p__1 {
|
||||||
|
padding-top: $size-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.with-background-p__6 {
|
||||||
|
background-color: $white;
|
||||||
|
padding: $size-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p__3 {
|
||||||
|
padding: $size-3;
|
||||||
|
}
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="container is-fluid" id="passwords">
|
<div class="container is-fluid top-p__1">
|
||||||
<div class="columns is-centered is-mobile">
|
<div class="columns is-centered is-mobile">
|
||||||
<div id="registrations-column" class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop">
|
<div class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop with-background-p__6">
|
||||||
<section class="hero is-primary">
|
<section class="hero is-primary">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
@ -11,7 +11,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div id="confirmations-column-form">
|
<div class="p__3">
|
||||||
<%= simple_form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
|
<%= simple_form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<%= f.label :email, class: "label" %>
|
<%= f.label :email, class: "label" %>
|
||||||
|
@ -33,7 +33,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<p class="control" id="registrations-column-form-submit-button">
|
<p class="control p__3">
|
||||||
<%= f.button :submit, "Resend confirmation", class: "button is-primary is-fullwidth is-rounded" %>
|
<%= f.button :submit, "Resend confirmation", class: "button is-primary is-fullwidth is-rounded" %>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="container is-fluid" id="passwords">
|
<div class="container is-fluid top-p__1">
|
||||||
<div class="columns is-centered is-mobile">
|
<div class="columns is-centered is-mobile">
|
||||||
<div id="registrations-column" class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop">
|
<div class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop with-background-p__6">
|
||||||
<section class="hero is-primary">
|
<section class="hero is-primary">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
@ -11,7 +11,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div id="passwords-column-form">
|
<div class="p__3">
|
||||||
<%= simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
|
<%= simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
|
||||||
<%= f.input :reset_password_token, as: :hidden %>
|
<%= f.input :reset_password_token, as: :hidden %>
|
||||||
<%= f.full_error :reset_password_token %>
|
<%= f.full_error :reset_password_token %>
|
||||||
|
@ -53,7 +53,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<p class="control" id="registrations-column-form-submit-button">
|
<p class="control p__3">
|
||||||
<%= f.button :submit, "Update password", class: "button is-primary is-fullwidth is-rounded" %>
|
<%= f.button :submit, "Update password", class: "button is-primary is-fullwidth is-rounded" %>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="container is-fluid" id="passwords">
|
<div class="container is-fluid top-p__1">
|
||||||
<div class="columns is-centered is-mobile">
|
<div class="columns is-centered is-mobile">
|
||||||
<div id="registrations-column" class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop">
|
<div class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop with-background-p__6">
|
||||||
<section class="hero is-primary">
|
<section class="hero is-primary">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
@ -11,7 +11,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div id="passwords-column-form">
|
<div class="p__3">
|
||||||
<%= simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
|
<%= simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<%= f.label :email, class: "label" %>
|
<%= f.label :email, class: "label" %>
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<p class="control" id="registrations-column-form-submit-button">
|
<p class="control p__3">
|
||||||
<%= f.button :submit, "Reset password", class: "button is-primary is-fullwidth is-rounded" %>
|
<%= f.button :submit, "Reset password", class: "button is-primary is-fullwidth is-rounded" %>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="container is-fluid" id="registrations" data-controller="notification">
|
<div class="container is-fluid top-p__1" data-controller="notification">
|
||||||
<div class="columns is-centered">
|
<div class="columns is-centered">
|
||||||
<div id="registrations-column" class="column is-four-fifths is-two-thirds-tablet is-half-desktop">
|
<div class="p__3 column is-four-fifths is-two-thirds-tablet is-half-desktop">
|
||||||
<section class="hero is-primary">
|
<section class="hero is-primary">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
@ -11,7 +11,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div id="registrations-column-form">
|
<div class="p__3">
|
||||||
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
|
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
|
||||||
<div class="notification is-warning">
|
<div class="notification is-warning">
|
||||||
<button class="delete"></button>
|
<button class="delete"></button>
|
||||||
|
@ -35,8 +35,8 @@
|
||||||
<%= f.full_error :email, class: "help is-danger" %>
|
<%= f.full_error :email, class: "help is-danger" %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="registrations-edit-passwords">
|
<div class="p__3">
|
||||||
<%= link_to "Change password", "#", id: "registration-edit-password-button", class: "button is-fullwidth is-rounded" %>
|
<%= link_to "Change password", "#", id: "registration-edit-password-button", class: "p__3 button is-fullwidth is-rounded" %>
|
||||||
|
|
||||||
<div class="toggleable" id="registrations-edit-update-password">
|
<div class="toggleable" id="registrations-edit-update-password">
|
||||||
<div class="notification">
|
<div class="notification">
|
||||||
|
@ -88,7 +88,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<p class="control" id="registrations-column-form-submit-button">
|
<p class="control p__3">
|
||||||
<%= f.button :submit, "Update Account", class: "button is-primary is-fullwidth is-rounded" %>
|
<%= f.button :submit, "Update Account", class: "button is-primary is-fullwidth is-rounded" %>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -111,7 +111,7 @@
|
||||||
<div class="message-body">
|
<div class="message-body">
|
||||||
<strong>Warning!</strong> Account deletion is permanant and can not be recovered.
|
<strong>Warning!</strong> Account deletion is permanant and can not be recovered.
|
||||||
|
|
||||||
<div class="is-centered" id="registration-edit-account-deletion-container">
|
<div class="is-centered p__3">
|
||||||
<%= link_to "Delete My Account", registration_path(resource_name),
|
<%= link_to "Delete My Account", registration_path(resource_name),
|
||||||
data: { confirm: "Are you sure?" }, method: :delete,
|
data: { confirm: "Are you sure?" }, method: :delete,
|
||||||
class: "button is-danger is-two-thirds is-rounded" %>
|
class: "button is-danger is-two-thirds is-rounded" %>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="container is-fluid" id="registrations">
|
<div class="container is-fluid top-p__1">
|
||||||
<div class="columns is-centered is-mobile">
|
<div class="columns is-centered is-mobile">
|
||||||
<div id="registrations-column" class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop">
|
<div class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop with-background-p__6">
|
||||||
<section class="hero is-primary">
|
<section class="hero is-primary">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
@ -11,7 +11,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div id="registrations-column-form">
|
<div class="p__3">
|
||||||
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
|
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<%= f.label :email, class: "label" %>
|
<%= f.label :email, class: "label" %>
|
||||||
|
@ -58,7 +58,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<p class="control" id="registrations-column-form-submit-button">
|
<p class="control p__3">
|
||||||
<%= f.button :submit, "Sign up", class: "button is-primary is-fullwidth is-rounded" %>
|
<%= f.button :submit, "Sign up", class: "button is-primary is-fullwidth is-rounded" %>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="container is-fluid" id="registrations">
|
<div class="container is-fluid top-p__1">
|
||||||
<div class="columns is-centered">
|
<div class="columns is-centered">
|
||||||
<div id="registrations-column" class="column is-four-fifths is-two-thirds-tablet is-half-desktop">
|
<div class="column is-four-fifths is-two-thirds-tablet is-half-desktop with-background-p__6">
|
||||||
<section class="hero is-primary">
|
<section class="hero is-primary">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
@ -11,7 +11,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div id="registrations-column-form">
|
<div class="p__3">
|
||||||
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
|
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<%= f.label :email, class: "label" %>
|
<%= f.label :email, class: "label" %>
|
||||||
|
@ -45,7 +45,7 @@
|
||||||
<%= f.label :remember_me, class: "checkbox" %>
|
<%= f.label :remember_me, class: "checkbox" %>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<p class="control" id="registrations-column-form-submit-button">
|
<p class="control p__3">
|
||||||
<%= f.button :submit, "Sign in", class: "button is-primary is-fullwidth is-rounded" %>
|
<%= f.button :submit, "Sign in", class: "button is-primary is-fullwidth is-rounded" %>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="container is-fluid" id="passwords">
|
<div class="container is-fluid top-p__1">
|
||||||
<div class="columns is-centered is-mobile">
|
<div class="columns is-centered is-mobile">
|
||||||
<div id="registrations-column" class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop">
|
<div class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop with-background-p__6">
|
||||||
<section class="hero is-primary">
|
<section class="hero is-primary">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
@ -11,7 +11,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div id="unlocks-column-form">
|
<div class="p__3">
|
||||||
<%= simple_form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>
|
<%= simple_form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<%= f.label :email, class: "label" %>
|
<%= f.label :email, class: "label" %>
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<p class="control" id="registrations-column-form-submit-button">
|
<p class="control p__3">
|
||||||
<%= f.button :submit, "Send unlock instructions", class: "button is-primary is-fullwidth is-rounded" %>
|
<%= f.button :submit, "Send unlock instructions", class: "button is-primary is-fullwidth is-rounded" %>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div id="home-index">
|
<div class="home-index">
|
||||||
<section class="hero is-medium is-primary is-bold">
|
<section class="hero is-medium is-primary is-bold">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
Loading…
Reference in New Issue