ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-08 20:10:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Fixed CSS that prevented custom scrollbar styling from being applied

Browse Source 
open #683
Added :not check around webkit-scrollbar classes to ensure that scrollbars
don't render in touch (mobile) context;
This commit is contained in:
Charles Hacskaylo 2016-02-16 16:45:24 -08:00
parent 16700e7001
commit 1a664c0fdc
3 changed files with 31 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -481,27 +481,29 @@ label.checkbox.custom {
/******************************************************** BROWSER ELEMENTS */
::-webkit-scrollbar {
@include border-radius(2px);
@include box-sizing(border-box);
@include box-shadow(inset $scrollbarTrackShdw);
background-color: $scrollbarTrackColorBg;
height: $scrollbarTrackSize;
width: $scrollbarTrackSize;
}
body:not(.touch) {
::-webkit-scrollbar {
@include border-radius(2px);
@include box-sizing(border-box);
@include box-shadow(inset $scrollbarTrackShdw);
background-color: $scrollbarTrackColorBg;
height: $scrollbarTrackSize;
width: $scrollbarTrackSize;
}
::-webkit-scrollbar-thumb {
$bg: $scrollbarThumbColor;
$hc: $scrollbarThumbColorHov;
$gr: 5%;
@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
@include border-radius(2px);
@include box-sizing(border-box);
&:hover {
@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
::-webkit-scrollbar-thumb {
$bg: $scrollbarThumbColor;
$hc: $scrollbarThumbColorHov;
$gr: 5%;
@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
@include border-radius(2px);
@include box-sizing(border-box);
&:hover {
@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
}
}
::-webkit-scrollbar-corner {
background: $scrollbarTrackColorBg;
}
}
::-webkit-scrollbar-corner {
background: $scrollbarTrackColorBg;
}

10
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@ -2775,7 +2775,7 @@ label.checkbox.custom {
/******************************************************** BROWSER ELEMENTS */
/* line 485, ../../../../general/res/sass/controls/_controls.scss */
::-webkit-scrollbar {
body:not(.touch) ::-webkit-scrollbar {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
@ -2788,9 +2788,8 @@ label.checkbox.custom {
background-color: rgba(0, 0, 0, 0.4);
height: 10px;
width: 10px; }
/* line 494, ../../../../general/res/sass/controls/_controls.scss */
::-webkit-scrollbar-thumb {
body:not(.touch) ::-webkit-scrollbar-thumb {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #595959), color-stop(100%, #4d4d4d));
@ -2804,16 +2803,15 @@ label.checkbox.custom {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
/* line 501, ../../../../general/res/sass/controls/_controls.scss */
::-webkit-scrollbar-thumb:hover {
body:not(.touch) ::-webkit-scrollbar-thumb:hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #5e5e5e), color-stop(100%, #525252));
background-image: -moz-linear-gradient(#5e5e5e, #525252 20px);
background-image: -webkit-linear-gradient(#5e5e5e, #525252 20px);
background-image: linear-gradient(#5e5e5e, #525252 20px); }
/* line 506, ../../../../general/res/sass/controls/_controls.scss */
::-webkit-scrollbar-corner {
body:not(.touch) ::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0.4); }
/*****************************************************************************

10
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

@ -2700,7 +2700,7 @@ label.checkbox.custom {
/******************************************************** BROWSER ELEMENTS */
/* line 485, ../../../../general/res/sass/controls/_controls.scss */
::-webkit-scrollbar {
body:not(.touch) ::-webkit-scrollbar {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
@ -2713,9 +2713,8 @@ label.checkbox.custom {
background-color: rgba(0, 0, 0, 0.1);
height: 10px;
width: 10px; }
/* line 494, ../../../../general/res/sass/controls/_controls.scss */
::-webkit-scrollbar-thumb {
body:not(.touch) ::-webkit-scrollbar-thumb {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg5ODk4OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkN2Q3ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #898989), color-stop(100%, #7d7d7d));
@ -2729,16 +2728,15 @@ label.checkbox.custom {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
/* line 501, ../../../../general/res/sass/controls/_controls.scss */
::-webkit-scrollbar-thumb:hover {
body:not(.touch) ::-webkit-scrollbar-thumb:hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #00ace6), color-stop(100%, #0099cc));
background-image: -moz-linear-gradient(#00ace6, #0099cc 20px);
background-image: -webkit-linear-gradient(#00ace6, #0099cc 20px);
background-image: linear-gradient(#00ace6, #0099cc 20px); }
/* line 506, ../../../../general/res/sass/controls/_controls.scss */
::-webkit-scrollbar-corner {
body:not(.touch) ::-webkit-scrollbar-corner {
background: rgba(0, 0, 0, 0.1); }
/*****************************************************************************