css OOCSSのためのスタイルルール集。

Posted 2021-05-13

@charset 'utf-8';

/* ----------
	Typography
*/

.underline {
	text-decoration: underline;
}

.ellipsis {
	overflow: hidden;
	overflow-wrap: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
}

.nowrap {
	overflow-wrap: normal;
	white-space: nowrap;
	word-wrap: normal;
}

.word-wrap {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.word-wrap-pre {
	overflow: auto;
	overflow-wrap: break-word;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.text-hide {
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
}

.kerning {
	text-rendering: optimizeLegibility;
}

/* ----------
	Text Align
*/

.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}

.align-center {
	text-align: center;
}

/* ----------
	Vertical Align
*/

.align-top {
	vertical-align: top;	
}

.align-middle {
	vertical-align: middle;
}

.align-base {
	vertical-align: baseline;
}

.align-bottom {
	vertical-align: bottom;
}

/* ----------
	Centering
*/

.center {
	margin-left: auto;
	margin-right: auto;
}

/* Vertical Center */

.v-center {
	font-size: 0;
}

.v-center-content {
	display: inline-block;
	*display: inline;
	font-size: 14px;
	font-size: 1rem;
	vertical-align: middle;
	*zoom: 1;
}

.v-center:before,
.v-center-ghost {
	content: "";
	display: inline-block;
	*display: inline;
	height: 100%;
	margin-left: -10px;
	vertical-align: middle;
	width: 10px; 
	*zoom: 1;
}

/* ----------
	Float
*/

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.float-none {
	float: none;
}

/* ----------
	Display
*/

.none {
	display: none;
}

.block {
	display: block;
}

.inline {
	display: inline;
}

.inline-block {
	display: inline-block;
	*display: inline;
	*zoom: 1;	
}

.table-cell {
	display: table-cell;
}

/* ----------
	Sizing
*/

.width-max {
	width: 100%;
}

.height-max {
	height: 100%;
}

.bg-width-max {
	background-size: 100% auto;
	-webkit-background-size: 100% auto;
}

.bg-height-max {
	background-size: auto 100%;
	-webkit-background-size: auto 100%;
}

.border-box {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* ----------
	Effects
*/

.half-opacity {
	opacity: .5;
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)";
}

.quarter-opacity {
	opacity: .75;
	filter: alpha(opacity=75);
	-ms-filter: "alpha(opacity=75)";
}

.fade-opacity,
.fade-opacity img {
	transition: .2s opacity linear 0s;
	-webkit-transition: .2s opacity linear 0s;
	-moz-transition: .2s opacity linear 0s;
	-ms-transition: .2s opacity linear 0s;
}

.fade-opacity:hover,
.fade-opacity:hover img {
	opacity: .75;
	filter: alpha(opacity=75);
	-ms-filter: "alpha(opacity=75)";
}

/* ----------
	Clearfix
*/

.clearfix {
	*zoom: 1;
}

.clearfix:before,
.clearfix:after {
	content: "";
	display: block;
}

.clearfix:after {
	clear: both;
}