library/components/_split.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
// *************************************
//
//   Split
//   -> Horizontally repellent content
//      CodePen: http://codepen.io/johndjameson/pen/uvtCI
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// %ul.split[divided]
//
//   %li.split-item
//
//     .split-cell
//       / ...
//     .split-cell
//       / ...
//
// *************************************

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

// ----- Colors ----- //

$split-borderColor: #dddddd !default

// ----- Borders & Box Shadow ----- //

$split-borderStyle: solid !default
$split-borderWidth: 1px !default
$split-border: $split-borderWidth $split-borderStyle $split-borderColor !default

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

$split-space: 0.75em !default

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

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

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

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

.split--divided

  .split-item:not(:last-child)
    border-bottom: $split-border
    padding-bottom: $split-space

  .split-item:not(:first-child)
    padding-top: $split-space

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

// ----- Cell ----- //

.split-cell
  display: table-cell

  &:first-child
    width: 10000px

  &:last-child
    white-space: nowrap

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

.split-item
  display: table
  width: 100%