@zeusdeux/contentful-typescript-codegen

Component Styles v1.0.0

TODO: Add description

Installation

npm install component-styles

@import 'path/to/node_modules/component-styles'

Features

1. Component

- [Nested component](#nested-component)
- [Sibling component (adjacent)](#sibling-component-adjacent)
- [Sibling component (general)](#sibling-component-general)
- [Child component (direct descendant)](#child-component-direct-descendant)

1. Element

- [Sibling element (adjacent)](#sibling-element-adjacent)
- [Sibling element (general)](#sibling-element-general)
- [Child element (direct descendant)](#child-element-direct-descendant)

1. Modifier

- [Parent modifier](#parent-modifier)
- [Component modifier](#component-modifier)

1. Pseudo

- [Parent pseudo](#parent-pseudo)
- [Component pseudo](#component-pseudo)

1. Utility

Component

Basic usage

+component('Button')
  // 1
 
+component('Panel', 'Card')
  // 2

.Button {
  /* 1 */
}
.Panel,
.Card {
  /* 2 */
}

Back to Features

Nested component

+component('Card')
  +component('Icon')
    // 1

.Card .Icon {
  /* 1 */
}

Back to Features

Sibling component (adjacent)

+component('Card')
  +sibling-component('Panel')
    // 1
 
  +sibling-component('Panel', 'Avatar')
    // 2

.Card + .Panel {
  /* 1 */
}
.Card + .Panel,
.Card + .Avatar {
  /* 2 */
}

Back to Features

Sibling component (general)

+component('Card')
  +general-sibling-component('Panel')
    // 1
 
  +general-sibling-component('Panel', 'Avatar')
    // 2

.Card ~ .Panel {
  /* 1 */
}
.Card ~ .Panel,
.Card ~ .Avatar {
  /* 2 */
}

Back to Features

Child component (direct descendant)

+component('Card')
  +child-component('Panel')
    // 1
 
  +child-component('Panel', 'Avatar')
    // 2

.Card > .Panel {
  /* 1 */
}
.Card > .Panel,
.Card > .Avatar {
  /* 2 */
}

Back to Features

Element

Basic usage

+component('Panel')
  +element('header')
    // 1
 
  +element('header', 'footer')
    // 2
 
  +element('footer')
    +element('text')
      // 3
 
  +element('header', 'footer')
    +element('text')
      // 4

.Panel-header {
  /* 1 */
}
.Panel-header,
.Panel-footer {
  /* 2 */
}
.Panel-footer-text {
  /* 3 */
}
.Panel-header-text,
.Panel-footer-text {
  /* 4 */
}

Back to Features

Sibling element (adjacent)

+component('Panel')
  +element('header')
    +sibling-element('footer')
      // 1
 
    +sibling-element('body', 'footer')
      // 2

.Panel-header + .Panel-footer {
  /* 1 */
}
.Panel-header + .Panel-body,
.Panel-footer + .Panel-footer {
  /* 2 */
}

Back to Features

Sibling element (general)

+component('Panel')
  +element('header')
    +general-sibling-element('footer')
      // 1
 
    +general-sibling-element('body', 'footer')
      // 2

.Panel-header ~ .Panel-footer {
  /* 1 */
}
.Panel-header ~ .Panel-body,
.Panel-footer ~ .Panel-footer {
  /* 2 */
}

Back to Features

Child element (direct descendant)

+component('Panel')
  +child-element('content')
    // 1
 
  +child-element('header', 'footer')
    // 2

.Panel > .Panel-content {
  /* 1 */
}
.Panel > .Panel-header,
.Panel > .Panel-footer {
  /* 2 */
}

Back to Features

Modifier

Basic usage

+component('Button')
  // 1
  +modifier('primary')
    // 2
    +modifier('active')
    // 3
  +modifier('warning', 'outline')
    // 4

.Button {
  /* 1 */
}
.Button.\*primary {
  /* 2 */
}
.Button.\*primary.\*active {
  /* 3 */
}
.Button.\*warning.\*outline {
  /* 4 */
}

Back to Features

Parent modifier

+component('Panel')
  +element('body')
    +element('list')
      +element('item')
        +element('icon')
          +parent-modifier('primary')
            // 1
 
          +parent-modifier('primary', 'outline')
            // 2

.Panel-body-list-item.\*primary .Panel-body-list-item-icon {
  /* 1 */
}
.Panel-body-list-item.\*primary.\*outline .Panel-body-list-item-icon {
  /* 2 */
}

Back to Features

Component modifier

+component('Panel')
  +element('body')
    +element('list')
      +element('item')
        +element('icon')
          +component-modifier('primary')
            // 1
 
          +component-modifier('primary', 'outline')
            // 2
 
          +modifier('awesome')
            +component-modifier('primary')
              // 3

.Panel.\*primary .Panel-body-list-item-icon {
  /* 1 */
}
.Panel.\*primary.\*outline .Panel-body-list-item-icon {
  /* 2 */
}
.Panel.\*primary .Panel-body-list-item-icon.\*awesome {
  /* 3 */
}

Back to Features

Pseudo

Basic usage

+component('Panel')
  +pseudo('hover')
    // 1

.Panel:hover {
  /* 1 */
}

Back to Features

Parent pseudo

+component('Panel')
  +element('header')
    +element('text')
      +parent-pseudo('hover')
        // 1

.Panel-header:hover .Panel-header-text {
  /* 1 */
}

Back to Features

Component pseudo

+component('Panel')
  +element('header')
    +element('text')
      +component-pseudo('hover')
        // 1

.Panel:hover .Panel-header-text {
  /* 1 */
}

Back to Features

Utility

+utility('hidden')
  // 1

#component-styles .\+hidden {
  /* 1 */
}

Back to Features