openmct/platform/commonUI/general/res/sass/controls/_buttons.scss

/*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
$baseRatio: 1.5;
$pad: $interiorMargin * $baseRatio;

/******* LAYOUT AND SIZING */
/*.l-btn {
	@include user-select(none);
	//line-height: 1.5em; // Was 1.25em
	line-height: 150%;
	padding: 0 $pad;
	text-decoration: none;
	&.lg,
	&.create-btn {
		$h: $ueTopBarH; // - $interiorMargin;
		height: $h;
		line-height: $h - 2;
		padding: 0 $pad * 3;
	}
	&.create-btn {
		font-size: 1em;
		&:before {
			content:"+";
			font-family: symbolsfont;
		}
		.menu {
			margin-left: $pad * -1;
		}
		>.ui-symbol {
			//font-size: 1.1em; // Normalizing for new icomoon symbols font
		}
	}
	&.sm {
		padding: 0 $pad / $baseRatio;
	}
	&.vsm {
		padding: 0 ($pad / $baseRatio) / 2;
	}
}*/

/*********************************** STYLE STYLES */
.s-btn {
	$base: lighten($colorBodyBg, 20%);
	@include border-radius($controlCr);
	@include box-sizing(border-box);
	@include text-shadow(rgba(black, 0.3) 0 1px 1px);
	@include user-select(none);
	//@include containerSubtle($colorBodyBg, $colorBodyFg, true);
	cursor: pointer;
	text-decoration: none;
	height: $btnStdH;
	line-height: $btnStdH;
	padding: 0 $pad;

		font-size: 0.7rem;
	.icon {
		font-size: 0.8rem;
		color: $colorKey;
	}

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

	&.sm {
		padding: 0 $pad / $baseRatio;
	}
	&.vsm {
		padding: 0 ($pad / $baseRatio) / 2;
	}

	&:not(.major) {
		@include btnSubtle($colorBodyBg, $colorBodyFg, $colorKey);
	}

	&.major {
		$bg: $colorKey;
		$fg: lighten($bg, 70%);
		@include btnSubtle($bg, $fg, $fg);
	}

	&.paused {
		@include btnSubtle($colorPausedBg, $colorPausedFg, $colorPausedFg);
		.icon:before {
			content: "\0000EF";
		}
	}

	&.pause-play {
		/*
			&.paused {
				.icon {
					@include pulse(500ms);
				}
			}
		*/
		.icon:before {
			content: "\0000F1";
		}
	}

	&.show-thumbs {
		.icon:before {
			content: "\000039";
		}
	}
}

.l-btn-set {
	// Buttons that have a very tight conceptual grouping - no internal space between them.
	// Structure: .btn-set > mct-representation class=first|last > .s-btn
	//@include test(red);
	font-size: 0; // Remove space between s-btn elements due to white space in markup

	.s-btn {
		@include border-radius(0);
		margin-left: 1px;
	}

	.first {
		.s-btn {
			@include border-left-radius($controlCr);
			margin-left: 0;
		}
	}

	.last {
		.s-btn {
			@include border-right-radius($controlCr);
		}
	}
}
/*********************************** LAYOUT STYLES */
/*

span.s-btn,
span.s-btn span,
a.s-btn,
a.s-btn span,
a.s-btn,
a.s-btn span {
	display: inline-block;
}
*/