Update grid.less

Update grid.less

/**
 * css grid system
 * @author Mark McCann (www.markmccann.me)
 * @license MIT
 */

// breakpoints
@medium: 30.625rem; // 490px
@large: 50rem; // 800px
// margin for small screens
@halves-margin: 1.25rem; // 20px
@thirds-margin: .9375rem; // 15px
@fourths-margin: .625rem; // 10px
// margins for medium screens
@halves-margin-medium: 1.875rem; // 30px
@thirds-margin-medium: 1.25rem; // 20px
@fourths-margin-medium: .9375rem; // 15px
// margins for large screens
@halves-margin-large: 2.8125rem; // 45px
@thirds-margin-large: 1.875rem; // 30px
@fourths-margin-large: 1.25rem; // 20px
// padding for content
@content-padding: .5rem; // 8px
@content-padding-medium: .625rem; // 10px
@content-padding-large: .9375rem; // 15px

/* default (responsive) layout ---------------------------------------------- */

.grid-halves,
.grid-thirds,
.grid-fourths,
.grid-custom {
    &:after {
        clear: both;
        content: '';
        display: block;
    }
}

.grid-block {
    box-sizing: border-box;
    float: left;
    width: 100%;
}

.grid-content {
    padding: @content-padding;
}

// medium screen ----------

@media screen and (min-width:@medium) {

    .grid-content {
        padding: @content-padding-medium;
    }

    // two columns -----------

    .grid-halves,
    .grid-fourths  {
        .grid-block {
            width: 50%;
            &:nth-child(odd) {
                padding-right: round(@halves-margin-medium * .5, 4);
            }
            &:nth-child(even) {
                padding-left: round(@halves-margin-medium * .5, 4);
            }
        }
    }

    // three columns -----------

    .grid-thirds {
        .grid-block {
            width: 33.3334%;
            &:nth-child(3n+1) {
                padding-right: round(@thirds-margin-medium * .6667, 4);
            }
            &:nth-child(3n+2) {
                padding-left: round(@thirds-margin-medium * .3334, 4);
                padding-right: round(@thirds-margin-medium * .3334, 4);
            }
            &:nth-child(3n+3) {
                padding-left: round(@thirds-margin-medium * .6667, 4);
            }
        }
    }

    // custom widths ------------

    .grid-block {
        &.grid-span-medium { width: 100%; }
        &.grid-one-half-medium { width: 50%;  }
        &.grid-one-third-medium { width: 33.3334%;  }
        &.grid-two-thirds-medium { width: 66.6667%; }
        &.grid-one-fourth-medium { width: 25%; }
        &.grid-three-fourth-medium { width: 75%; }
        &.grid-one-fifth-medium { width: 20%; }
        &.grid-two-fifths-medium { width: 40%; }
        &.grid-three-fifths-medium { width: 60%; }
        &.grid-four-fifths-medium { width: 80%; }
        &.grid-one-sixth-medium { width: 16.6667%; }
        &.grid-five-sixths-medium { width: 83.3334%; }
    }

}

// large screen ----------

@media screen and (min-width:@large) {

    .grid-content {
        padding: @content-padding-large;
    }

    // two columns -------------

    .grid-halves {
        .grid-block {
            &:nth-child(odd) {
                padding-right: round(@halves-margin-large * .5, 4);
            }
            &:nth-child(even) {
                padding-left: round(@halves-margin-large * .5, 4);
            }
        }
    }

    // three columns -------------

    .grid-thirds {
        >.grid-block {
            &:nth-child(3n+1) {
                padding-right: round(@thirds-margin-large * .6667, 4);
            }
            &:nth-child(3n+2) {
                padding-left: round(@thirds-margin-large * .3334, 4);
                padding-right: round(@thirds-margin-large * .3334, 4);
            }
            &:nth-child(3n+3) {
                padding-left: round(@thirds-margin-large * .6667, 4);
            }
        }
    }

    // four columns -----------

    .grid-fourths {
        .grid-block {
            width: 25%;
            &:nth-child(4n+1) {
                padding-right: round(@thirds-margin-large * .6667, 4);
            }
            &:nth-child(4n+2) {
                padding-left: round(@thirds-margin-large * .3334, 4);
                padding-right: round(@thirds-margin-large * .5, 4);
            }
            &:nth-child(4n+3) {
                padding-left: round(@thirds-margin-large * .5, 4);
                padding-right: round(@thirds-margin-large * .3334, 4);
            }
            &:nth-child(4n+4) {
                padding-left: round(@thirds-margin-large * .6667, 4);
            }
        }
    }

    // custom widths ------------

    .grid-block {
        &.grid-span-large { width: 100%; }
        &.grid-one-half-large { width: 50%;  }
        &.grid-one-third-large { width: 33.3334%;  }
        &.grid-two-thirds-large{ width: 66.6667%; }
        &.grid-one-fourth-large { width: 25%; }
        &.grid-three-fourth-large { width: 75%; }
        &.grid-one-fifth-large { width: 20%; }
        &.grid-two-fifths-large { width: 40%; }
        &.grid-three-fifths-large { width: 60%; }
        &.grid-four-fifths-large { width: 80%; }
        &.grid-one-sixth-large { width: 16.6667%; }
        &.grid-five-sixths-large { width: 83.3334%; }
    }

}

/* fixed layout --------------------------------------------------------- */

.grid-fixed {

    // two columns ---------

    &.grid-halves {
        .grid-block {
            width: 50%;
        }
        >:nth-child(odd) {
            padding-right: round(@halves-margin * .5, 4);
        }
        >:nth-child(even) {
            padding-left: round(@halves-margin * .5, 4);
        }
    }

    // three columns ---------

    &.grid-thirds {
        .grid-block {
            width: 33.3334%;
        }
        >:nth-child(3n+1) {
            padding-right: round(@thirds-margin * .6667, 4);
        }
        >:nth-child(3n+2) {
            padding-left: round(@thirds-margin * .3334, 4);
            padding-right: round(@thirds-margin * .3334, 4);
        }
        >:nth-child(3n+3) {
            padding-left: round(@thirds-margin * .6667, 4);
        }
    }

    // four columns ---------

    &.grid-fourths {
        .grid-block {
            width: 25%;
        }
        >:nth-child(4n+1) {
            padding-right: round(@thirds-margin * .6667, 4);
        }
        >:nth-child(4n+2) {
            padding-left: round(@thirds-margin * .3334, 4);
            padding-right: round(@thirds-margin * .5, 4);
        }
        >:nth-child(4n+3) {
            padding-left: round(@thirds-margin * .5, 4);
            padding-right: round(@thirds-margin * .3334, 4);
        }
        >:nth-child(4n+4) {
            padding-left: round(@thirds-margin * .6667, 4);
        }
    }

    // custom widths -------------

    .grid-block {
        &.grid-span { width: 100%; }
        &.grid-one-half { width: 50%;  }
        &.grid-one-third { width: 33.3334%;  }
        &.grid-two-thirds { width: 66.6667%; }
        &.grid-one-fourth { width: 25%; }
        &.grid-three-fourth { width: 75%; }
        &.grid-one-fifth { width: 20%; }
        &.grid-two-fifths { width: 40%; }
        &.grid-three-fifths { width: 60%; }
        &.grid-four-fifths { width: 80%; }
        &.grid-one-sixth { width: 16.6667%; }
        &.grid-five-sixths { width: 83.3334%; }
    }

}

/* vertical spacing -------------------------------------------------------- */

.grid-halves,
.grid-thirds,
.grid-fourths  {
    .grid-block {
        padding-bottom: @halves-margin;
    }
}

.grid-block:last-child,
.grid-fixed.grid-halves > :nth-child(odd):nth-last-child(-n+2),
.grid-fixed.grid-thirds > :nth-child(3n+1):nth-last-child(-n+3),
.grid-fixed.grid-thirds > :nth-child(3n+2):nth-last-child(-n+2),
.grid-fixed.grid-fourths > :nth-child(4n+1):nth-last-child(-n+4),
.grid-fixed.grid-fourths > :nth-child(4n+2):nth-last-child(-n+3),
.grid-fixed.grid-fourths > :nth-child(4n+3):nth-last-child(-n+2) {
    padding-bottom: 0;
}

@media screen and (min-width:@medium) {

    .grid-halves,
    .grid-fourths {
        .grid-block {
            padding-bottom: @halves-margin-medium;
        }
    }

    .grid-thirds {
        .grid-block {
            padding-bottom: @thirds-margin-medium;
        }
    }

    .grid-halves > :nth-child(odd):nth-last-child(-n+2),
    .grid-thirds > :nth-child(3n+1):nth-last-child(-n+3),
    .grid-thirds > :nth-child(2n+1):nth-last-child(-n+2),
    .grid-fourths > :nth-child(odd):nth-last-child(-n+2) {
        padding-bottom: 0;
    }

}

@media screen and (min-width:@large) {

    .grid-halves .grid-block { padding-bottom: @halves-margin-large; }
    .grid-thirds .grid-block { padding-bottom: @thirds-margin-large; }
    .grid-fourths .grid-block { padding-bottom: @fourths-margin-large; }

    .grid-fourths > :nth-child(4n+1):nth-last-child(-n+4),
    .grid-fourths > :nth-child(4n+2):nth-last-child(-n+3),
    .grid-fourths > :nth-child(4n+3):nth-last-child(-n+2) {
        padding-bottom: 0;
    }

}

/* collapse spacing -------------------------------------------------------- */

.grid-collapse {
    .grid-halves,
    .grid-thirds,
    .grid-fourths {
        .grid-block {
            padding: 0;
        }
    }
}

/* custom grid ----------------------------------------------------------- */

.grid-custom {
    .grid-span { width: 100%; }
    .grid-one-half { width: 50%;  }
    .grid-one-third { width: 33.3334%;  }
    .grid-two-thirds { width: 66.6667%; }
    .grid-one-fourth { width: 25%; }
    .grid-three-fourth { width: 75%; }
    .grid-one-fifth { width: 20%; }
    .grid-two-fifths { width: 40%; }
    .grid-three-fifths { width: 60%; }
    .grid-four-fifths { width: 80%; }
    .grid-one-sixth { width: 16.6667%; }
    .grid-five-sixth { width: 83.3334%; }
}

/**
 * css grid system
 * @author Mark McCann (www.markmccann.me)
 * @license MIT
 */

// breakpoints
@medium: 30.625rem; // 490px
@large: 50rem; // 800px
// margin for small screens
@halves-margin: 1.25rem; // 20px
@thirds-margin: .9375rem; // 15px
@fourths-margin: .625rem; // 10px
// margins for medium screens
@halves-margin-medium: 1.875rem; // 30px
@thirds-margin-medium: 1.25rem; // 20px
@fourths-margin-medium: .9375rem; // 15px
// margins for large screens
@halves-margin-large: 2.8125rem; // 45px
@thirds-margin-large: 1.875rem; // 30px
@fourths-margin-large: 1.25rem; // 20px
// padding for content
@content-padding: .5rem; // 8px
@content-padding-medium: .625rem; // 10px
@content-padding-large: .9375rem; // 15px

/* default (responsive) layout ---------------------------------------------- */

.grid-halves,
.grid-thirds,
.grid-fourths,
.grid-custom {
    &:after {
        clear: both;
        content: '';
        display: block;
    }
}

.grid-block {
    box-sizing: border-box;
    float: left;
    width: 100%;
}

.grid-content {
    padding: @content-padding;
}

/* medium screen ---------- */

@media screen and (min-width:@medium) {

    .grid-content {
        padding: @content-padding-medium;
    }

    // two columns -----------

    .grid-halves,
    .grid-fourths  {
        .grid-block {
            width: 50%;
            &:nth-child(odd) {
                padding-right: round(@halves-margin-medium * .5, 4);
            }
            &:nth-child(even) {
                padding-left: round(@halves-margin-medium * .5, 4);
            }
        }
    }

    // three columns -----------

    .grid-thirds {
        .grid-block {
            width: 33.3334%;
            &:nth-child(3n+1) {
                padding-right: round(@thirds-margin-medium * .6667, 4);
            }
            &:nth-child(3n+2) {
                padding-left: round(@thirds-margin-medium * .3334, 4);
                padding-right: round(@thirds-margin-medium * .3334, 4);
            }
            &:nth-child(3n+3) {
                padding-left: round(@thirds-margin-medium * .6667, 4);
            }
        }
    }

}

// large screen ----------

@media screen and (min-width:@large) {

    .grid-content {
        padding: @content-padding-large;
    }

    // two columns -------------

    .grid-halves {
        .grid-block {
            &:nth-child(odd) {
                padding-right: round(@halves-margin-large * .5, 4);
            }
            &:nth-child(even) {
                padding-left: round(@halves-margin-large * .5, 4);
            }
        }
    }

    // three columns -------------

    .grid-thirds {
        >.grid-block {
            &:nth-child(3n+1) {
                padding-right: round(@thirds-margin-large * .6667, 4);
            }
            &:nth-child(3n+2) {
                padding-left: round(@thirds-margin-large * .3334, 4);
                padding-right: round(@thirds-margin-large * .3334, 4);
            }
            &:nth-child(3n+3) {
                padding-left: round(@thirds-margin-large * .6667, 4);
            }
        }
    }

    // four columns -----------

    .grid-fourths {
        .grid-block {
            width: 25%;
            &:nth-child(4n+1) {
                padding-right: round(@thirds-margin-large * .6667, 4);
            }
            &:nth-child(4n+2) {
                padding-left: round(@thirds-margin-large * .3334, 4);
                padding-right: round(@thirds-margin-large * .5, 4);
            }
            &:nth-child(4n+3) {
                padding-left: round(@thirds-margin-large * .5, 4);
                padding-right: round(@thirds-margin-large * .3334, 4);
            }
            &:nth-child(4n+4) {
                padding-left: round(@thirds-margin-large * .6667, 4);
            }
        }
    }

}

/* fixed layout --------------------------------------------------------- */

.grid-fixed {

    // two columns ---------

    &.grid-halves {
        .grid-block {
            width: 50%;
        }
        >:nth-child(odd) {
            padding-right: round(@halves-margin * .5, 4);
        }
        >:nth-child(even) {
            padding-left: round(@halves-margin * .5, 4);
        }
    }

    // three columns ---------

    &.grid-thirds {
        .grid-block {
            width: 33.3334%;
        }
        >:nth-child(3n+1) {
            padding-right: round(@thirds-margin * .6667, 4);
        }
        >:nth-child(3n+2) {
            padding-left: round(@thirds-margin * .3334, 4);
            padding-right: round(@thirds-margin * .3334, 4);
        }
        >:nth-child(3n+3) {
            padding-left: round(@thirds-margin * .6667, 4);
        }
    }

    // four columns ---------

    &.grid-fourths {
        .grid-block {
            width: 25%;
        }
        >:nth-child(4n+1) {
            padding-right: round(@thirds-margin * .6667, 4);
        }
        >:nth-child(4n+2) {
            padding-left: round(@thirds-margin * .3334, 4);
            padding-right: round(@thirds-margin * .5, 4);
        }
        >:nth-child(4n+3) {
            padding-left: round(@thirds-margin * .5, 4);
            padding-right: round(@thirds-margin * .3334, 4);
        }
        >:nth-child(4n+4) {
            padding-left: round(@thirds-margin * .6667, 4);
        }
    }

    // custom widths -------------

    .grid-block {
        &.grid-span { width: 100%; }
        &.grid-one-half { width: 50%;  }
        &.grid-one-third { width: 33.3334%;  }
        &.grid-two-thirds { width: 66.6667%; }
        &.grid-one-fourth { width: 25%; }
        &.grid-three-fourth { width: 75%; }
        &.grid-one-fifth { width: 20%; }
        &.grid-two-fifths { width: 40%; }
        &.grid-three-fifths { width: 60%; }
        &.grid-four-fifths { width: 80%; }
        &.grid-one-sixth { width: 16.6667%; }
        &.grid-five-sixths { width: 83.3334%; }
    }

}

/* vertical spacing -------------------------------------------------------- */

.grid-halves,
.grid-thirds,
.grid-fourths  {
    .grid-block {
        padding-bottom: @halves-margin;
    }
}

.grid-block:last-child,
.grid-fixed.grid-halves > :nth-child(odd):nth-last-child(-n+2),
.grid-fixed.grid-thirds > :nth-child(3n+1):nth-last-child(-n+3),
.grid-fixed.grid-thirds > :nth-child(3n+2):nth-last-child(-n+2),
.grid-fixed.grid-fourths > :nth-child(4n+1):nth-last-child(-n+4),
.grid-fixed.grid-fourths > :nth-child(4n+2):nth-last-child(-n+3),
.grid-fixed.grid-fourths > :nth-child(4n+3):nth-last-child(-n+2) {
    padding-bottom: 0;
}

@media screen and (min-width:@medium) {

    .grid-halves,
    .grid-fourths {
        .grid-block {
            padding-bottom: @halves-margin-medium;
        }
    }

    .grid-thirds {
        .grid-block {
            padding-bottom: @thirds-margin-medium;
        }
    }

    .grid-halves > :nth-child(odd):nth-last-child(-n+2),
    .grid-thirds > :nth-child(3n+1):nth-last-child(-n+3),
    .grid-thirds > :nth-child(2n+1):nth-last-child(-n+2),
    .grid-fourths > :nth-child(odd):nth-last-child(-n+2) {
        padding-bottom: 0;
    }

}

@media screen and (min-width:@large) {

    .grid-halves .grid-block { padding-bottom: @halves-margin-large; }
    .grid-thirds .grid-block { padding-bottom: @thirds-margin-large; }
    .grid-fourths .grid-block { padding-bottom: @fourths-margin-large; }

    .grid-fourths > :nth-child(4n+1):nth-last-child(-n+4),
    .grid-fourths > :nth-child(4n+2):nth-last-child(-n+3),
    .grid-fourths > :nth-child(4n+3):nth-last-child(-n+2) {
        padding-bottom: 0;
    }

}

/* collapse spacing -------------------------------------------------------- */

.grid-collapse {
    .grid-halves,
    .grid-thirds,
    .grid-fourths {
        .grid-block {
            padding: 0;
        }
    }
}

/* custom grid ----------------------------------------------------------- */

.grid-custom {
    .grid-span { width: 100%; }
    .grid-one-half { width: 50%;  }
    .grid-one-third { width: 33.3334%;  }
    .grid-two-thirds { width: 66.6667%; }
    .grid-one-fourth { width: 25%; }
    .grid-three-fourth { width: 75%; }
    .grid-one-fifth { width: 20%; }
    .grid-two-fifths { width: 40%; }
    .grid-three-fifths { width: 60%; }
    .grid-four-fifths { width: 80%; }
    .grid-one-sixth { width: 16.6667%; }
    .grid-five-sixth { width: 83.3334%; }
}

@media screen and (min-width:@medium) {

    .grid-block {
        &.grid-span-medium { width: 100%; }
        &.grid-one-half-medium { width: 50%;  }
        &.grid-one-third-medium { width: 33.3334%;  }
        &.grid-two-thirds-medium { width: 66.6667%; }
        &.grid-one-fourth-medium { width: 25%; }
        &.grid-three-fourth-medium { width: 75%; }
        &.grid-one-fifth-medium { width: 20%; }
        &.grid-two-fifths-medium { width: 40%; }
        &.grid-three-fifths-medium { width: 60%; }
        &.grid-four-fifths-medium { width: 80%; }
        &.grid-one-sixth-medium { width: 16.6667%; }
        &.grid-five-sixths-medium { width: 83.3334%; }
    }

}

@media screen and (min-width:@large) {

    .grid-block {
        &.grid-span-large { width: 100%; }
        &.grid-one-half-large { width: 50%;  }
        &.grid-one-third-large { width: 33.3334%;  }
        &.grid-two-thirds-large{ width: 66.6667%; }
        &.grid-one-fourth-large { width: 25%; }
        &.grid-three-fourth-large { width: 75%; }
        &.grid-one-fifth-large { width: 20%; }
        &.grid-two-fifths-large { width: 40%; }
        &.grid-three-fifths-large { width: 60%; }
        &.grid-four-fifths-large { width: 80%; }
        &.grid-one-sixth-large { width: 16.6667%; }
        &.grid-five-sixths-large { width: 83.3334%; }
    }

}


Fixed content transition.

Fixed content transition.

#content {
	border: 1px dashed #fff;
	border-radius: 8px;
	.transition(border-color 0.2s ease-in-out);

	&.hint {
		border-color: #ddd;
	}
	&.match {
		border-color: #aaa;
	}
}

#uploads {
	width: 450px;
	margin: 12px auto;
	padding: 0;
	list-style: none;

	.upload {
		color: #555;
		font-size: 0.9em;

		.name {
			display: inline-block;
			white-space: nowrap;
			overflow: hidden;

			&:before {
				display: inline-block;
				content: '•';
				color: #55c;
				width: 1em;
				text-align: center;
				padding-right: 1em;
			}
		}

		.size {
			display: none;
			float: right;
			white-space: nowrap;

			&:after {
				content: ' bytes'
			}
		}

		.error {
			float: right;
			white-space: nowrap;
			color: #c55;
		}

		.finished {
			float: right;
			white-space: nowrap;
			color: #008200;
		}

		.progress {
			display: inline-block;
			margin: 4px 8px;

			width: 84px;
			height: 8px;
			background-color: #ddd;
			overflow: hidden;
			float: right;

			.bar {
				width: 0%;
				height: 100%;
				background-color: #999;
			}
		}

		&.finished .name:before {
			content: '✔';
			color: #008200;
		}
		&.error .name:before {
			content: '✖';
			color: #c55;
		}
	}
}

#content {
	border: 1px dashed #fff;
	border-radius: 8px;
	.transition(all 0.2s ease-in-out);

	&.hint {
		border-color: #ddd;
	}
	&.match {
		border-color: #aaa;
	}
}

#uploads {
	width: 450px;
	margin: 12px auto;
	padding: 0;
	list-style: none;

	.upload {
		color: #555;
		font-size: 0.9em;

		.name {
			display: inline-block;
			white-space: nowrap;
			overflow: hidden;

			&:before {
				display: inline-block;
				content: '•';
				color: #55c;
				width: 1em;
				text-align: center;
				padding-right: 1em;
			}
		}

		.size {
			display: none;
			float: right;
			white-space: nowrap;

			&:after {
				content: ' bytes'
			}
		}

		.error {
			float: right;
			white-space: nowrap;
			color: #c55;
		}

		.finished {
			float: right;
			white-space: nowrap;
			color: #008200;
		}

		.progress {
			display: inline-block;
			margin: 4px 8px;

			width: 84px;
			height: 8px;
			background-color: #ddd;
			overflow: hidden;
			float: right;

			.bar {
				width: 0%;
				height: 100%;
				background-color: #999;
			}
		}

		&.finished .name:before {
			content: '✔';
			color: #008200;
		}
		&.error .name:before {
			content: '✖';
			color: #c55;
		}
	}
}


highlight middle column

highlight middle column

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\
    conf
\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*================================*\
    docs.less
\*================================*/
@import (reference) url('../../node_modules/xmeter/src/__settings.less');
@import (reference) url('../../node_modules/xmeter/src/__fallback.flexbox.less');
@import (reference) url('../../node_modules/xmeter/src/__fallback.transition.less');
@import (reference) url('../../node_modules/xmeter/src/__tool.borders.less');

// This stylesheet is used on all styleguide documentation files.
// NOTE that this style sheet does NOT use any variables, settings, tools, or styles
// of any kind from the Conf stylesheet (conf.less and its partials).
// This is a stand-alone stylesheet.

// HACK copied from conf
@p-color_asce_blue: #0c5fa8;
@p-color_asce_black: #222;
@p-color_asce_white: #fff;
.docs-main {
  margin: 0 1rem @g-vru;
}
.docs-pre,
.docs-code {
  color: #000;
}
.docs-pre {
  padding: (@g-vru*0.50) 1.00rem;
  .border-vert(all; 1px);
  border-color: @p-color_asce_blue;
  border-radius: 4px;
  background-color: lighten(desaturate(@p-color_asce_blue, 25%), 50%);
  small {
    font-size: inherit;
    color: #666;
  }
  u {
    color: #050;
  }
  mark {
    background: none;
    color: #c06;
  }
}
.docs-code {
  padding: 1px 2px;
  border-radius: 3px;
  background-color: desaturate(lighten(@p-color_asce_blue, 40%), 25%);
}
.docs-figure {
  position: relative; // for containing other relative things
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 0.5em;
  .border-vert(all; 1px);
  border-color: #e5eaef;
  border-radius: 8px;
  background-color: #f8fcff;
}

.docs-o-ColorList {
}
.docs-o-ColorList__Item {
  display: inline-block;
  vertical-align: top;
  width: 20%;
  padding: 0.375rem 0.5rem;
  &:nth-child(5n+3) {
    background-color: rgba(0,0,0,0.0625);
  }
}

// A container with togglable content.
// Togglable content may be shown/hidden on command.
.docs-c-Togglable {}
  .docs-c-Togglable__Check {
    margin: 0.25rem;
  }
  .docs-c-Togglable__Text {
    display: inline-block;
    .transition(text-indent 500ms);
  }
  .docs-c-Togglable__Check:not(:checked) ~ * .docs-c-Togglable__Text {
    text-indent: -200%;
  }

.docs-c-ColorBox {
  width: 100%;
  box-shadow: 0 2px 0.5rem 0 fadeout(#222, 50%); // #222 is `currentColor`
}

.docs-t-Xmeter {
  padding: (0.25*@g-vru) 0.5rem;
  background: fadeout(#000, 90%);
}

.docs-_fragid {
  display: inline;
  line-height: 0;
  margin-left: 1rem;
  font-weight: 100;
  &::before {
    content: '\00a7';
  }
}
h1, h2, h3, h4, h5, h6 {
  &:not(:hover) > .docs-_fragid {
    visibility: hidden;
  }
}

//--------------------------------//
//    # Fill
//--------------------------------//
.-f-asce_black { fill: @p-color_asce_black; }
.-f-asce_white { fill: @p-color_asce_white; }
.-f-asce_blue  { fill: @p-color_asce_blue ; }

.-f-primary   { fill: var(--color-primary); }
.-f-secondary { fill: var(--color-secondary); }
.-f-gray_dk   { fill: var(--color-gray_dk); }
.-f-gray_lt   { fill: var(--color-gray_lt); }

.-f-primary-shade1 { fill: var(--color-primary-shade1); }
.-f-primary-shade2 { fill: var(--color-primary-shade2); }
.-f-primary-tint1  { fill: var(--color-primary-tint1); }
.-f-primary-tint2  { fill: var(--color-primary-tint2); }

.-f-secondary-shade1 { fill: var(--color-secondary-shade1); }
.-f-secondary-shade2 { fill: var(--color-secondary-shade2); }
.-f-secondary-tint1  { fill: var(--color-secondary-tint1); }
.-f-secondary-tint2  { fill: var(--color-secondary-tint2); }

.-f-gray_dk-shade1 { fill: var(--color-gray_dk-shade1); }
.-f-gray_dk-shade2 { fill: var(--color-gray_dk-shade2); }
.-f-gray_dk-tint1  { fill: var(--color-gray_dk-tint1); }
.-f-gray_dk-tint2  { fill: var(--color-gray_dk-tint2); }

.-f-gray_lt-shade1 { fill: var(--color-gray_lt-shade1); }
.-f-gray_lt-shade2 { fill: var(--color-gray_lt-shade2); }
.-f-gray_lt-tint1  { fill: var(--color-gray_lt-tint1); }
.-f-gray_lt-tint2  { fill: var(--color-gray_lt-tint2); }

.-bc-primary-fadeout1 { background-color: var(--color-primary-fadeout1); }
//---- end # Fill ----//

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\
    conf
\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*================================*\
    docs.less
\*================================*/
@import (reference) url('../../node_modules/xmeter/src/__settings.less');
@import (reference) url('../../node_modules/xmeter/src/__fallback.flexbox.less');
@import (reference) url('../../node_modules/xmeter/src/__fallback.transition.less');
@import (reference) url('../../node_modules/xmeter/src/__tool.borders.less');

// This stylesheet is used on all styleguide documentation files.
// NOTE that this style sheet does NOT use any variables, settings, tools, or styles
// of any kind from the Conf stylesheet (conf.less and its partials).
// This is a stand-alone stylesheet.

// HACK copied from conf
@p-color_asce_blue: #0c5fa8;
@p-color_asce_black: #222;
@p-color_asce_white: #fff;
.docs-main {
  margin: 0 1rem @g-vru;
}
.docs-pre,
.docs-code {
  color: #000;
}
.docs-pre {
  padding: (@g-vru*0.50) 1.00rem;
  .border-vert(all; 1px);
  border-color: @p-color_asce_blue;
  border-radius: 4px;
  background-color: lighten(desaturate(@p-color_asce_blue, 25%), 50%);
  small {
    font-size: inherit;
    color: #666;
  }
  u {
    color: #050;
  }
  mark {
    background: none;
    color: #c06;
  }
}
.docs-code {
  padding: 1px 2px;
  border-radius: 3px;
  background-color: desaturate(lighten(@p-color_asce_blue, 40%), 25%);
}
.docs-figure {
  position: relative; // for containing other relative things
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 0.5em;
  .border-vert(all; 1px);
  border-color: #e5eaef;
  border-radius: 8px;
  background-color: #f8fcff;
}

.docs-o-ColorList {
}
.docs-o-ColorList__Item {
  display: inline-block;
  vertical-align: top;
  width: 20%;
  padding: 0 0.5rem;
}

// A container with togglable content.
// Togglable content may be shown/hidden on command.
.docs-c-Togglable {}
  .docs-c-Togglable__Check {
    margin: 0.25rem;
  }
  .docs-c-Togglable__Text {
    display: inline-block;
    .transition(text-indent 500ms);
  }
  .docs-c-Togglable__Check:not(:checked) ~ * .docs-c-Togglable__Text {
    text-indent: -200%;
  }

.docs-c-ColorBox {
  width: 100%;
  box-shadow: 0 2px 0.5rem 0 fadeout(#222, 50%); // #222 is `currentColor`
}

.docs-t-Xmeter {
  padding: (0.25*@g-vru) 0.5rem;
  background: fadeout(#000, 90%);
}

.docs-_fragid {
  display: inline;
  line-height: 0;
  margin-left: 1rem;
  font-weight: 100;
  &::before {
    content: '\00a7';
  }
}
h1, h2, h3, h4, h5, h6 {
  &:not(:hover) > .docs-_fragid {
    visibility: hidden;
  }
}

//--------------------------------//
//    # Fill
//--------------------------------//
.-f-asce_black { fill: @p-color_asce_black; }
.-f-asce_white { fill: @p-color_asce_white; }
.-f-asce_blue  { fill: @p-color_asce_blue ; }

.-f-primary   { fill: var(--color-primary); }
.-f-secondary { fill: var(--color-secondary); }
.-f-gray_dk   { fill: var(--color-gray_dk); }
.-f-gray_lt   { fill: var(--color-gray_lt); }

.-f-primary-shade1 { fill: var(--color-primary-shade1); }
.-f-primary-shade2 { fill: var(--color-primary-shade2); }
.-f-primary-tint1  { fill: var(--color-primary-tint1); }
.-f-primary-tint2  { fill: var(--color-primary-tint2); }

.-f-secondary-shade1 { fill: var(--color-secondary-shade1); }
.-f-secondary-shade2 { fill: var(--color-secondary-shade2); }
.-f-secondary-tint1  { fill: var(--color-secondary-tint1); }
.-f-secondary-tint2  { fill: var(--color-secondary-tint2); }

.-f-gray_dk-shade1 { fill: var(--color-gray_dk-shade1); }
.-f-gray_dk-shade2 { fill: var(--color-gray_dk-shade2); }
.-f-gray_dk-tint1  { fill: var(--color-gray_dk-tint1); }
.-f-gray_dk-tint2  { fill: var(--color-gray_dk-tint2); }

.-f-gray_lt-shade1 { fill: var(--color-gray_lt-shade1); }
.-f-gray_lt-shade2 { fill: var(--color-gray_lt-shade2); }
.-f-gray_lt-tint1  { fill: var(--color-gray_lt-tint1); }
.-f-gray_lt-tint2  { fill: var(--color-gray_lt-tint2); }

.-bc-primary-fadeout1 { background-color: var(--color-primary-fadeout1); }
//---- end # Fill ----//


docs: fix site subtitle in rtl (#23403)

docs: fix site subtitle in rtl (#23403)

.markdown {
  color: @site-text-color;
  font-size: 14px;
  line-height: 2;
}

.highlight {
  line-height: 1.5;
}

.markdown img {
  max-width: ~'calc(100% - 32px)';
}

.markdown p > img {
  margin: 34px 0;
  box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
}

.markdown p > img.markdown-inline-image {
  margin: 0;
  box-shadow: none;
}

.markdown h1 {
  margin-top: 8px;
  margin-bottom: 20px;
  color: @site-heading-color;
  font-weight: 500;
  font-size: 30px;
  font-family: Avenir, @font-family, sans-serif;
  line-height: 38px;

  .subtitle {
    margin-left: 12px;
  }
}

.markdown h2 {
  font-size: 24px;
  line-height: 32px;
}

.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  clear: both;
  margin: 1.6em 0 0.6em;
  color: @site-heading-color;
  font-weight: 500;
  font-family: Avenir, @font-family, sans-serif;
}

.markdown h3 {
  font-size: 18px;
}
.markdown h4 {
  font-size: 16px;
}
.markdown h5 {
  font-size: 14px;
}
.markdown h6 {
  font-size: 12px;
}

.markdown hr {
  clear: both;
  height: 1px;
  margin: 56px 0;
  background: @site-border-color-split;
  border: 0;
}

.markdown p,
.markdown pre {
  margin: 1em 0;
}

.markdown ul > li {
  margin-left: 20px;
  padding-left: 4px;
  list-style-type: circle;

  .ant-row-rtl & {
    margin-right: 20px;
    margin-left: 0;
    padding-right: 4px;
    padding-left: 0;
  }
  &:empty {
    display: none;
  }
}

.markdown ol > li {
  margin-left: 20px;
  padding-left: 4px;
  list-style-type: decimal;

  .ant-row-rtl & {
    margin-right: 20px;
    margin-left: 0;
    padding-right: 4px;
    padding-left: 0;
  }
}

.markdown ul > li > p,
.markdown ol > li > p {
  margin: 0.2em 0;
}

.markdown code {
  margin: 0 1px;
  padding: 0.2em 0.4em;
  font-size: 0.9em;
  background: @site-markdown-code-bg;
  border: 1px solid @border-color-split;
  border-radius: 3px;
}

.markdown pre {
  font-family: @code-family;
  background: @site-markdown-code-bg;
  border-radius: @border-radius-base;
}

.markdown pre code {
  margin: 0;
  padding: 0;
  overflow: auto;
  color: @site-text-color;
  font-size: @font-size-base - 1px;
  background: #f5f5f5;
  border: none;
}

.markdown strong,
.markdown b {
  font-weight: 500;
}

.markdown > table {
  width: 100%;
  margin: 8px 0 16px;
  empty-cells: show;
  border: 1px solid @site-border-color-split;
  border-collapse: collapse;
  border-spacing: 0;
}

.markdown > table th {
  color: #5c6b77;
  font-weight: 500;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.02);
}

.markdown > table th,
.markdown > table td {
  padding: 16px 24px;
  text-align: left;
  border: 1px solid @site-border-color-split;
}

.markdown blockquote {
  margin: 1em 0;
  padding-left: 0.8em;
  color: @site-text-color-secondary;
  font-size: 90%;
  border-left: 4px solid @site-border-color-split;

  .ant-row-rtl & {
    padding-right: 0.8em;
    padding-left: 0;
    border-right: 4px solid @site-border-color-split;
    border-left: none;
  }
}

.markdown blockquote p {
  margin: 0;
}

.markdown .anchor {
  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.3s;

  .ant-row-rtl & {
    margin-right: 8px;
    margin-left: 0;
  }
}

.markdown .waiting {
  color: #ccc;
  cursor: not-allowed;
}

.markdown a.edit-button {
  display: inline-block;
  margin-left: 8px;
  text-decoration: none;

  .ant-row-rtl & {
    margin-right: 8px;
    margin-left: 0;
  }
  i {
    color: @site-text-color-secondary;

    &:hover {
      color: @primary-color;
    }
  }

  .anticon {
    display: block;
    font-size: 16px;
  }
}

.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
  display: inline-block;
  opacity: 1;
}

.markdown > br,
.markdown > p > br {
  clear: both;
}

.markdown.api-container {
  overflow-x: auto;

  table {
    min-width: 720px;
    margin: 2em 0;
    font-size: @font-size-base - 1px;
    font-family: @code-family;
    line-height: @line-height-base;
    border: 1px solid @border-color-split;

    th,
    td {
      padding: 12px;
      border-color: @border-color-split;
      border-width: 1px 0;
    }

    th {
      padding-top: 14px;
      border-width: 0 0 2px 0;
    }

    tbody tr {
      transition: all 0.3s;
      &:hover {
        background: rgba(60, 90, 100, 0.04);
      }
    }

    td {
      &:first-child {
        width: 20%;
        color: @gray-8;
        font-weight: 600;
      }
      &:nth-child(3) {
        width: 22%;
        color: @magenta-7;
        font-size: @font-size-base - 1px;
        word-break: break-all;
      }
      &:nth-child(4) {
        width: 16%;
        font-size: @font-size-base - 1px;
      }
    }
  }

  hr {
    margin: 12px 0;
  }
}

@demo-grid-color: #0092ff;

.grid-demo,
[id^='components-grid-demo-'] {
  .demo-row,
  .code-box-demo .demo-row {
    margin-bottom: 8px;
    overflow: hidden;
    background-image: linear-gradient(
      90deg,
      #f5f5f5 4.16666667%,
      transparent 4.16666667%,
      transparent 8.33333333%,
      #f5f5f5 8.33333333%,
      #f5f5f5 12.5%,
      transparent 12.5%,
      transparent 16.66666667%,
      #f5f5f5 16.66666667%,
      #f5f5f5 20.83333333%,
      transparent 20.83333333%,
      transparent 25%,
      #f5f5f5 25%,
      #f5f5f5 29.16666667%,
      transparent 29.16666667%,
      transparent 33.33333333%,
      #f5f5f5 33.33333333%,
      #f5f5f5 37.5%,
      transparent 37.5%,
      transparent 41.66666667%,
      #f5f5f5 41.66666667%,
      #f5f5f5 45.83333333%,
      transparent 45.83333333%,
      transparent 50%,
      #f5f5f5 50%,
      #f5f5f5 54.16666667%,
      transparent 54.16666667%,
      transparent 58.33333333%,
      #f5f5f5 58.33333333%,
      #f5f5f5 62.5%,
      transparent 62.5%,
      transparent 66.66666667%,
      #f5f5f5 66.66666667%,
      #f5f5f5 70.83333333%,
      transparent 70.83333333%,
      transparent 75%,
      #f5f5f5 75%,
      #f5f5f5 79.16666667%,
      transparent 79.16666667%,
      transparent 83.33333333%,
      #f5f5f5 83.33333333%,
      #f5f5f5 87.5%,
      transparent 87.5%,
      transparent 91.66666667%,
      #f5f5f5 91.66666667%,
      #f5f5f5 95.83333333%,
      transparent 95.83333333%
    );
  }
  .ant-row > div,
  .code-box-demo .ant-row > div {
    min-height: 30px;
    margin-top: 8px;
    margin-bottom: 8px;
    color: #fff;
    text-align: center;
    border-radius: 0;
  }
  .code-box-demo .ant-row > div:not(.gutter-row) {
    padding: 16px 0;
    background: @demo-grid-color;
    &:nth-child(2n + 1) {
      background: fade(@demo-grid-color, 75%);
    }
  }
  .ant-row .demo-col,
  .code-box-demo .ant-row .demo-col {
    margin-top: 0;
    margin-bottom: 0;
    padding: 30px 0;
    color: @white;
    font-size: 18px;
    text-align: center;
    border: none;
  }
  .ant-row .demo-col-1 {
    background: fade(@demo-grid-color, 75%);
  }
  .ant-row .demo-col-2,
  .code-box-demo .ant-row .demo-col-2 {
    background: fade(@demo-grid-color, 50%);
  }
  .ant-row .demo-col-3,
  .code-box-demo .ant-row .demo-col-3 {
    color: #999;
    background: rgba(255, 255, 255, 0.2);
  }
  .ant-row .demo-col-4,
  .code-box-demo .ant-row .demo-col-4 {
    background: fade(@demo-grid-color, 60%);
  }
  .ant-row .demo-col-5,
  .code-box-demo .ant-row .demo-col-5 {
    color: #999;
    background: rgba(255, 255, 255, 0.2);
  }
  .code-box-demo .height-100 {
    height: 100px;
    line-height: 100px;
  }
  .code-box-demo .height-50 {
    height: 50px;
    line-height: 50px;
  }
  .code-box-demo .height-120 {
    height: 120px;
    line-height: 120px;
  }
  .code-box-demo .height-80 {
    height: 80px;
    line-height: 80px;
  }
}

[id='components-grid-demo-playground'],
[id='components-grid-demo-gutter'] {
  > .code-box-demo .ant-row > div {
    margin-top: 0;
    margin-bottom: 0;
  }
}

// For Changelog
.markdown ul.ant-timeline {
  line-height: 2;
  li.ant-timeline-item {
    margin: 0;
    padding: 0 0 30px;
    list-style: none;
    .ant-timeline-item-content {
      position: relative;
      top: -14px;
      padding-left: 32px;
      font-size: 14px;
      > h2 {
        margin-top: 0;
        padding-top: 4px;
      }
    }
  }
  li.ant-timeline-item:first-child {
    margin-top: 40px;
  }
}

.markdown {
  color: @site-text-color;
  font-size: 14px;
  line-height: 2;
}

.highlight {
  line-height: 1.5;
}

.markdown img {
  max-width: ~'calc(100% - 32px)';
}

.markdown p > img {
  margin: 34px 0;
  box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
}

.markdown p > img.markdown-inline-image {
  margin: 0;
  box-shadow: none;
}

.markdown h1 {
  margin-top: 8px;
  margin-bottom: 20px;
  color: @site-heading-color;
  font-weight: 500;
  font-size: 30px;
  font-family: Avenir, @font-family, sans-serif;
  line-height: 38px;

  .subtitle {
    margin-left: 12px;

    .ant-row-rtl & {
      margin-right: 12px;
      margin-left: 0;
    }
  }
}

.markdown h2 {
  font-size: 24px;
  line-height: 32px;
}

.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  clear: both;
  margin: 1.6em 0 0.6em;
  color: @site-heading-color;
  font-weight: 500;
  font-family: Avenir, @font-family, sans-serif;
}

.markdown h3 {
  font-size: 18px;
}
.markdown h4 {
  font-size: 16px;
}
.markdown h5 {
  font-size: 14px;
}
.markdown h6 {
  font-size: 12px;
}

.markdown hr {
  clear: both;
  height: 1px;
  margin: 56px 0;
  background: @site-border-color-split;
  border: 0;
}

.markdown p,
.markdown pre {
  margin: 1em 0;
}

.markdown ul > li {
  margin-left: 20px;
  padding-left: 4px;
  list-style-type: circle;

  .ant-row-rtl & {
    margin-right: 20px;
    margin-left: 0;
    padding-right: 4px;
    padding-left: 0;
  }
  &:empty {
    display: none;
  }
}

.markdown ol > li {
  margin-left: 20px;
  padding-left: 4px;
  list-style-type: decimal;

  .ant-row-rtl & {
    margin-right: 20px;
    margin-left: 0;
    padding-right: 4px;
    padding-left: 0;
  }
}

.markdown ul > li > p,
.markdown ol > li > p {
  margin: 0.2em 0;
}

.markdown code {
  margin: 0 1px;
  padding: 0.2em 0.4em;
  font-size: 0.9em;
  background: @site-markdown-code-bg;
  border: 1px solid @border-color-split;
  border-radius: 3px;
}

.markdown pre {
  font-family: @code-family;
  background: @site-markdown-code-bg;
  border-radius: @border-radius-base;
}

.markdown pre code {
  margin: 0;
  padding: 0;
  overflow: auto;
  color: @site-text-color;
  font-size: @font-size-base - 1px;
  background: #f5f5f5;
  border: none;
}

.markdown strong,
.markdown b {
  font-weight: 500;
}

.markdown > table {
  width: 100%;
  margin: 8px 0 16px;
  empty-cells: show;
  border: 1px solid @site-border-color-split;
  border-collapse: collapse;
  border-spacing: 0;
}

.markdown > table th {
  color: #5c6b77;
  font-weight: 500;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.02);
}

.markdown > table th,
.markdown > table td {
  padding: 16px 24px;
  text-align: left;
  border: 1px solid @site-border-color-split;
}

.markdown blockquote {
  margin: 1em 0;
  padding-left: 0.8em;
  color: @site-text-color-secondary;
  font-size: 90%;
  border-left: 4px solid @site-border-color-split;

  .ant-row-rtl & {
    padding-right: 0.8em;
    padding-left: 0;
    border-right: 4px solid @site-border-color-split;
    border-left: none;
  }
}

.markdown blockquote p {
  margin: 0;
}

.markdown .anchor {
  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.3s;

  .ant-row-rtl & {
    margin-right: 8px;
    margin-left: 0;
  }
}

.markdown .waiting {
  color: #ccc;
  cursor: not-allowed;
}

.markdown a.edit-button {
  display: inline-block;
  margin-left: 8px;
  text-decoration: none;

  .ant-row-rtl & {
    margin-right: 8px;
    margin-left: 0;
  }
  i {
    color: @site-text-color-secondary;

    &:hover {
      color: @primary-color;
    }
  }

  .anticon {
    display: block;
    font-size: 16px;
  }
}

.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
  display: inline-block;
  opacity: 1;
}

.markdown > br,
.markdown > p > br {
  clear: both;
}

.markdown.api-container {
  overflow-x: auto;

  table {
    min-width: 720px;
    margin: 2em 0;
    font-size: @font-size-base - 1px;
    font-family: @code-family;
    line-height: @line-height-base;
    border: 1px solid @border-color-split;

    th,
    td {
      padding: 12px;
      border-color: @border-color-split;
      border-width: 1px 0;
    }

    th {
      padding-top: 14px;
      border-width: 0 0 2px 0;
    }

    tbody tr {
      transition: all 0.3s;
      &:hover {
        background: rgba(60, 90, 100, 0.04);
      }
    }

    td {
      &:first-child {
        width: 20%;
        color: @gray-8;
        font-weight: 600;
      }
      &:nth-child(3) {
        width: 22%;
        color: @magenta-7;
        font-size: @font-size-base - 1px;
        word-break: break-all;
      }
      &:nth-child(4) {
        width: 16%;
        font-size: @font-size-base - 1px;
      }
    }
  }

  hr {
    margin: 12px 0;
  }
}

@demo-grid-color: #0092ff;

.grid-demo,
[id^='components-grid-demo-'] {
  .demo-row,
  .code-box-demo .demo-row {
    margin-bottom: 8px;
    overflow: hidden;
    background-image: linear-gradient(
      90deg,
      #f5f5f5 4.16666667%,
      transparent 4.16666667%,
      transparent 8.33333333%,
      #f5f5f5 8.33333333%,
      #f5f5f5 12.5%,
      transparent 12.5%,
      transparent 16.66666667%,
      #f5f5f5 16.66666667%,
      #f5f5f5 20.83333333%,
      transparent 20.83333333%,
      transparent 25%,
      #f5f5f5 25%,
      #f5f5f5 29.16666667%,
      transparent 29.16666667%,
      transparent 33.33333333%,
      #f5f5f5 33.33333333%,
      #f5f5f5 37.5%,
      transparent 37.5%,
      transparent 41.66666667%,
      #f5f5f5 41.66666667%,
      #f5f5f5 45.83333333%,
      transparent 45.83333333%,
      transparent 50%,
      #f5f5f5 50%,
      #f5f5f5 54.16666667%,
      transparent 54.16666667%,
      transparent 58.33333333%,
      #f5f5f5 58.33333333%,
      #f5f5f5 62.5%,
      transparent 62.5%,
      transparent 66.66666667%,
      #f5f5f5 66.66666667%,
      #f5f5f5 70.83333333%,
      transparent 70.83333333%,
      transparent 75%,
      #f5f5f5 75%,
      #f5f5f5 79.16666667%,
      transparent 79.16666667%,
      transparent 83.33333333%,
      #f5f5f5 83.33333333%,
      #f5f5f5 87.5%,
      transparent 87.5%,
      transparent 91.66666667%,
      #f5f5f5 91.66666667%,
      #f5f5f5 95.83333333%,
      transparent 95.83333333%
    );
  }
  .ant-row > div,
  .code-box-demo .ant-row > div {
    min-height: 30px;
    margin-top: 8px;
    margin-bottom: 8px;
    color: #fff;
    text-align: center;
    border-radius: 0;
  }
  .code-box-demo .ant-row > div:not(.gutter-row) {
    padding: 16px 0;
    background: @demo-grid-color;
    &:nth-child(2n + 1) {
      background: fade(@demo-grid-color, 75%);
    }
  }
  .ant-row .demo-col,
  .code-box-demo .ant-row .demo-col {
    margin-top: 0;
    margin-bottom: 0;
    padding: 30px 0;
    color: @white;
    font-size: 18px;
    text-align: center;
    border: none;
  }
  .ant-row .demo-col-1 {
    background: fade(@demo-grid-color, 75%);
  }
  .ant-row .demo-col-2,
  .code-box-demo .ant-row .demo-col-2 {
    background: fade(@demo-grid-color, 50%);
  }
  .ant-row .demo-col-3,
  .code-box-demo .ant-row .demo-col-3 {
    color: #999;
    background: rgba(255, 255, 255, 0.2);
  }
  .ant-row .demo-col-4,
  .code-box-demo .ant-row .demo-col-4 {
    background: fade(@demo-grid-color, 60%);
  }
  .ant-row .demo-col-5,
  .code-box-demo .ant-row .demo-col-5 {
    color: #999;
    background: rgba(255, 255, 255, 0.2);
  }
  .code-box-demo .height-100 {
    height: 100px;
    line-height: 100px;
  }
  .code-box-demo .height-50 {
    height: 50px;
    line-height: 50px;
  }
  .code-box-demo .height-120 {
    height: 120px;
    line-height: 120px;
  }
  .code-box-demo .height-80 {
    height: 80px;
    line-height: 80px;
  }
}

[id='components-grid-demo-playground'],
[id='components-grid-demo-gutter'] {
  > .code-box-demo .ant-row > div {
    margin-top: 0;
    margin-bottom: 0;
  }
}

// For Changelog
.markdown ul.ant-timeline {
  line-height: 2;
  li.ant-timeline-item {
    margin: 0;
    padding: 0 0 30px;
    list-style: none;
    .ant-timeline-item-content {
      position: relative;
      top: -14px;
      padding-left: 32px;
      font-size: 14px;
      > h2 {
        margin-top: 0;
        padding-top: 4px;
      }
    }
  }
  li.ant-timeline-item:first-child {
    margin-top: 40px;
  }
}


site: fix markdown list style

site: fix markdown list style

.markdown {
  color: @text-color;
  font-size: 14px;
  line-height: 1.8;
}

.highlight {
  line-height: 1.5;
}

.markdown img {
  vertical-align: middle;
  max-width: 100%;
}

.markdown h1 {
  color: @heading-color;
  font-weight: 500;
  line-height: 40px;
  margin-bottom: 24px;
  margin-top: 8px;
  font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;

  .subtitle {
    font-weight: normal;
    font-size: 90%;
    margin-left: 12px;
  }
}

.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  color: @heading-color;
  font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
  margin: 1.6em 0 0.6em;
  font-weight: 500;
  clear: both;
}

.markdown h1 { font-size: 28px; }
.markdown h2 { font-size: 22px; }
.markdown h3 { font-size: 18px; }
.markdown h4 { font-size: 16px; }
.markdown h5 { font-size: 14px; }
.markdown h6 { font-size: 12px; }

.markdown hr {
  height: 1px;
  border: 0;
  background: #e9e9e9;
  margin: 16px 0;
  clear: both;
}

.markdown p,
.markdown pre {
  margin: 1em 0;
}

.markdown ul > li {
  list-style-type: circle;
  margin-left: 20px;
  padding-left: 4px;
  &:empty {
    display: none;
  }
}

.markdown ol > li {
  list-style-type: decimal;
  margin-left: 20px;
  padding-left: 4px;
}

.markdown ul > li > p,
.markdown ol > li > p {
  margin: 0.2em 0;
}

.markdown code {
  margin: 0 1px;
  background: #f7f7f7;
  padding: .2em .4em;
  border-radius: 3px;
  font-size: .9em;
  border: 1px solid #eee;
}

.markdown pre {
  border-radius: @border-radius-base;
  background: #f7f7f7;
  font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

.markdown pre code {
  border: none;
  background: #f7f7f7;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: @text-color;
  overflow: auto;
}

.markdown strong,
.markdown b {
  font-weight: 600;
}

.markdown > table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #e9e9e9;
  width: 100%;
  margin: 16px 0;
}

.markdown > table th {
  white-space: nowrap;
  color: #5c6b77;
  font-weight: 600;
}

.markdown > table th,
.markdown > table td {
  border: 1px solid #e9e9e9;
  padding: 8px 16px;
  text-align: left;
}

.markdown > table th {
  background: #f7f7f7;
}

.markdown blockquote {
  font-size: 90%;
  color: #999;
  border-left: 4px solid #e9e9e9;
  padding-left: 0.8em;
  margin: 1em 0;
}

.markdown blockquote p {
  margin: 0;
}

.markdown .anchor {
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-left: 8px;
}

.markdown .waiting {
  color: #ccc;
  cursor: not-allowed;
}

.markdown a.edit-button {
  line-height: 12px;
  display: inline-block;
  margin-left: 10px;
  height: 12px;

  i {
    color: #999;

    &:hover {
      color: @primary-color;
    }
  }

  .anticon {
    display: block;
    font-size: 16px;
  }
}

.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
  opacity: 1;
  display: inline-block;
}

.markdown > br,
.markdown > p > br {
  clear: both;
}

.markdown.api-container table {
  font-size: 13px;
  td:first-child {
    background: #fcfcfc;
    font-weight: 500;
    width: 20%;
    font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
  }
  td:nth-child(3) {
    width: 22%;
    font-size: 12px;
    font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
  }
  td:last-child {
    width: 13%;
    font-size: 12px;
    font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
  }
}

.grid-demo,
[id^="components-grid-demo-"] {
  .demo-row,
  .code-box-demo .demo-row {
    background-image: linear-gradient(90deg, #f5f5f5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #f5f5f5 8.33333333%, #f5f5f5 12.5%, transparent 12.5%, transparent 16.66666667%, #f5f5f5 16.66666667%, #f5f5f5 20.83333333%, transparent 20.83333333%, transparent 25%, #f5f5f5 25%, #f5f5f5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #f5f5f5 33.33333333%, #f5f5f5 37.5%, transparent 37.5%, transparent 41.66666667%, #f5f5f5 41.66666667%, #f5f5f5 45.83333333%, transparent 45.83333333%, transparent 50%, #f5f5f5 50%, #f5f5f5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #f5f5f5 58.33333333%, #f5f5f5 62.5%, transparent 62.5%, transparent 66.66666667%, #f5f5f5 66.66666667%, #f5f5f5 70.83333333%, transparent 70.83333333%, transparent 75%, #f5f5f5 75%, #f5f5f5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #f5f5f5 83.33333333%, #f5f5f5 87.5%, transparent 87.5%, transparent 91.66666667%, #f5f5f5 91.66666667%, #f5f5f5 95.83333333%, transparent 95.83333333%);
    overflow: hidden;
    margin-bottom: 8px;
  }
  .ant-row-flex,
  .code-box-demo .ant-row-flex {
    background: #f5f5f5;
  }
  .ant-row > div,
  .code-box-demo .ant-row > div,
  .ant-row-flex > div,
  .code-box-demo .ant-row-flex > div {
    padding: 5px 0;
    text-align: center;
    border-radius: 0;
    min-height: 30px;
    margin-top: 8px;
    margin-bottom: 8px;
    color: #fff;
  }
  .code-box-demo .ant-row > div:not(.gutter-row),
  .code-box-demo .ant-row-flex > div:not(.gutter-row) {
    background: #00a0e9;
    padding: 16px 0;
    &:nth-child(2n+1) {
      background: fade(#00a0e9, 70%);
    }
  }
  .ant-row .demo-col,
  .code-box-demo .ant-row .demo-col {
    text-align: center;
    padding: 30px 0;
    color: #fff;
    font-size: 18px;
    border: none;
    margin-top: 0;
    margin-bottom: 0;
  }
  .ant-row .demo-col-1,
  .ant-row .demo-col-1 {
    background: fade(#00a0e9, 70%);
  }
  .ant-row .demo-col-2,
  .code-box-demo .ant-row .demo-col-2 {
    background: fade(#00a0e9, 50%);
  }
  .ant-row .demo-col-3,
  .code-box-demo .ant-row .demo-col-3 {
    background: rgba(255, 255, 255, 0.2);
    color: #999;
  }
  .ant-row .demo-col-4,
  .code-box-demo .ant-row .demo-col-4 {
    background: fade(#00a0e9, 60%);
  }
  .ant-row .demo-col-5,
  .code-box-demo .ant-row .demo-col-5 {
    background: rgba(255, 255, 255, 0.5);
    color: #999;
  }
  .code-box-demo .height-100 {
    height: 100px;
    line-height: 100px;
  }
  .code-box-demo .height-50 {
    height: 50px;
    line-height: 50px;
  }
  .code-box-demo .height-120 {
    height: 120px;
    line-height: 120px;
  }
  .code-box-demo .height-80 {
    height: 80px;
    line-height: 80px;
  }
}

// For Changelog
.markdown {
  ul.ant-timeline {
    li.ant-timeline-item {
      list-style: none;
      margin: 0;
      padding: 0 0 30px;
      .ant-timeline-item-content {
        font-size: 14px;
        padding-left: 32px;
        position: relative;
        top: -14px;
        > h2 {
          margin-top: 0;
          padding-top: 0.5px;
        }
      }
    }
    li.ant-timeline-item:first-child {
      margin-top: 40px;
    }
  }
}

.markdown {
  color: @text-color;
  font-size: 14px;
  line-height: 1.8;
}

.highlight {
  line-height: 1.5;
}

.markdown img {
  vertical-align: middle;
  max-width: 100%;
}

.markdown h1 {
  color: @heading-color;
  font-weight: 500;
  line-height: 40px;
  margin-bottom: 24px;
  margin-top: 8px;
  font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;

  .subtitle {
    font-weight: normal;
    font-size: 90%;
    margin-left: 12px;
  }
}

.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  color: @heading-color;
  font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
  margin: 1.6em 0 0.6em;
  font-weight: 500;
  clear: both;
}

.markdown h1 { font-size: 28px; }
.markdown h2 { font-size: 22px; }
.markdown h3 { font-size: 18px; }
.markdown h4 { font-size: 16px; }
.markdown h5 { font-size: 14px; }
.markdown h6 { font-size: 12px; }

.markdown hr {
  height: 1px;
  border: 0;
  background: #e9e9e9;
  margin: 16px 0;
  clear: both;
}

.markdown p,
.markdown pre {
  margin: 1em 0;
}

.markdown ul > li {
  list-style: circle inside;
  &:empty {
    display: none;
  }
}

.markdown ol > li {
  list-style: decimal inside;
}

.markdown ul > li > p,
.markdown ol > li > p {
  margin: 0.2em 0;
  display: inline;
}

.markdown code {
  margin: 0 1px;
  background: #f7f7f7;
  padding: .2em .4em;
  border-radius: 3px;
  font-size: .9em;
  border: 1px solid #eee;
}

.markdown pre {
  border-radius: @border-radius-base;
  background: #f7f7f7;
  font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

.markdown pre code {
  border: none;
  background: #f7f7f7;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: @text-color;
  overflow: auto;
}

.markdown strong,
.markdown b {
  font-weight: 600;
}

.markdown > table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #e9e9e9;
  width: 100%;
  margin: 16px 0;
}

.markdown > table th {
  white-space: nowrap;
  color: #5c6b77;
  font-weight: 600;
}

.markdown > table th,
.markdown > table td {
  border: 1px solid #e9e9e9;
  padding: 8px 16px;
  text-align: left;
}

.markdown > table th {
  background: #f7f7f7;
}

.markdown blockquote {
  font-size: 90%;
  color: #999;
  border-left: 4px solid #e9e9e9;
  padding-left: 0.8em;
  margin: 1em 0;
}

.markdown blockquote p {
  margin: 0;
}

.markdown .anchor {
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-left: 8px;
}

.markdown .waiting {
  color: #ccc;
  cursor: not-allowed;
}

.markdown a.edit-button {
  line-height: 12px;
  display: inline-block;
  margin-left: 10px;
  height: 12px;

  i {
    color: #999;

    &:hover {
      color: @primary-color;
    }
  }

  .anticon {
    display: block;
    font-size: 16px;
  }
}

.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
  opacity: 1;
  display: inline-block;
}

.markdown > br,
.markdown > p > br {
  clear: both;
}

.markdown.api-container table {
  font-size: 13px;
  td:first-child {
    background: #fcfcfc;
    font-weight: 500;
    width: 20%;
    font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
  }
  td:nth-child(3) {
    width: 22%;
    font-size: 12px;
    font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
  }
  td:last-child {
    width: 13%;
    font-size: 12px;
    font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
  }
}

.grid-demo,
[id^="components-grid-demo-"] {
  .demo-row,
  .code-box-demo .demo-row {
    background-image: linear-gradient(90deg, #f5f5f5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #f5f5f5 8.33333333%, #f5f5f5 12.5%, transparent 12.5%, transparent 16.66666667%, #f5f5f5 16.66666667%, #f5f5f5 20.83333333%, transparent 20.83333333%, transparent 25%, #f5f5f5 25%, #f5f5f5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #f5f5f5 33.33333333%, #f5f5f5 37.5%, transparent 37.5%, transparent 41.66666667%, #f5f5f5 41.66666667%, #f5f5f5 45.83333333%, transparent 45.83333333%, transparent 50%, #f5f5f5 50%, #f5f5f5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #f5f5f5 58.33333333%, #f5f5f5 62.5%, transparent 62.5%, transparent 66.66666667%, #f5f5f5 66.66666667%, #f5f5f5 70.83333333%, transparent 70.83333333%, transparent 75%, #f5f5f5 75%, #f5f5f5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #f5f5f5 83.33333333%, #f5f5f5 87.5%, transparent 87.5%, transparent 91.66666667%, #f5f5f5 91.66666667%, #f5f5f5 95.83333333%, transparent 95.83333333%);
    overflow: hidden;
    margin-bottom: 8px;
  }
  .ant-row-flex,
  .code-box-demo .ant-row-flex {
    background: #f5f5f5;
  }
  .ant-row > div,
  .code-box-demo .ant-row > div,
  .ant-row-flex > div,
  .code-box-demo .ant-row-flex > div {
    padding: 5px 0;
    text-align: center;
    border-radius: 0;
    min-height: 30px;
    margin-top: 8px;
    margin-bottom: 8px;
    color: #fff;
  }
  .code-box-demo .ant-row > div:not(.gutter-row),
  .code-box-demo .ant-row-flex > div:not(.gutter-row) {
    background: #00a0e9;
    padding: 16px 0;
    &:nth-child(2n+1) {
      background: fade(#00a0e9, 70%);
    }
  }
  .ant-row .demo-col,
  .code-box-demo .ant-row .demo-col {
    text-align: center;
    padding: 30px 0;
    color: #fff;
    font-size: 18px;
    border: none;
    margin-top: 0;
    margin-bottom: 0;
  }
  .ant-row .demo-col-1,
  .ant-row .demo-col-1 {
    background: fade(#00a0e9, 70%);
  }
  .ant-row .demo-col-2,
  .code-box-demo .ant-row .demo-col-2 {
    background: fade(#00a0e9, 50%);
  }
  .ant-row .demo-col-3,
  .code-box-demo .ant-row .demo-col-3 {
    background: rgba(255, 255, 255, 0.2);
    color: #999;
  }
  .ant-row .demo-col-4,
  .code-box-demo .ant-row .demo-col-4 {
    background: fade(#00a0e9, 60%);
  }
  .ant-row .demo-col-5,
  .code-box-demo .ant-row .demo-col-5 {
    background: rgba(255, 255, 255, 0.5);
    color: #999;
  }
  .code-box-demo .height-100 {
    height: 100px;
    line-height: 100px;
  }
  .code-box-demo .height-50 {
    height: 50px;
    line-height: 50px;
  }
  .code-box-demo .height-120 {
    height: 120px;
    line-height: 120px;
  }
  .code-box-demo .height-80 {
    height: 80px;
    line-height: 80px;
  }
}

// For Changelog
.markdown {
  ul.ant-timeline {
    li.ant-timeline-item {
      list-style: none;
      margin: 0;
      padding: 0 0 30px;
      .ant-timeline-item-content {
        font-size: 14px;
        padding-left: 32px;
        position: relative;
        top: -14px;
        > h2 {
          margin-top: 0;
          padding-top: 0.5px;
        }
      }
    }
    li.ant-timeline-item:first-child {
      margin-top: 40px;
    }
  }
}


add vertical-align to ToggleSwitch icon

add vertical-align to ToggleSwitch icon

Issue: ENYO-1959
Enyo-DCO-1.1-Signed-off-by: Ryan Duffy (ryan.duffy@lge.com)

/* ToggleSwitch */
.moon-checkbox.moon-toggle-switch {
	border-radius: (@moon-toggleswitch-height / 2);
	width: @moon-toggleswitch-width;
	height: @moon-toggleswitch-height;
	line-height: @moon-toggleswitch-height;
	background-color: @moon-checkbox-toggle-switch-bg-color;
	font-family: @moon-icon-font-family;
	position: relative;
	text-align: left;
	cursor: default;

	.moon-taparea(@moon-toggleswitch-height);

	.moon-icon {
		visibility: visible;
		background-color: transparent;
		left: 0;
		color: @moon-checkbox-toggle-switch-color;
		width: @moon-toggleswitch-height;
		height: inherit;
		font-size: (@moon-toggleswitch-height * 2);
		line-height: inherit;
		vertical-align: top;	// The TV incorrectly positions the icon too low without this
	}
	&[checked] {
		background-color: @moon-checkbox-toggle-switch-checked-bg-color;

		.moon-icon {
			left: (@moon-toggleswitch-width - @moon-toggleswitch-height);
			color: @moon-checkbox-toggle-switch-checked-color;
		}
	}
	&[disabled] {
		background-color: @moon-checkbox-toggle-switch-bg-color;

		.moon-icon {
			color: @moon-checkbox-toggle-switch-color;
		}
	}
	&.animated {
		-webkit-transition: background-color 0.2s;
		transition: background-color 0.2s;

		.moon-icon {
			-webkit-transition: left 0.2s, color 0.2s;
			transition: left 0.2s, color 0.2s;
		}
	}
}
.moon-toggle-item.spotlight .moon-checkbox.moon-toggle-switch .moon-icon {
	// to override the ghost checkmark opacity rules, since this inherits its style from moon-checkbox
	opacity: 1;
}

/* ToggleSwitch */
.moon-checkbox.moon-toggle-switch {
	border-radius: (@moon-toggleswitch-height / 2);
	width: @moon-toggleswitch-width;
	height: @moon-toggleswitch-height;
	line-height: @moon-toggleswitch-height;
	background-color: @moon-checkbox-toggle-switch-bg-color;
	font-family: @moon-icon-font-family;
	position: relative;
	text-align: left;
	cursor: default;

	.moon-taparea(@moon-toggleswitch-height);

	.moon-icon {
		visibility: visible;
		background-color: transparent;
		left: 0;
		color: @moon-checkbox-toggle-switch-color;
		width: @moon-toggleswitch-height;
		height: inherit;
		font-size: (@moon-toggleswitch-height * 2);
		line-height: inherit;
	}
	&[checked] {
		background-color: @moon-checkbox-toggle-switch-checked-bg-color;

		.moon-icon {
			left: (@moon-toggleswitch-width - @moon-toggleswitch-height);
			color: @moon-checkbox-toggle-switch-checked-color;
		}
	}
	&[disabled] {
		background-color: @moon-checkbox-toggle-switch-bg-color;

		.moon-icon {
			color: @moon-checkbox-toggle-switch-color;
		}
	}
	&.animated {
		-webkit-transition: background-color 0.2s;
		transition: background-color 0.2s;

		.moon-icon {
			-webkit-transition: left 0.2s, color 0.2s;
			transition: left 0.2s, color 0.2s;
		}
	}
}
.moon-toggle-item.spotlight .moon-checkbox.moon-toggle-switch .moon-icon {
	// to override the ghost checkmark opacity rules, since this inherits its style from moon-checkbox
	opacity: 1;
}


style tweak for popover for site header

style tweak for popover for site header

.bucky-nav-large li:first-of-type+li{
  position:absolute;
  width:40%;
  left:140px;
}
.portlet-search-bar ul.dropdown-menu {
  min-width: 90%;

  li:first-of-type+li {
    position: relative;
    width: inherit;
    left: 0;
  }
}

.bucky-nav ul li a:hover {
  text-decoration:none;
  color:#ccc;
}
.navbar-default {
  height:52px !important;
}
.container-fluid {
  height:inherit;
}

.navbar-default .navbar-toggle {
  float: left;
  margin-left: 8px;
  background-color:rgba(20,20,20,0.7);
  border-color:transparent;
  .icon-bar {
    background-color:@white;
  }
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color:rgba(20,20,20,0.9);
}
.navbar.navbar-default .navbar-header,
.navbar.navbar-inverse .navbar-header {
  margin-left: -15px;
}
.navbar-brand {
  padding:15px 15px 15px 0px;
}
.bucky-nav ul {
  width: 100% !important;
  margin:50px 0px 30px;
  li {
    position: relative;
    display: block;
    padding: 8px 30px;
    margin-bottom: -1px;
    background-color: transparent;
    border: none;
    text-align: left;
    a {
      color:@white;
      font-size:20px;
    }
  }
}
#bucky-navbar-collapse {
  padding:0px;
  border-color:@color1;
}
.navbar {
 border-radius : 0;
 border: 0;
 margin: 0;
}
.navbar-nav {
  margin:0px;
}
.navbar-fixed-top {
  .container-fluid {
  }
}

.portlet-title h1 i {
  margin: 6px;
}

.main-search {
  width: 90%;
  display: block;
  background-color: @white;
  margin-top: 6px;
  margin-bottom: 3px;
  border-top-left-radius:4px;
  border-bottom-left-radius:4px;
  font-size: 1.6em;
  color: @color3;
  float: right;
  padding: 3px 0px 3px 15px;
  height:38px;
}
.main-search[placeholder="Search My-UW"] {
  color: #222;
}
.main-search:focus {
  outline: none;
}
.btn-search {
  padding:9px 12px;
  border:0px solid transparent;
  background-color:#eee;
  top:2px;
  height:38px;
  color:#222;
  &:hover {
    background-color:#ddd;
    color:#111;
  }
  .fa-search {
    font-size:1.2em;
  }
}
.search-mobile {
  background-color:#333;
  padding:12px;

}

.navbar-header {
  height: 52px;
}

.navbar-header .search-mobile-icon .fa-search {
  float:right;
  font-size:1.7em;
  color:#fff;
  padding:14px 20px;
  cursor:pointer;
  border-left:1px solid @color2;
}
.navbar-header .search-mobile-icon .fa-search:hover {
  background-color:@color2;
}
.search-mobile-icon {
  position: absolute;
  top: 0;
  right: 0;
  height: 52px;
}

//---------------------Username options-css ------------------------------------

portal-header li.username-menu {
    color: @white;
    line-height: 50px;
    margin-right: 20px;

    .gravatar {
      border-radius: 2000px;
      height: 32px;
      margin-right:5px;
    }

    .username-option:hover {
      cursor: pointer;
    }

    .popover {
      left: inherit !important;
      top: 40px !important;
      right: -10px;
    }

    .arrow {
      left: 92% !important;
    }

    .popover-content {
      padding: 5px;
    }

    .username-menu-template {
      line-height: 1.7em;
      width : 160px;
      text-align: right;
      ul li {
        color: @black;

        a {
          padding-left: 43px;
        }
      }
    }
}

//-----------------end-Username options-css ------------------------------------

//---------------------crest and title css -------------------------------------

.navbar-header div.header-crest {
  .beta-logo {
    font-size:0.55em;
    color:#fcf49c;
    position:relative;
    top:5px;
    margin-left:3px;
  }

  a {
     color: @white;
     font-weight: 200;
  }

  .title {
    font-size: 26px;
    margin-left: 0px;
    position: relative;
    top: -8px;
  }

  .header-inner {
    height: 52px;
    overflow: hidden;
  }

  a:link, a:visited, a:hover,
  a:focus, a:active {
     text-decoration: none;
  }

  img {
    height: 80px;
    position: relative;
    top: -18px;
    left: -8px;
  }
}

//----------------end--crest and title css -------------------------------------

.bucky-nav-large li:first-of-type+li{
  position:absolute;
  width:40%;
  left:140px;
}
.portlet-search-bar ul.dropdown-menu {
  min-width: 90%;

  li:first-of-type+li {
    position: relative;
    width: inherit;
    left: 0;
  }
}

.bucky-nav ul li a:hover {
  text-decoration:none;
  color:#ccc;
}
.navbar-default {
  height:52px !important;
}
.container-fluid {
  height:inherit;
}

.navbar-default .navbar-toggle {
  float: left;
  margin-left: 8px;
  background-color:rgba(20,20,20,0.7);
  border-color:transparent;
  .icon-bar {
    background-color:@white;
  }
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color:rgba(20,20,20,0.9);
}
.navbar.navbar-default .navbar-header,
.navbar.navbar-inverse .navbar-header {
  margin-left: -15px;
}
.navbar-brand {
  padding:15px 15px 15px 0px;
}
.bucky-nav ul {
  width: 100% !important;
  margin:50px 0px 30px;
  li {
    position: relative;
    display: block;
    padding: 8px 30px;
    margin-bottom: -1px;
    background-color: transparent;
    border: none;
    text-align: left;
    a {
      color:@white;
      font-size:20px;
    }
  }
}
#bucky-navbar-collapse {
  padding:0px;
  border-color:@color1;
}
.navbar {
 border-radius : 0;
 border: 0;
 margin: 0;
}
.navbar-nav {
  margin:0px;
}
.navbar-fixed-top {
  .container-fluid {
  }
}

.portlet-title h1 i {
  margin: 6px;
}

.main-search {
  width: 90%;
  display: block;
  background-color: @white;
  margin-top: 6px;
  margin-bottom: 3px;
  border-top-left-radius:4px;
  border-bottom-left-radius:4px;
  font-size: 1.6em;
  color: @color3;
  float: right;
  padding: 3px 0px 3px 15px;
  height:38px;
}
.main-search[placeholder="Search My-UW"] {
  color: #222;
}
.main-search:focus {
  outline: none;
}
.btn-search {
  padding:9px 12px;
  border:0px solid transparent;
  background-color:#eee;
  top:2px;
  height:38px;
  color:#222;
  &:hover {
    background-color:#ddd;
    color:#111;
  }
  .fa-search {
    font-size:1.2em;
  }
}
.search-mobile {
  background-color:#333;
  padding:12px;

}

.navbar-header {
  height: 52px;
}

.navbar-header .search-mobile-icon .fa-search {
  float:right;
  font-size:1.7em;
  color:#fff;
  padding:14px 20px;
  cursor:pointer;
  border-left:1px solid @color2;
}
.navbar-header .search-mobile-icon .fa-search:hover {
  background-color:@color2;
}
.search-mobile-icon {
  position: absolute;
  top: 0;
  right: 0;
  height: 52px;
}

//---------------------Username options-css ------------------------------------

portal-header li.username-menu {
    color: @white;
    line-height: 50px;
    margin-right: 20px;

    .gravatar {
      border-radius: 2000px;
      height: 32px;
      margin-right:5px;
    }

    .username-option:hover {
      cursor: pointer;
    }

    .popover {
      left: -113px !important;
      top: 40px !important;
    }

    .arrow {
      left: 92% !important;
    }

    .popover-content {
      padding: 5px;
    }

    .username-menu-template {
      line-height: 1.7em;
      width : 160px;
      text-align: right;
      ul li {
        color: @black;

        a {
          padding-left: 43px;
        }
      }
    }
}

//-----------------end-Username options-css ------------------------------------

//---------------------crest and title css -------------------------------------

.navbar-header div.header-crest {
  .beta-logo {
    font-size:0.55em;
    color:#fcf49c;
    position:relative;
    top:5px;
    margin-left:3px;
  }

  a {
     color: @white;
     font-weight: 200;
  }

  .title {
    font-size: 26px;
    margin-left: 0px;
    position: relative;
    top: -8px;
  }

  .header-inner {
    height: 52px;
    overflow: hidden;
  }

  a:link, a:visited, a:hover,
  a:focus, a:active {
     text-decoration: none;
  }

  img {
    height: 80px;
    position: relative;
    top: -18px;
    left: -8px;
  }
}

//----------------end--crest and title css -------------------------------------


remove padding around scrollbar thumb. add border to all sides of scrollbar track

.scrollable::-webkit-scrollbar {
    height: 16px;
    width: 10px;
}
.scrollable::-webkit-scrollbar-button:start:decrement,
.scrollable::-webkit-scrollbar-button:end:increment {
    background-color: transparent;
    display: block;
    height: 0;
}
.scrollable::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid
    transparent;
    border-width: 0 0 0 4px;
}
.scrollable::-webkit-scrollbar-track-piece {
    background-color: transparent;
    .border-radius(0);
}
.scrollable::-webkit-scrollbar:hover {
    background-color: #f3f3f3;
    border: 1px solid #dbdbdb;
}
.scrollable::-webkit-scrollbar-thumb:vertical,
.scrollable::-webkit-scrollbar-thumb:horizontal {
    background-color: #c6c6c6;
    .border-radius(0);
}
.scrollable::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border: solid transparent;
    border-width: 0;
    .box-shadow(~"inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07)");
    background-clip: padding-box;
}
.scrollable::-webkit-scrollbar-thumb:hover {
    background-color: #949494;
}
.scrollable::-webkit-scrollbar-thumb:active{
    background-color: rgba(0,0,0,0.5);
    .box-shadow(inset 1px 1px 3px rgba(0,0,0,0.35));
}

.scrollable::-webkit-scrollbar {
    height: 16px;
    width: 12px;
}
.scrollable::-webkit-scrollbar-button:start:decrement,
.scrollable::-webkit-scrollbar-button:end:increment {
    background-color: transparent;
    display: block;
    height: 0;
}
.scrollable::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid
    transparent;
    border-width: 0 0 0 4px;
}
.scrollable::-webkit-scrollbar-track-piece {
    background-color: transparent;
    .border-radius(0);
}
.scrollable::-webkit-scrollbar:hover {
    background-color: #f3f3f3;
    border-left: 1px solid #dbdbdb;
}
.scrollable::-webkit-scrollbar-thumb:vertical,
.scrollable::-webkit-scrollbar-thumb:horizontal {
    background-color: #c6c6c6;
    .border-radius(0);
}
.scrollable::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border: solid transparent;
    border-width: 1px 1px 1px 2px;
    .box-shadow(~"inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07)");
    background-clip: padding-box;
}
.scrollable::-webkit-scrollbar-thumb:hover {
    background-color: #949494;
}
.scrollable::-webkit-scrollbar-thumb:active{
    background-color: rgba(0,0,0,0.5);
    .box-shadow(inset 1px 1px 3px rgba(0,0,0,0.35));
}


Updated thumbnail styles

Updated thumbnail styles


[fix]#8112 eye login button sent on right side

@media screen and (max-width: 1200px){
	.login{
		h1{
			display: none;
		}
	}
}
@media screen and (max-width: 959px) {

	//workspace carousel
	.rigid-grid .margin-four carousel.slide{
		.image.previous, .image.next{
			width: 0;
			height: 0;
			padding: 0;
			border: none;
		}
		.image.next{
			margin-left: 100%;
		}
		.image.current{
			width: 80%;
			margin-left: 10%;
		}
		//arrow bg
		.image.previous::before, .image.next::before{
		  top: -20px;
		}
		//arrow shape & color
		.image.previous::after, .image.next::after{
		  top: -10px;
		}
	}

}

@media screen and (max-width: 700px){

	body.point-out{
		cursor: pointer!important;
	}

	body{
		nav.vertical[side-nav]{
			ul{
				border-left: none !important;
				li{
					a.selected{
						background: rgba(255,255,255, 0.2)
					}
					a{
						color: #fff;
					}
				}
			}
			a.classic-link{
				background: #fff;
				&:hover{
					color: @primary;
				}
			}
			background-color: @primary;
			border-left: 10px solid @accent;
			padding-left: 0;
		}
		.mobile-nav-opener{
			font-family: fontello;
			background: none;
			&::before{
				content: '\e84f';
				font-size: 28px;
				color: @accent;
				position: absolute;
				top: 11px;
				left: 10px;
			}
		}
	}
	h1{
		font-size: 18px;
		margin-bottom: 9px;
		line-height: 30px;
	}
	.panel{
		box-sizing: border-box;
		background: @primary;
		input-password{
			button{
				padding: 5px 0;
				&::before{
					position: relative;
					line-height: 23px;
					font-size: 16px;
					left: 0;
				}
			}
		}
	}
	.navbar{
		height: 50px;
	}
	nav.vertical[side-nav]{
		top: 60px;
	}
	nav.horizontal{
		right: 0;
		height: 50px;
		#my-photo{
			width: 25px;
			margin-top: 7px;
		}
		> a, > popover a{
			font-size: 14px;
			margin-left: 0;
			height: 50px;
			line-height: 50px;
		}
		i.disconnect{
			width: 22px !important;
			margin-right: 0;
			margin-left: 0;
		}
		> a i::before, popover > a i::before{
			font-size: 25px;
		}
	}
	body{
		font-size: 14px;
		.material section.main{
			padding: 8px 15px;
			padding-bottom: 100px;
			top: 52px;
		}
	}
	.forgot.panel{
		h1{
			width: 100%;
			text-align: center;
			font-size: 40px;
		}
	}
	.toggle-panel{
		right: -15px;
		top: 52px;
	}
	.notification article .notification-date{
		right: 10px;
		top: 8px;
	}
	body{
	.mobile-nav-opener{
			background-image: none;
			font-family: fontello;
			padding: 15px;
			&::before{
				color: @accent;
				content: '\e84f';
				font-size: 28px;
			}
		}
	}
}
@media screen and (max-width: 550px){
	body{
		.notification{
			.content {
				margin: 20px 10px 5px;
			}
		}
	}

}

@media screen and (max-width: 1200px){
	.login{
		h1{
			display: none;
		}
	}
}
@media screen and (max-width: 959px) {

	//workspace carousel
	.rigid-grid .margin-four carousel.slide{
		.image.previous, .image.next{
			width: 0;
			height: 0;
			padding: 0;
			border: none;
		}
		.image.next{
			margin-left: 100%;
		}
		.image.current{
			width: 80%;
			margin-left: 10%;
		}
		//arrow bg
		.image.previous::before, .image.next::before{
		  top: -20px;
		}
		//arrow shape & color
		.image.previous::after, .image.next::after{
		  top: -10px;
		}
	}

}

@media screen and (max-width: 700px){

	body.point-out{
		cursor: pointer!important;
	}

	body{
		nav.vertical[side-nav]{
			ul{
				border-left: none !important;
				li{
					a.selected{
						background: rgba(255,255,255, 0.2)
					}
					a{
						color: #fff;
					}
				}
			}
			a.classic-link{
				background: #fff;
				&:hover{
					color: @primary;
				}
			}
			background-color: @primary;
			border-left: 10px solid @accent;
			padding-left: 0;
		}
		.mobile-nav-opener{
			font-family: fontello;
			background: none;
			&::before{
				content: '\e84f';
				font-size: 28px;
				color: @accent;
				position: absolute;
				top: 11px;
				left: 10px;
			}
		}
	}
	h1{
		font-size: 18px;
		margin-bottom: 9px;
		line-height: 30px;
	}
	.panel{
		box-sizing: border-box;
		background: @primary;
		input-password{
			button{
				float: left;
				padding: 5px;
				&::before{
					position: relative;
					line-height: 23px;
					font-size: 16px;
					left: 0;
				}
			}
		}
	}
	.navbar{
		height: 50px;
	}
	nav.vertical[side-nav]{
		top: 60px;
	}
	nav.horizontal{
		right: 0;
		height: 50px;
		#my-photo{
			width: 25px;
			margin-top: 7px;
		}
		> a, > popover a{
			font-size: 14px;
			margin-left: 0;
			height: 50px;
			line-height: 50px;
		}
		i.disconnect{
			width: 22px !important;
			margin-right: 0;
			margin-left: 0;
		}
		> a i::before, popover > a i::before{
			font-size: 25px;
		}
	}
	body{
		font-size: 14px;
		.material section.main{
			padding: 8px 15px;
			padding-bottom: 100px;
			top: 52px;
		}
	}
	.forgot.panel{
		h1{
			width: 100%;
			text-align: center;
			font-size: 40px;
		}
	}
	.toggle-panel{
		right: -15px;
		top: 52px;
	}
	.notification article .notification-date{
		right: 10px;
		top: 8px;
	}
	body{
	.mobile-nav-opener{
			background-image: none;
			font-family: fontello;
			padding: 15px;
			&::before{
				color: @accent;
				content: '\e84f';
				font-size: 28px;
			}
		}
	}
}
@media screen and (max-width: 550px){
	body{
		.notification{
			.content {
				margin: 20px 10px 5px;
			}
		}
	}

}