Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
freebsd
GitHub Repository: freebsd/phabricator
 Path: blob/master/webroot/rsrc/css/aphront/multi-column.css
12241 views
1
/**

2
 * @provides aphront-multi-column-view-css

3
 */

4


5
.aphront-multi-column-view {

6
  width: 100%;

7
}

8


9
.device .aphront-multi-column-outer {

10
  padding: 0;

11
  margin: 0 auto;

12
  width: 100%;

13
}

14


15
.aphront-multi-column-inner .aphront-multi-column-column-last,

16
.device .aphront-multi-column-column {

17
  margin: 0;

18
}

19


20
.device-desktop .phui-workboard-view-shadow .aphront-multi-column-inner

21
  .aphront-multi-column-column-last {

22
  margin-right: 8px;

23
}

24


25
.device .aphront-multi-column-outer

26
  div.aphront-multi-column-column-outer {

27
  width: auto;

28
  margin-bottom: 16px;

29
}

30


31
.device .aphront-multi-column-fixed .aphront-multi-column-inner {

32
   width: 100%;

33
}

34


35
.aphront-multi-column-fixed .aphront-multi-column-column-outer {

36
  width: 300px;

37
}

38


39
/* flexible, but with a minimum */

40
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-1-up {

41
  min-width: 200px;

42
}

43


44
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-2-up {

45
  min-width: 400px;

46
}

47


48
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-3-up {

49
  min-width: 600px;

50
}

51


52
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-4-up {

53
  min-width: 800px;

54
}

55


56
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-5-up {

57
  min-width: 1000px;

58
}

59


60
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-6-up {

61
  min-width: 1200px;

62
}

63


64
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-7-up {

65
  min-width: 1400px;

66
}

67


68
/* table division */

69
.aphront-multi-column-fluid .aphront-multi-column-1-up

70
  .aphront-multi-column-column-outer {

71
  width: 100%;

72
}

73


74
.aphront-multi-column-fluid .aphront-multi-column-2-up

75
  .aphront-multi-column-column-outer {

76
  width: 50%;

77
}

78


79
.aphront-multi-column-fluid .aphront-multi-column-3-up

80
  .aphront-multi-column-column-outer {

81
  width: 33.3333%;

82
}

83


84
.aphront-multi-column-fluid .aphront-multi-column-4-up

85
  .aphront-multi-column-column-outer {

86
  width: 25%;

87
}

88


89
.aphront-multi-column-fluid .aphront-multi-column-5-up

90
  .aphront-multi-column-column-outer {

91
  width: 20%;

92
}

93


94
.aphront-multi-column-fluid .aphront-multi-column-6-up

95
  .aphront-multi-column-column-outer {

96
  width: 16.6666%;

97
}

98


99
.aphront-multi-column-fluid .aphront-multi-column-7-up

100
  .aphront-multi-column-column-outer {

101
  width: 14.2857%;

102
}

103


104
/* Shadow Panels */

105


106
.aphront-multi-column-inner {

107
  display: table;

108
  width: 100%;

109
}

110


111
.device-desktop .aphront-multi-column-fixed .aphront-multi-column-inner {

112
  margin: 0 0 12px 12px;

113
}

114


115
/* magic sauce */

116
.aphront-multi-column-fluid .aphront-multi-column-inner {

117
  table-layout: fixed;

118
}

119


120
.device .aphront-multi-column-inner {

121
  display: block;

122
  width: auto;

123
}

124


125
.aphront-multi-column-column-outer {

126
  display: table-cell;

127
  height: 100%;

128
  vertical-align: top;

129
}

130


131
.phui-box-border .aphront-multi-column-column-outer {

132
  border-right: 1px solid {$lightblueborder};

133
  padding-left: 8px;

134
  padding-right: 8px;

135
}

136


137
.phui-box-border .aphront-multi-colum-column-outer-last {

138
  border: none;

139
}

140


141
.device .aphront-multi-column-column-outer {

142
  display: block;

143
  border: none;

144
}

145


146
.device .phui-box-border .aphront-multi-column-column-outer {

147
  padding-bottom: 16px;

148
  border-bottom: 1px solid #e7e7e7;

149
}

150


151
.device .phui-box-border .aphront-multi-colum-column-outer-last {

152
  border: none;

153
  padding-bottom: 0;

154
}

155


156
/* Make Dashboards reasonably display on homepage narrow widths */

157
@media (max-width: 1000px) {

158
  .device-desktop .dashboard-view .aphront-multi-column-inner {

159
    display: block;

160
    width: auto;

161
  }

162
  .device-desktop .dashboard-view .aphront-multi-column-column-outer {

163
    display: block;

164
    border: none;

165
  }

166
  .device-desktop .dashboard-view .aphront-multi-column-column.mlr {

167
    margin: 0;

168
  }

169
  .device-desktop .dashboard-view .aphront-multi-column-fluid

170
    .aphront-multi-column-2-up .aphront-multi-column-column-outer.half {

171
     width: auto;

172
     margin: 0 0 16px;

173
  }

174
  .device-desktop .dashboard-view .aphront-multi-column-fluid

175
    .aphront-multi-column-2-up .aphront-multi-column-column-outer.thirds {

176
     width: auto;

177
     margin: 0 0 16px;

178
  }

179
  .device-desktop .dashboard-view .aphront-multi-column-fluid

180
    .aphront-multi-column-2-up .aphront-multi-column-column-outer.third {

181
    width: auto;

182
    margin: 0 0 16px;

183
  }

184
}

185


186