diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css index e69782df64..30db438d36 100644 --- a/platform/commonUI/general/res/css/forms.css +++ b/platform/commonUI/general/res/css/forms.css @@ -392,7 +392,7 @@ input[type="text"] { margin: 0 0 2px 2px; overflow: hidden; position: relative; } - /* line 152, ../sass/_mixins.scss */ + /* line 174, ../sass/_mixins.scss */ .form-control.select:not(.disabled):hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -401,10 +401,10 @@ input[type="text"] { background-image: -webkit-linear-gradient(#636363, #575757); background-image: linear-gradient(#636363, #575757); color: #bdbdbd; } - /* line 155, ../sass/_mixins.scss */ + /* line 177, ../sass/_mixins.scss */ .form-control.select:not(.disabled):hover.btn-menu .invoke-menu { color: #878787; } - /* line 160, ../sass/_mixins.scss */ + /* line 182, ../sass/_mixins.scss */ .form-control.select.btn-menu .invoke-menu { color: #757575; } /* line 29, ../sass/forms/_selects.scss */ diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index a43eb82648..24e8e46f74 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -132,12 +132,27 @@ box-sizing: border-box; cursor: pointer; float: left; - height: 200px; width: 200px; + height: 200px; margin-bottom: 3px; margin-right: 3px; position: relative; } - /* line 152, ../sass/_mixins.scss */ + @media screen and (max-width: 400px) { + /* line 29, ../sass/items/_item.scss */ + .items-holder .item.grid-item { + width: 100%; + height: 50px; } } + @media screen and (min-width: 401px) and (max-width: 800px) { + /* line 29, ../sass/items/_item.scss */ + .items-holder .item.grid-item { + width: 100%; + height: 100px; } } + @media screen and (min-width: 801px) { + /* line 29, ../sass/items/_item.scss */ + .items-holder .item.grid-item { + width: 200px; + height: 200px; } } + /* line 174, ../sass/_mixins.scss */ .items-holder .item.grid-item:not(.disabled):hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -146,13 +161,13 @@ background-image: -webkit-linear-gradient(#707070, #636363); background-image: linear-gradient(#707070, #636363); color: #bdbdbd; } - /* line 155, ../sass/_mixins.scss */ + /* line 177, ../sass/_mixins.scss */ .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu { color: #949494; } - /* line 160, ../sass/_mixins.scss */ + /* line 182, ../sass/_mixins.scss */ .items-holder .item.grid-item.btn-menu .invoke-menu { color: #828282; } - /* line 43, ../sass/items/_item.scss */ + /* line 65, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-type { -moz-transition-property: "color"; -o-transition-property: "color"; @@ -166,45 +181,45 @@ -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } - /* line 47, ../sass/items/_item.scss */ + /* line 69, ../sass/items/_item.scss */ .items-holder .item.grid-item:hover .item-main .item-type { color: #0099cc !important; } - /* line 50, ../sass/items/_item.scss */ + /* line 72, ../sass/items/_item.scss */ .items-holder .item.grid-item:hover .item-main .item-open { opacity: 1; } - /* line 55, ../sass/items/_item.scss */ + /* line 77, ../sass/items/_item.scss */ .items-holder .item.grid-item .contents { top: 5px; right: 5px; bottom: 5px; left: 5px; } - /* line 59, ../sass/items/_item.scss */ + /* line 81, ../sass/items/_item.scss */ .items-holder .item.grid-item .bar.top-bar.abs { bottom: auto; height: 20px; line-height: 20px; z-index: 5; } - /* line 64, ../sass/items/_item.scss */ + /* line 86, ../sass/items/_item.scss */ .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right { width: auto; } - /* line 66, ../sass/items/_item.scss */ + /* line 88, ../sass/items/_item.scss */ .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon { margin-left: 5px; } - /* line 71, ../sass/items/_item.scss */ + /* line 93, ../sass/items/_item.scss */ .items-holder .item.grid-item .bar.bottom-bar.abs { top: auto; height: 30px; padding: 5px; } - /* line 77, ../sass/items/_item.scss */ + /* line 99, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main { line-height: 160px; z-index: 1; } - /* line 83, ../sass/items/_item.scss */ + /* line 105, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-type { color: #737373; text-align: center; font-size: 6em; } - /* line 89, ../sass/items/_item.scss */ + /* line 111, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-open { -moz-transition-property: "opacity"; -o-transition-property: "opacity"; @@ -224,17 +239,17 @@ width: 50px; pointer-events: none; text-align: right; } - /* line 101, ../sass/items/_item.scss */ + /* line 123, ../sass/items/_item.scss */ .items-holder .item.grid-item .title { text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; color: #cccccc; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - /* line 109, ../sass/items/_item.scss */ + /* line 131, ../sass/items/_item.scss */ .items-holder .item.grid-item .details { font-size: 0.8em; } - /* line 112, ../sass/items/_item.scss */ + /* line 134, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -256,7 +271,7 @@ color: #999; display: inline-block; color: #80dfff; } - /* line 152, ../sass/_mixins.scss */ + /* line 174, ../sass/_mixins.scss */ .items-holder .item.grid-item.selected:not(.disabled):hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -265,21 +280,21 @@ background-image: -webkit-linear-gradient(#2ecbff, #14c4ff); background-image: linear-gradient(#2ecbff, #14c4ff); color: #bdbdbd; } - /* line 155, ../sass/_mixins.scss */ + /* line 177, ../sass/_mixins.scss */ .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu { color: #75ddff; } - /* line 160, ../sass/_mixins.scss */ + /* line 182, ../sass/_mixins.scss */ .items-holder .item.grid-item.selected.btn-menu .invoke-menu { color: #52d4ff; } - /* line 117, ../sass/items/_item.scss */ + /* line 139, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) { color: #80dfff; } - /* line 118, ../sass/items/_item.scss */ + /* line 140, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected .item-main .item-open { color: #80dfff; } - /* line 119, ../sass/items/_item.scss */ + /* line 141, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected .title { color: white; } - /* line 121, ../sass/items/_item.scss */ + /* line 143, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected:hover .item-main .item-type { color: white !important; } diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 99ad0297c7..f9ab7b359c 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -93,7 +93,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -114,38 +114,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -1441,7 +1441,7 @@ mct-container { color: #999; display: inline-block; color: #ccf2ff; } - /* line 152, ../sass/_mixins.scss */ + /* line 174, ../sass/_mixins.scss */ .btn.major:not(.disabled):hover, .s-btn.major:not(.disabled):hover, .major.icon-btn:not(.disabled):hover, @@ -1453,13 +1453,13 @@ mct-container { background-image: -webkit-linear-gradient(#2ecbff, #14c4ff); background-image: linear-gradient(#2ecbff, #14c4ff); color: #bdbdbd; } - /* line 155, ../sass/_mixins.scss */ + /* line 177, ../sass/_mixins.scss */ .btn.major:not(.disabled):hover.btn-menu .invoke-menu, .s-btn.major:not(.disabled):hover.btn-menu .invoke-menu, .major.icon-btn:not(.disabled):hover.btn-menu .invoke-menu, .major.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu { color: #75ddff; } - /* line 160, ../sass/_mixins.scss */ + /* line 182, ../sass/_mixins.scss */ .btn.major.btn-menu .invoke-menu, .s-btn.major.btn-menu .invoke-menu, .major.btn-menu.icon-btn .invoke-menu, @@ -1489,7 +1489,7 @@ mct-container { border-top: 1px solid #2ecbff; color: #ccf2ff; display: inline-block; } - /* line 152, ../sass/_mixins.scss */ + /* line 174, ../sass/_mixins.scss */ .btn.major:hover:not(.disabled):hover, .s-btn.major:hover:not(.disabled):hover, .major.icon-btn:hover:not(.disabled):hover, @@ -1501,13 +1501,13 @@ mct-container { background-image: -webkit-linear-gradient(#47d1ff, #2ecbff); background-image: linear-gradient(#47d1ff, #2ecbff); color: white; } - /* line 155, ../sass/_mixins.scss */ + /* line 177, ../sass/_mixins.scss */ .btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu, .s-btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu, .major.icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu, .major.s-icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu { color: #8fe3ff; } - /* line 160, ../sass/_mixins.scss */ + /* line 182, ../sass/_mixins.scss */ .btn.major:hover.btn-menu .invoke-menu, .s-btn.major:hover.btn-menu .invoke-menu, .major.icon-btn:hover.btn-menu .invoke-menu, @@ -1543,7 +1543,7 @@ mct-container { border-top: 1px solid #8a8a8a; color: #cccccc; display: inline-block; } - /* line 152, ../sass/_mixins.scss */ + /* line 174, ../sass/_mixins.scss */ .btn.subtle:not(.disabled):hover, .s-btn.subtle:not(.disabled):hover, .subtle.icon-btn:not(.disabled):hover, @@ -1555,13 +1555,13 @@ mct-container { background-image: -webkit-linear-gradient(#969696, #8a8a8a); background-image: linear-gradient(#969696, #8a8a8a); color: #f0f0f0; } - /* line 155, ../sass/_mixins.scss */ + /* line 177, ../sass/_mixins.scss */ .btn.subtle:not(.disabled):hover.btn-menu .invoke-menu, .s-btn.subtle:not(.disabled):hover.btn-menu .invoke-menu, .subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu, .subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu { color: #bababa; } - /* line 160, ../sass/_mixins.scss */ + /* line 182, ../sass/_mixins.scss */ .btn.subtle.btn-menu .invoke-menu, .s-btn.subtle.btn-menu .invoke-menu, .subtle.btn-menu.icon-btn .invoke-menu, @@ -1594,7 +1594,7 @@ mct-container { border-top: 1px solid #575757; color: #999; display: inline-block; } - /* line 152, ../sass/_mixins.scss */ + /* line 174, ../sass/_mixins.scss */ .btn.very-subtle:not(.disabled):hover, .btn.s-very-subtle:not(.disabled):hover, .s-btn.very-subtle:not(.disabled):hover, .very-subtle.icon-btn:not(.disabled):hover, @@ -1609,7 +1609,7 @@ mct-container { background-image: -webkit-linear-gradient(#636363, #575757); background-image: linear-gradient(#636363, #575757); color: #bdbdbd; } - /* line 155, ../sass/_mixins.scss */ + /* line 177, ../sass/_mixins.scss */ .btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .s-btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu, @@ -1618,7 +1618,7 @@ mct-container { .s-very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu, .s-very-subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu { color: #878787; } - /* line 160, ../sass/_mixins.scss */ + /* line 182, ../sass/_mixins.scss */ .btn.very-subtle.btn-menu .invoke-menu, .btn.s-very-subtle.btn-menu .invoke-menu, .s-btn.very-subtle.btn-menu .invoke-menu, .very-subtle.btn-menu.icon-btn .invoke-menu, @@ -1654,7 +1654,7 @@ mct-container { border-top: 1px solid #fe9510; color: #fff; display: inline-block; } - /* line 152, ../sass/_mixins.scss */ + /* line 174, ../sass/_mixins.scss */ .btn.very-subtle.paused:not(.disabled):hover, .btn.s-very-subtle.paused:not(.disabled):hover, .s-btn.very-subtle.paused:not(.disabled):hover, .very-subtle.paused.icon-btn:not(.disabled):hover, @@ -1669,7 +1669,7 @@ mct-container { background-image: -webkit-linear-gradient(#fea029, #fe9510); background-image: linear-gradient(#fea029, #fe9510); color: white; } - /* line 155, ../sass/_mixins.scss */ + /* line 177, ../sass/_mixins.scss */ .btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .s-btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu, @@ -1678,7 +1678,7 @@ mct-container { .s-very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu, .s-very-subtle.paused.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu { color: #fec070; } - /* line 160, ../sass/_mixins.scss */ + /* line 182, ../sass/_mixins.scss */ .btn.very-subtle.paused.btn-menu .invoke-menu, .btn.s-very-subtle.paused.btn-menu .invoke-menu, .s-btn.very-subtle.paused.btn-menu .invoke-menu, .very-subtle.paused.btn-menu.icon-btn .invoke-menu, @@ -2140,7 +2140,7 @@ label.checkbox.custom { color: lighten($c, 10%); } }*/ } - /* line 152, ../sass/_mixins.scss */ + /* line 174, ../sass/_mixins.scss */ .btn-menu:not(.disabled):hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2149,10 +2149,10 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#636363, #575757); background-image: linear-gradient(#636363, #575757); color: #bdbdbd; } - /* line 155, ../sass/_mixins.scss */ + /* line 177, ../sass/_mixins.scss */ .btn-menu:not(.disabled):hover.btn-menu .invoke-menu { color: #878787; } - /* line 160, ../sass/_mixins.scss */ + /* line 182, ../sass/_mixins.scss */ .btn-menu.btn-menu .invoke-menu { color: #757575; } /* line 285, ../sass/controls/_controls.scss */ @@ -2284,7 +2284,7 @@ label.checkbox.custom { auto: 0; bottom: auto; left: auto; } - /* line 152, ../sass/_mixins.scss */ + /* line 174, ../sass/_mixins.scss */ .slider .knob:not(.disabled):hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2293,13 +2293,13 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#636363, #575757); background-image: linear-gradient(#636363, #575757); color: #bdbdbd; } - /* line 155, ../sass/_mixins.scss */ + /* line 177, ../sass/_mixins.scss */ .slider .knob:not(.disabled):hover.btn-menu .invoke-menu { color: #878787; } - /* line 160, ../sass/_mixins.scss */ + /* line 182, ../sass/_mixins.scss */ .slider .knob.btn-menu .invoke-menu { color: #757575; } - /* line 176, ../sass/_mixins.scss */ + /* line 198, ../sass/_mixins.scss */ .slider .knob:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -2323,7 +2323,7 @@ label.checkbox.custom { left: 2px; bottom: 5px; top: 5px; } - /* line 198, ../sass/_mixins.scss */ + /* line 220, ../sass/_mixins.scss */ .slider .knob:not(.disabled):hover:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -2495,14 +2495,14 @@ label.checkbox.custom { padding: 3px 0; position: absolute; z-index: 10; } - /* line 160, ../sass/_mixins.scss */ + /* line 182, ../sass/_mixins.scss */ .menu-element .menu.btn-menu .invoke-menu { color: #828282; } /* line 37, ../sass/controls/_menus.scss */ .menu-element .menu ul { margin: 0; padding: 0; } - /* line 266, ../sass/_mixins.scss */ + /* line 288, ../sass/_mixins.scss */ .menu-element .menu ul li { list-style-type: none; margin: 0; @@ -2558,7 +2558,7 @@ label.checkbox.custom { border-top: 1px solid #919191; color: #999; display: inline-block; } - /* line 160, ../sass/_mixins.scss */ + /* line 182, ../sass/_mixins.scss */ .menu-element .context-menu.btn-menu .invoke-menu, .menu-element .super-menu.btn-menu .invoke-menu { color: #b0b0b0; } @@ -3421,7 +3421,7 @@ input[type="text"] { margin: 0 0 2px 2px; overflow: hidden; position: relative; } - /* line 152, ../sass/_mixins.scss */ + /* line 174, ../sass/_mixins.scss */ .form-control.select:not(.disabled):hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -3430,10 +3430,10 @@ input[type="text"] { background-image: -webkit-linear-gradient(#636363, #575757); background-image: linear-gradient(#636363, #575757); color: #bdbdbd; } - /* line 155, ../sass/_mixins.scss */ + /* line 177, ../sass/_mixins.scss */ .form-control.select:not(.disabled):hover.btn-menu .invoke-menu { color: #878787; } - /* line 160, ../sass/_mixins.scss */ + /* line 182, ../sass/_mixins.scss */ .form-control.select.btn-menu .invoke-menu { color: #757575; } /* line 29, ../sass/forms/_selects.scss */ @@ -4051,7 +4051,7 @@ input[type="text"] { bottom: 15%; left: 15%; z-index: 101; } - /* line 160, ../sass/_mixins.scss */ + /* line 182, ../sass/_mixins.scss */ .overlay > .holder.btn-menu .invoke-menu { color: #757575; } /* line 45, ../sass/overlay/_overlay.scss */ @@ -4559,7 +4559,7 @@ input[type="text"] { right: 0; width: auto; height: 5px; } - /* line 176, ../sass/_mixins.scss */ + /* line 198, ../sass/_mixins.scss */ .split-layout.horizontal > .splitter:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -4583,7 +4583,7 @@ input[type="text"] { top: 2px; left: 5px; right: 5px; } - /* line 198, ../sass/_mixins.scss */ + /* line 220, ../sass/_mixins.scss */ .split-layout.horizontal > .splitter:not(.disabled):hover:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -4613,7 +4613,7 @@ input[type="text"] { bottom: 0; cursor: col-resize; width: 5px; } - /* line 176, ../sass/_mixins.scss */ + /* line 198, ../sass/_mixins.scss */ .split-layout.vertical > .splitter:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -4637,7 +4637,7 @@ input[type="text"] { left: 2px; bottom: 5px; top: 5px; } - /* line 198, ../sass/_mixins.scss */ + /* line 220, ../sass/_mixins.scss */ .split-layout.vertical > .splitter:not(.disabled):hover:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 737968c577..45855efc19 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -104,7 +104,7 @@ ul.tree { margin: 0; padding: 0; } - /* line 266, ../sass/_mixins.scss */ + /* line 288, ../sass/_mixins.scss */ ul.tree li { list-style-type: none; margin: 0; diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 49fa946c97..8f02938bb3 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -35,9 +35,8 @@ $badgeW: 35px; /************************** WINDOW DIMENSIONS FOR RWD */ $phoMaxW: 400px; -$phoMaxH: 700px; -$tabMaxW: 701px; -$tabMaxH: 1280px; +$tabMinW: 401px; +$tabMaxW: 800px; $compMinW: 801px; $compMinH: 1281px; diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index 2674bc8527..2f5baa7ea5 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -19,6 +19,28 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ + +// Mixins for devices +@mixin phone { + @media screen and (max-width: $phoMaxW) { + @content + } +} + +@mixin tablet { + @media screen and (min-width: $tabMinW) and (max-width: $tabMaxW) { + @content + } +} + +@mixin desktop { + @media screen and (min-width: $compMinW) { + @content + } +} + + + @mixin absPosDefault($offset: 0px, $overflowHidden: hidden) { overflow: $overflowHidden; position: absolute; diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss index 745f2fa28b..cbdcc94b11 100644 --- a/platform/commonUI/general/res/sass/items/_item.scss +++ b/platform/commonUI/general/res/sass/items/_item.scss @@ -28,15 +28,37 @@ .item { &.grid-item { //div { @include test() } - // Sets grid item width - $d: $ueBrowseGridItemLg; + // NOTE: Sets grid item width + $dWid: $ueBrowseGridItemLg; + $dHei: $ueBrowseGridItemLg; + @include phone { + $dWid: 100%; + $dHei: $ueBrowseGridItemLg/4; + width: $dWid; + height: $dHei; + } + + @include tablet { + $dWid: 100%; + $dHei: $ueBrowseGridItemLg/2; + width: $dWid; + height: $dHei; + } + + @include desktop { + $dWid: $ueBrowseGridItemLg; + $dHei: $ueBrowseGridItemLg; + width: $dWid; + height: $dHei; + } + $transTime: 200ms; @include btnSubtle($colorItemBase); box-sizing: border-box; cursor: pointer; - float: left; - height: $d; - width: $d; + float: left; + width: $dWid; + height: $dHei; margin-bottom: $interiorMarginSm; margin-right: $interiorMarginSm; position: relative;