269 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			269 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| /* @group General */
 | |
| 
 | |
| .ab-main *,
 | |
| .ab-main *:after,
 | |
| .ab-main *:before {
 | |
|     border: 0;
 | |
|     margin: 0;
 | |
|     padding: 0;
 | |
|     outline: 0;
 | |
|     -webkit-box-sizing: border-box;
 | |
|     -moz-box-sizing: border-box;
 | |
|     box-sizing: border-box;
 | |
| }
 | |
| 
 | |
| /* @end group */
 | |
| 
 | |
| /* @group Browse Happy */
 | |
| 
 | |
| .browsehappy {
 | |
|     margin: 0 0 20px;
 | |
|     padding: 10px;
 | |
|     border: 1px solid #e66f00;
 | |
|     text-align: center;
 | |
| }
 | |
| 
 | |
| /* @end group */
 | |
| 
 | |
| /* @group Columns */
 | |
| 
 | |
| .ab-wrap {
 | |
|     margin: 0 0 0 -10px;
 | |
|     padding: 20px 0 0 0;
 | |
|     text-rendering: optimizeLegibility;
 | |
| }
 | |
| 
 | |
| .ab-column {
 | |
|     float: left;
 | |
|     margin: 0 0 0 10px;
 | |
|     position: relative;
 | |
| }
 | |
| 
 | |
| /* @end group */
 | |
| 
 | |
| /* @group Headlines + Icons */
 | |
| 
 | |
| .ab-column h3 {
 | |
|     margin: 0;
 | |
|     font-size: 18px;
 | |
|     font-weight: normal;
 | |
|     line-height: 20px;
 | |
|     color: #23282d;
 | |
| }
 | |
| 
 | |
| .ab-column h3.icon:before {
 | |
|     font: normal 30px/30px Dashicons;
 | |
|     top: 4px;
 | |
|     right: 20px;
 | |
|     speak: none;
 | |
|     width: 1em;
 | |
|     color: #8e959c;
 | |
|     position: absolute;
 | |
|     text-align: center;
 | |
|     -webkit-font-smoothing: antialiased;
 | |
|     -moz-osx-font-smoothing: grayscale;
 | |
| }
 | |
| 
 | |
| .ab-column.ab-arrow h3.icon:before {
 | |
|     content: '\f536';
 | |
| }
 | |
| 
 | |
| .ab-column.ab-join h3.icon:before {
 | |
|     content: '\f108';
 | |
| }
 | |
| 
 | |
| .ab-column.ab-diff h3.icon:before {
 | |
|     content: '\f237';
 | |
| }
 | |
| 
 | |
| .ab-column h6 {
 | |
|     clear: both;
 | |
|     color: #555d66;
 | |
|     margin: 0 0 20px;
 | |
|     font-weight: normal;
 | |
|     font-size: 13px;
 | |
| }
 | |
| 
 | |
| /* @end group */
 | |
| 
 | |
| /* @group Form */
 | |
| 
 | |
| .ab-column input[type="text"],
 | |
| .ab-column input[type="number"],
 | |
| .ab-column select {
 | |
|     font-size: 13px;
 | |
|     text-align: center;
 | |
|     background: #f8f8f9;
 | |
| }
 | |
| 
 | |
| .ab-column input[type="number"] {
 | |
|     padding: 0;
 | |
| }
 | |
| 
 | |
| .ab-column select[multiple] {
 | |
|     width: 175px;
 | |
|     min-height: 60px;
 | |
| }
 | |
| 
 | |
| .ab-column input.ab-mini-field {
 | |
|     width: 40px;
 | |
| }
 | |
| 
 | |
| .ab-column .ab-medium-field {
 | |
|     width: 100%;
 | |
|     max-width: 285px;
 | |
| }
 | |
| 
 | |
| .ab-column input[type="text"] + label,
 | |
| .ab-column select + label {
 | |
|     color: #8e959c;
 | |
|     margin: 0 0 0 7px;
 | |
|     display: inline-block;
 | |
|     text-transform: uppercase;
 | |
| }
 | |
| 
 | |
| /* @end group */
 | |
| 
 | |
| /* @group Column contents */
 | |
| 
 | |
| .ab-column > ul {
 | |
|     padding: 0 20px 0 0;
 | |
| }
 | |
| 
 | |
| .ab-column:last-of-type > ul {
 | |
|     border: 0;
 | |
| }
 | |
| 
 | |
| .ab-column > ul > li {
 | |
|     width: 330px;
 | |
|     margin: 0 0 36px;
 | |
|     padding: 10px 0 12px 12px;
 | |
|     position: relative;
 | |
|     background: #fff;
 | |
| }
 | |
| 
 | |
| .ab-column > ul > li a {
 | |
|     text-decoration: underline;
 | |
| }
 | |
| 
 | |
| .ab-column > ul > li a:hover {
 | |
|     border-color: inherit;
 | |
| }
 | |
| 
 | |
| .ab-column > ul > li label {
 | |
|     cursor: default;
 | |
|     display: inline-block;
 | |
|     font-size: 14px;
 | |
|     max-width: 286px;
 | |
|     color: #23282d;
 | |
| }
 | |
| 
 | |
| .ab-column > ul > li label span {
 | |
|     color: #555d66;
 | |
|     display: block;
 | |
|     font-size: 13px;
 | |
|     line-height: 16px;
 | |
|     margin-top: 5px;
 | |
| }
 | |
| 
 | |
| /* @end group */
 | |
| 
 | |
| /* @group Separator */
 | |
| 
 | |
| .ab-column > ul > li:after,
 | |
| .ab-column > ul > li:before {
 | |
|     width: 0;
 | |
|     content: '';
 | |
|     position: absolute;
 | |
| }
 | |
| 
 | |
| .ab-column.ab-arrow > ul > li:before,
 | |
| .ab-column.ab-arrow > ul > li:after {
 | |
|     left: 157px;
 | |
|     border-width: 10px 10px 0;
 | |
|     border-style: solid;
 | |
| }
 | |
| 
 | |
| .ab-column.ab-arrow > ul > li:before {
 | |
|     bottom: -24px;
 | |
|     border-color: #fff transparent;
 | |
| }
 | |
| 
 | |
| .ab-column.ab-arrow > ul > li:after {
 | |
|     bottom: -22px;
 | |
|     border-color: #f1f1f1 transparent;
 | |
| }
 | |
| 
 | |
| .ab-column.ab-join > ul > li:before {
 | |
|     left: 171px;
 | |
|     bottom: -27px;
 | |
|     height: 18px;
 | |
|     border-right: 2px solid #fff;
 | |
| }
 | |
| 
 | |
| .ab-column.ab-diff > ul > li:before {
 | |
|     left: 162px;
 | |
|     bottom: -19px;
 | |
|     width: 18px;
 | |
|     height: 0;
 | |
|     border-bottom: 2px solid #fff;
 | |
| }
 | |
| 
 | |
| /* @end group */
 | |
| 
 | |
| /* @group Submit & Service */
 | |
| 
 | |
| .ab-column--submit-service {
 | |
|     width: 342px;
 | |
|     margin-top: 20px;
 | |
|     padding-right: 20px;
 | |
| }
 | |
| 
 | |
| .ab-column--submit-service p {
 | |
|     padding: 5px 0;
 | |
|     margin: 0;
 | |
|     text-align: center;
 | |
|     width: 100%;
 | |
| }
 | |
| 
 | |
| .ab-column--submit-service p:first-of-type {
 | |
|     border-top: 1px solid #e0e5e9;
 | |
| }
 | |
| 
 | |
| .ab-column--submit-service p:last-of-type {
 | |
|     border-bottom: 1px solid #e0e5e9;
 | |
| }
 | |
| 
 | |
| .ab-column--submit-service .button {
 | |
|     width: 100%;
 | |
|     margin: 35px 0 10px;
 | |
| }
 | |
| 
 | |
| /* @end group */
 | |
| 
 | |
| /* @group 2nd level */
 | |
| 
 | |
| .ab-column > ul > li:last-of-type:after,
 | |
| .ab-column > ul > li:last-of-type:before {
 | |
|     display: none;
 | |
| }
 | |
| 
 | |
| .ab-column > ul > li > ul {
 | |
|     margin: 10px 10px 0 26px;
 | |
|     display: none;
 | |
| }
 | |
| 
 | |
| .ab-column > ul > li > ul li {
 | |
|     padding: 2px 0;
 | |
| }
 | |
| 
 | |
| .ab-column > ul > li > ul label {
 | |
|     margin: 0 0 0 7px;
 | |
| }
 | |
| 
 | |
| .ab-column > ul > li > input[type="checkbox"]:checked ~ ul {
 | |
|     display: block;
 | |
| }
 | |
| 
 | |
| /* @end group */
 |