Files
openmct/platform/commonUI/general/res/sass/controls/_buttons.scss
Charles Hacskaylo 5193c62233 [Merge] Cherrypick 1 from warp1220
WTD-1220
2015-06-15 15:44:09 -07:00

111 lines
2.5 KiB
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.
*****************************************************************************/
$pad: $interiorMargin * 1.5;
/*********************************** TYPE STYLES */
.t-btn {
cursor: pointer;
}
/*********************************** STYLE STYLES */
.s-btn {
@include border-radius($controlCr);
@include box-sizing(border-box);
@include text-shadow(rgba(black, 0.3) 0 1px 1px);
line-height: 1.2em;
text-decoration: none;
&.s-very-subtle {
@include containerSubtle($colorBodyBg, $colorBodyFg, true);
&.paused {
@include containerSubtle($colorPausedBg, $colorPausedFg, true);
.icon:before {
content:"\0000EF";
}
}
}
}
.s-icon-btn {
@extend .s-btn;
font-size: 1.2em;
.icon {
color: $colorKey;
}
&.paused {
.icon {
color: $colorPausedFg;
}
}
&:not(.disabled) {
&:not(.paused) {
&:hover {
.icon {
color: lighten($colorKey, $ltGamma);
}
}
}
}
&.labeled {
padding: 0 $pad/2;
.icon {
font-size: 1.5em;
}
.title-label {
margin-left: $interiorMargin;
}
}
&.pause-play {
&.paused {
@include pulse(500ms);
}
.icon:before {
content:"\0000F1";
}
}
&.show-thumbs {
.icon:before {
content:"\000039";
}
}
}
/*********************************** LAYOUT STYLES */
span.l-btn,
span.l-btn span,
a.l-btn,
a.l-btn span {
display: inline-block;
}
.l-btn {
padding: 0 $pad;
&.sm {
padding: 0 $interiorMargin;
}
&.vsm {
padding: 0 $interiorMargin/2;
}
}