raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-27 01:43:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add collapsible elements and styles

Browse Source
This commit is contained in:
jazzdragon
2019-05-04 19:43:46 -07:00
parent f0f08f7cd3
commit 271330d2fc
2 changed files with 59 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/assets/stylesheets/darkswarm/pages/login_modal.css.scss
View File

@@ -23,3 +23,37 @@
}
}
}
.collapsible-checkbox {
display: none;
}
.lbl-toggle > ::before {
content: ' ';
display: inline-block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
margin-right: .7rem;
transform: translateY(-2px);
transition: transform .2s ease-out;
}
.collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height .25s ease-in-out;
}
.collapsible-checkbox:checked + .lbl-toggle + .collapsible-content {
max-height: 350px;
}
.collapsible-checkbox:checked + .lbl-toggle > ::before {
transform: rotate(90deg) translateX(-3px);
}

44
app/views/registration/steps/_introduction.html.haml
View File

@@ -10,27 +10,33 @@
.row{ 'data-equalizer' => true }
.small-12.medium-12.large-6.columns.pad-top{ 'data-equalizer-watch' => true }
%h5= t(".registration_checklist")+":"
%ul.check-list
%li
= t(".registration_time")
%li
= t(".registration_enterprise_address")
%li
= t(".registration_contact_details")
%li
= t(".registration_logo")
%li
= t(".registration_promo_image")
%li
= t(".registration_about_us")
%input#collapsible-registration-checklist.collapsible-checkbox{:type => "checkbox"}
%label.lbl-toggle{:for => "collapsible-registration-checklist"}
%h5= t(".registration_checklist")+":"
.collapsible-content
%ul.check-list
%li
= t(".registration_time")
%li
= t(".registration_enterprise_address")
%li
= t(".registration_contact_details")
%li
= t(".registration_logo")
%li
= t(".registration_promo_image")
%li
= t(".registration_about_us")
.small-9.medium-8.large-5.columns.pad-top.end{ 'data-equalizer-watch' => true}
%h5
= t(".registration_outcome_headline")
%p= t(".registration_outcome1_html")
%p= t(".registration_outcome2")
%p= t(".registration_outcome3")
%input#collapsible-registration-outcome.collapsible-checkbox{:type => "checkbox"}
%label.lbl-toggle{:for => "collapsible-registration-outcome"}
%h5
= t(".registration_outcome_headline")
.collapsible-content
%p= t(".registration_outcome1_html")
%p= t(".registration_outcome2")
%p= t(".registration_outcome3")
.row{'ng-init' => "tos_required=#{Spree::Config.enterprises_require_tos}" }
%hr