사용자:기나ㅏㄴ/RedWarn/설명/MDLButton-mock.css

/**
 * 버튼 모양 관련 css
 * This stylesheet mocks the buttons used for Material Design Lite
 * and other programs which follow the Material Design specification.
 *
 * This stylesheet mocks the buttons, as seen in
 * https://getmdl.io/components/index.html#buttons-section
 * 
 * Do note that the MDL-oriented design of Material Design is
 * outdated, and you should instead follow the rules as defined in
 * the Material webpage instead:
 * https://material.io/components/buttons/web
 *
 * Some parts of this stylesheet come from parts of the Material
 * Design Lite library. MDL is released under the Apache License 2.0.
 * Its repository and license text are linked below.
 *
 * https://github.com/google/material-design-lite
 * https://github.com/google/material-design-lite/blob/mdl-1.x/LICENSE
 *
 * A copy of the compiled version of MDL (the basis for this stylesheet)
 * can be found at:
 * https://getmdl.io/material.min.css
**/

/** Standard Button **/
.mdl-button {
	background: 0 0;
	border: none;
	border-radius: 2px;
	color: #000;
	position: relative;
	height: 36px;
	margin: 0;
	min-width: 64px;
	padding: 0 16px;
	display: inline-block;
	font-family: "Roboto","Helvetica","Arial",sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0;
	overflow: hidden;
	transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	line-height: 36px;
	vertical-align: middle;
}

.mdl-button:hover {
	background-color: rgba(158,158,158,.2);
}

/** Flat button **/
.mdl-button--primary.mdl-button--primary,
.mdl-button--primary.mdl-button--primary a {
	color: #3f51b5;
}
.mdl-button--accent.mdl-button--accent,
.mdl-button--accent.mdl-button--accent a {
	color: #ff4081;
}

.mdl-button:active {
	background-color: rgba(158,158,158,.4);
}

/** Raised Button **/
.mdl-button--raised {
	background: rgba(158,158,158,.2);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

.mdl-button--raised.mdl-button--colored {
	background: rgb(33,150,243);
	color: #fff;
}

.mdl-button--raised.mdl-button--colored a {
	color: #fff;
}

.mdl-button--raised.mdl-button--colored:hover {
	background-color: rgb(33,150,243);
}

.mdl-button--raised:active {
	box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
	background-color: rgba(158,158,158,.4);
}

.mdl-button--raised.mdl-button--colored:active {
	background-color: rgb(10, 110, 189);
}

/** Accent buttons **/
.mdl-button--accent.mdl-button--accent.mdl-button--raised, 
.mdl-button--accent.mdl-button--accent.mdl-button--fab {
	color: #fff;
	background-color: #ff4081;
}

.mdl-button--accent.mdl-button--accent.mdl-button--raised a, 
.mdl-button--accent.mdl-button--accent.mdl-button--fab a {
	color: #fff;
}