flexbox-bracket/styles.css at master · frequencydesign/flexbox-bracket · 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
/*
*  Flex Layout Specifics
*/
main{
  display:flex;
  flex-direction:row;
}
.round{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:200px;
  list-style:none;
  padding:0;
}

.round.right{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:200px;
  list-style:none;
  padding:0;
}
.round .spacer{
  flex-grow:1;
}
.round .spacer:first-child,
.round .spacer:last-child{
  flex-grow:.5;
}

.round .game-spacer{
  flex-grow:1;
}

/*
*  General Styles
*/
body{
  font-family:sans-serif;
  font-size:small;
  padding:10px;
  line-height:1.4em;
}
li.game{
  padding-left:20px;
}

.right li.game{
  padding-right:20px;
  padding-left:0;
  text-align: right;
}
li.game.winner{
  font-weight:bold;
}

/* ADDITIONAL CONTENT CAN BE PLACED IN THE CONTENDER LI - BUT NOTHING FOR THIS EXAMPLE
li.game span{
  float:right;
  margin-right:5px;
}

.right li.game span{
  float:left;
  margin-left:5px;
}
ADDITIONAL CONTENT CAN BE PLACED IN THE CONTENDER LI - BUT NOTHING FOR THIS EXAMPLE */

li.game-top{ border-bottom:1px solid #aaa; }

li.game-spacer{
  border-right:1px solid #aaa;
  min-height:40px;
}

.right li.game-spacer{
  align-self: flex-start;
  border-left:1px solid #aaa;
  border-right:none;
  min-height:40px;
}
li.game-bottom{
  border-top:1px solid #aaa;
}