diff --git a/assets/MDThemeAsset.php b/assets/MDThemeAsset.php index d64e488..1b6968c 100644 --- a/assets/MDThemeAsset.php +++ b/assets/MDThemeAsset.php @@ -11,7 +11,6 @@ class MDThemeAsset extends AssetBundle public $css = [ 'css/theme.css', 'css/ripples.css', - 'css/md.select.css', 'css/md.theme.css', ]; public $js = [ diff --git a/web/css/md.select.css b/web/css/md.select.css deleted file mode 100644 index a560c6e..0000000 --- a/web/css/md.select.css +++ /dev/null @@ -1,105 +0,0 @@ -select.md-select { - height: 41px; - padding: 8px 16px; - font-size: 13px; - width: 100%; -} - -.mad-select ::-webkit-scrollbar { - width: 4px; - height: 4px; -} - -.mad-select ::-webkit-scrollbar-track { - background: transparent; -} - -.mad-select ::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.2); - border-radius: 1px; -} - -.mad-select ::-webkit-scrollbar-thumb:hover { - background-color: rgba(0, 0, 0, 0.3); -} - -.mad-select { - position: relative; - vertical-align: middle; - border-bottom: 1px solid rgba(0, 0, 0, 0.12); - padding-right: 8px; - cursor: pointer; - display: flex; - align-items: center; -} - -.mad-select ul { - list-style: none; - display: inline-block; - margin: 0; - padding: 0; -} - -.mad-select ul li, -.md-select-selected-value { - vertical-align: middle; - white-space: nowrap; - height: 24px; - line-height: 24px; - display: none; - padding: 8px 16px; - margin: 0; - box-sizing: initial; -} - -.mad-select > ul:first-of-type { - min-width: 120px; -} - -.md-select-selected-value { - flex-grow: 1; -} - -.mad-select ul:first-of-type li.selected, -.md-select-selected-value { - display: inline-block; - height: 24px; - overflow: hidden; - text-overflow: ellipsis; -} - -.mad-select ul.mad-select-drop { - position: absolute; - z-index: 9999; - visibility: hidden; - opacity: 0; - background: #fff; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); - top: 0; - left: 0; - transition: 0.24s; - max-height: 0; - overflow: hidden; - overflow-y: auto; -} - -.mad-select ul.mad-select-drop.show { - visibility: visible; - opacity: 1; - max-height: 160px; /* COMMENT IF YOU DON?T NEED MAX HEIGHT */ -} - -.mad-select ul.mad-select-drop li { - display: block; - transition: background 0.24s; - cursor: pointer; - min-width: 120px; -} - -.mad-select ul.mad-select-drop li.selected { - background: rgba(0, 0, 0, 0.07); -} - -.mad-select ul.mad-select-drop li:hover { - background: rgba(0, 0, 0, 0.04); -} diff --git a/web/css/panel.css b/web/css/panel.css index 0e81912..7301e79 100644 --- a/web/css/panel.css +++ b/web/css/panel.css @@ -48,10 +48,11 @@ /* Popover */ .popover { width: 300px; - box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); + box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3); max-width: none; border-radius: 0; padding: 0; + margin-bottom: 30px; } .popover-content { diff --git a/web/js/md.theme.js b/web/js/md.theme.js index 90bd48c..b21435c 100644 --- a/web/js/md.theme.js +++ b/web/js/md.theme.js @@ -11,64 +11,4 @@ function uid() { $(document).ready(function () { $('.withripple, .btn, .navbar a, .drawer-menu a').ripples(); - - $('select.md-select').each(function () { - var $select = $(this); - var selectId = uid(); - var widget = '
' + - '
' + $select.find('option:selected').text() + '
' + - '
'; - - var $widget = $(widget); - - $widget.insertAfter($select); - - var $ulDrop = $widget.find('ul'); - - $widget.click(function (e) { - e.stopPropagation(); - $ulDrop.toggleClass('show'); - }); - - // PRESELECT - $ulDrop.find("li[data-value='" + $select.val() + "']").addClass('selected'); - - // MAKE SELECTED - $ulDrop.on('click', 'li', function (e) { - e.preventDefault(); - - var $li = $(this); - - $select.val($li.data('value')).change(); - $widget.find('.md-select-selected-value').html($li.text()); - - $li.addClass('selected') - .siblings('li').removeClass('selected'); - - $ulDrop.removeClass('show'); - - return false; - }); - - // UPDATE LIST SCROLL POSITION - $ulDrop.on('click', function () { - var liTop = $ulDrop.find('li.selected').position().top; - $ulDrop.scrollTop(liTop + $ulDrop[0].scrollTop); - }); - - $('body').click(function () { - $ulDrop.removeClass('show'); - }); - }); }); diff --git a/web/js/panel.js b/web/js/panel.js index 4031dbc..2334a4e 100644 --- a/web/js/panel.js +++ b/web/js/panel.js @@ -223,7 +223,7 @@ $(document).ready(function () { html: true, placement: 'bottom', trigger: 'click', - container: 'body', + // container: 'body', content: function () { var source = $("#rgb-item-widget-popover-content").html(); var template = Handlebars.compile(source);