library/components/_list.sass at master · mvcss/library · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
// *************************************
//
//   List
//   -> Enumeration of items
//      CodePen: http://codepen.io/drewbarontini/pen/ouqil
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// %ul.list[divided inline|object styled|styled--numbered]
//   %li.list-item List Item
//   %li.list-item List Item
//
// *************************************

// -------------------------------------
//   Helpers
// -------------------------------------

.group::after
  clear: both
  content: ''
  display: table

// -------------------------------------
//   Variables
// -------------------------------------

// ----- Borders ----- //

$list-border: 1px solid #ddd !default

// ----- Sizing ----- //

$list-space: 1.25em !default

// -------------------------------------
//   Base
// -------------------------------------

.list
  list-style-type: none
  margin: 0
  padding: 0

// -------------------------------------
//   Modifiers
// -------------------------------------

// ----- Divided ----- //

.list--divided

  > .list-item
    border-bottom: $list-border
    padding-bottom: $list-space

    &:last-child
      border-bottom: 0
      padding-bottom: 0

// ----- Inline ----- //

.list--inline

  > .list-item
    display: inline
    margin-right: $list-space

    &:last-child
      margin-right: 0

// ----- Object ----- //

.list--object
  @extend .group

  > .list-item
    float: left
    margin-right: $list-space

    &:last-child
      margin-right: 0

// ----- Styled ----- //

.list--styled
  padding-left: $list-space

  > .list-item
    display: list-item
    list-style-type: disc

// Numbered

.list--styled--numbered

  > .list-item
    list-style-type: decimal

// -------------------------------------
//   Scaffolding
// -------------------------------------

// ----- Item ----- //

.list-item
  display: block
  margin-bottom: $list-space

  &:last-child
    margin-bottom: 0