csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
.block__element--modifier
.block--modifier__element
| export const toggleModalForm = (to) => { | |
| if (to === 'on') { | |
| Tenon.features.ModalWindows.prepBodyForModal(); | |
| } else { | |
| Tenon.features.ModalWindows.clearBody(); | |
| } | |
| return { | |
| type: types.TOGGLE_MODAL_FORM, | |
| to: to |
| import * as actions from './actions/index' | |
| // ... |
| resources :teams, path: '/', only: :show do | |
| resources :books | |
| resources :authors | |
| end |
csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
.block__element--modifier
.block--modifier__element
| .input-block | |
| %label.input-block__label My thingy | |
| %input.input-block__text-input{ value: 'Hi!' } | |
| .input-block__explanation It's a thingy | |
| .input-block | |
| %label.input-block__label My bigger thingy | |
| %textarea.input-block__text-input.input-block__text-input--multiline Hi! | |
| .input-block__explanation It's a thingy |
| .my-block { | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| margin: 0 auto; | |
| width: auto; | |
| @include bp-md { | |
| position: static; | |
| margin: 50px; |
| # somewhere else, maybe in your controller or your checkout service class or something | |
| def process_order | |
| if @item.stripe_card_token.present? | |
| status = StripeProcessor.process_new_card(@order, @item.stripe_card_token) | |
| else | |
| status = StripeProcessor.process_customer(@order, @item.stripe_customer_token) | |
| end | |
| if status == :success |
| $field-height: 60px; | |
| .fields-group { | |
| margin-bottom: 40px; | |
| text-align: left; | |
| .field { | |
| margin-bottom: 10px; | |
| &:first-child label { border-top-left-radius: 10px; } |
| @PromotionShoppingCartList = (props) -> | |
| if props.promotions.length | |
| promotions = props.promotions | |
| itemRows = $.map promotions, (promotion) -> | |
| ` <div className="field check-box" key={promotion.title}> | |
| <label>{promotion.title}</label> | |
| <div className="control">${promotion.price}</div> | |
| <div className="spacer"></div> | |
| </div>` |
| .service-only | |
| .field.no-label | |
| .control | |
| = select_tag 'item[category_ids][]', options_for_select(@service_categories, @item.category_ids[0]), prompt: 'Select a Category...' | |
| .spacer | |
| .field.no-label | |
| .control | |
| = select_tag 'item[category_ids][]', options_for_select(@categories, @item.category_ids[1]), prompt: 'Select a Category... (Optional)' | |
| .spacer |