{"action":"created","issue":{"url":"https://api.github.com/repos/angular/material/issues/772","labels_url":"https://api.github.com/repos/angular/material/issues/772/labels{/name}","comments_url":"https://api.github.com/repos/angular/material/issues/772/comments","events_url":"https://api.github.com/repos/angular/material/issues/772/events","html_url":"https://github.com/angular/material/issues/772","id":50155274,"number":772,"title":"The styles for `hide/show[-xx[-yy]]` are wrong","user":{"login":"gkalpak","id":8604205,"avatar_url":"https://avatars.githubusercontent.com/u/8604205?v=3","gravatar_id":"","url":"https://api.github.com/users/gkalpak","html_url":"https://github.com/gkalpak","followers_url":"https://api.github.com/users/gkalpak/followers","following_url":"https://api.github.com/users/gkalpak/following{/other_user}","gists_url":"https://api.github.com/users/gkalpak/gists{/gist_id}","starred_url":"https://api.github.com/users/gkalpak/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gkalpak/subscriptions","organizations_url":"https://api.github.com/users/gkalpak/orgs","repos_url":"https://api.github.com/users/gkalpak/repos","events_url":"https://api.github.com/users/gkalpak/events{/privacy}","received_events_url":"https://api.github.com/users/gkalpak/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/angular/material/labels/question","name":"question","color":"cc317c"}],"state":"closed","locked":false,"assignee":{"login":"ajoslin","id":1265995,"avatar_url":"https://avatars.githubusercontent.com/u/1265995?v=3","gravatar_id":"","url":"https://api.github.com/users/ajoslin","html_url":"https://github.com/ajoslin","followers_url":"https://api.github.com/users/ajoslin/followers","following_url":"https://api.github.com/users/ajoslin/following{/other_user}","gists_url":"https://api.github.com/users/ajoslin/gists{/gist_id}","starred_url":"https://api.github.com/users/ajoslin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ajoslin/subscriptions","organizations_url":"https://api.github.com/users/ajoslin/orgs","repos_url":"https://api.github.com/users/ajoslin/repos","events_url":"https://api.github.com/users/ajoslin/events{/privacy}","received_events_url":"https://api.github.com/users/ajoslin/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/angular/material/milestones/8","labels_url":"https://api.github.com/repos/angular/material/milestones/8/labels","id":765391,"number":8,"title":"0.7.0","description":"## Goals \r\n\r\n### Specification Efforts\r\n\r\nThe following tasks need design notes to present the problem and identify solution(s):\r\n- focus states\r\n- click solution design and research\r\n\r\n### Implementation\r\n\r\n- ripple ux (cont.)\r\n  - bug fixes\r\n  - conformance to spec\r\n- testing\r\n  - cross platform checks\r\n  - ie10 fixed\r\n- theming:\r\n  - component layout (padding, border, fonts)\r\n  - hues, perf, dark\r\n","creator":{"login":"ThomasBurleson","id":210413,"avatar_url":"https://avatars.githubusercontent.com/u/210413?v=3","gravatar_id":"","url":"https://api.github.com/users/ThomasBurleson","html_url":"https://github.com/ThomasBurleson","followers_url":"https://api.github.com/users/ThomasBurleson/followers","following_url":"https://api.github.com/users/ThomasBurleson/following{/other_user}","gists_url":"https://api.github.com/users/ThomasBurleson/gists{/gist_id}","starred_url":"https://api.github.com/users/ThomasBurleson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ThomasBurleson/subscriptions","organizations_url":"https://api.github.com/users/ThomasBurleson/orgs","repos_url":"https://api.github.com/users/ThomasBurleson/repos","events_url":"https://api.github.com/users/ThomasBurleson/events{/privacy}","received_events_url":"https://api.github.com/users/ThomasBurleson/received_events","type":"User","site_admin":false},"open_issues":0,"closed_issues":168,"state":"closed","created_at":"2014-08-26T00:31:06Z","updated_at":"2015-02-12T18:12:16Z","due_on":"2015-01-13T06:00:00Z","closed_at":"2015-01-26T19:00:37Z"},"comments":23,"created_at":"2014-11-26T11:39:31Z","updated_at":"2015-02-17T15:38:57Z","closed_at":"2015-01-14T09:01:44Z","body":"I think that the current implementation of `hide[-xx[-yy]]`/`show[-xx[-yy]]` is kind of broken and confusing (not sure if it is so by design or as a result of a bug in style declarations).\r\n\r\nBased on the current styles it seems that `show-xx-yy` can negate `hide-xx-yy`, which seems to have little point (why would I want to define `show-xx-yy` and `hide-xx-yy` on the same element). Furthermore it comes to contradiction with **[the docs](https://material.angularjs.org/#/layout/options)**, which state that `show[-xx[-yy]]` _\"negates hide\"_ (not `hide[-xx[-yy]]`).\r\n\r\nIt is makes much more sense (imo) anyway:\r\nEither show the element \"by default\" and use appropriate `hide-xx[-yy]` attributes to hide it on specific devices or hide the element \"by default\" (using `hide`) and use appropriate `show-xx[-yy]` attributes to negate `hide` and make the element visible on specific devices.\r\nMixing both approaches won't help.\r\n\r\n--\r\nThat said, I believe that:\r\n\r\n1. `show` is unnecessary (since elements are shown (i.e. not hidden)) without needing any attribute (and overriding `hide` across all devices doesn't make sense).\r\n\r\n2. `show[-xx[-yy]]` should **only** negate `hide` (on appropriate screen-sizes).\r\n\r\nAccording to the above, here are the selectors that should have a `display: none;` style per screen-size:\r\n\r\n\r\n**any:**      0 < size\r\n\r\n  * [hide]:not([show])\r\n\r\n**sm:**       0 < size <  600\r\n\r\n  * [hide-sm]\r\n  * [hide]:not([show]):not([show-sm])\r\n\r\n**gt-sm:**  600 < size\r\n\r\n  * [hide-gt-sm]\r\n  * [hide]:not([show]):not([show-gt-sm])\r\n\r\n**md:**     600 < size <  960\r\n\r\n  * [hide-md]\r\n  * [hide]:not([show]):not([show-md]):not([show-gt-sm])\r\n\r\n**gt-md:**  960 < size\r\n\r\n  * [hide-gt-md]\r\n  * [hide]:not([show]):not([show-gt-md]):not([show-gt-sm])\r\n\r\n**lg:**     960 < size < 1200\r\n\r\n  * [hide-lg]\r\n  * [hide]:not([show]):not([show-lg]):not([show-gt-md]):not([show-gt-sm])\r\n\r\n**gt-lg:** 1200 < size\r\n\r\n  * [hide-gt-lg]\r\n  * [hide]:not([show]):not([show-gt-lg]):not([show-gt-md]):not([show-gt-sm])\r\n\r\n--\r\nBTW, this is related to the problem described in #764.\r\n\r\n---\r\n<sub>I hope all this makes sense, because I used `make sense` too many times...</sub>"},"comment":{"url":"https://api.github.com/repos/angular/material/issues/comments/74687634","html_url":"https://github.com/angular/material/issues/772#issuecomment-74687634","issue_url":"https://api.github.com/repos/angular/material/issues/772","id":74687634,"user":{"login":"thomasphan","id":5501424,"avatar_url":"https://avatars.githubusercontent.com/u/5501424?v=3","gravatar_id":"","url":"https://api.github.com/users/thomasphan","html_url":"https://github.com/thomasphan","followers_url":"https://api.github.com/users/thomasphan/followers","following_url":"https://api.github.com/users/thomasphan/following{/other_user}","gists_url":"https://api.github.com/users/thomasphan/gists{/gist_id}","starred_url":"https://api.github.com/users/thomasphan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thomasphan/subscriptions","organizations_url":"https://api.github.com/users/thomasphan/orgs","repos_url":"https://api.github.com/users/thomasphan/repos","events_url":"https://api.github.com/users/thomasphan/events{/privacy}","received_events_url":"https://api.github.com/users/thomasphan/received_events","type":"User","site_admin":false},"created_at":"2015-02-17T15:38:57Z","updated_at":"2015-02-17T15:38:57Z","body":"I am testing with Chrome 40 on OS X Yosemite and Chrome 40 on Windows 7 with the same result.\r\n\r\nSorry for not being clear. Because hide-sm displays none at max-width: 600px and hide-gt-sm displays none at min-width: 600px to max-width: 960px, there is not a way to show one and not the other at 600px. Both hide-sm and hide-gt-sm will display none at 600px.\r\n\r\nThanks @gkalpak "}}