Closed jneuendorf closed 7 years ago
In line 26 of alerts.less there is a selector
.close, button[class*="close"]
Since it is loaded globally it breaks any button containing "close" in a class. In my case I have 2 buttons:
<button class='inline-block btn icon icon-trashcan delete'>Delete</button> <button class='inline-block btn icon icon-remove-close'>Close</button>
The markup corresponds to the style guide of atom, therefore:
Expected behavior:
I would expect it to work out of the box (that means without writing extra CSS) so they look like shown in the style guide ("Icon buttons").
Observed behavior:
However, the close button looks different than the delete button because it is matched by button[class*="close"].
button[class*="close"]
Atom version: 1.9.1 OS and version: Mac OS X El Capitan 10.11.6
Installed packages:
Community Packages (42) ├── Sublime-Style-Column-Selection@1.6.0 ├── activate-power-mode@0.7.0 ├── atom-beautify@0.29.10 ├── atom-material-syntax@0.4.6 ├── atom-material-ui@1.3.3 ├── autocomplete-paths@1.0.2 ├── autocomplete-php@0.3.7 ├── autocomplete-ruby@0.1.0 ├── autocomplete-sass@0.1.0 ├── block-comment@0.4.3 ├── code-annotations@0.0.1 ├── color-picker@2.2.2 ├── dash@1.6.1 ├── emmet@2.4.3 ├── export-html@3.0.0 ├── file-icons@1.7.17 ├── highlight-selected@0.11.2 ├── html-entities@0.4.0 ├── imdone-atom@1.3.29 ├── jquery-snippets@11.0.0 ├── language-latex@0.6.1 ├── linter@1.11.14 ├── linter-coffeelint@1.1.2 ├── linter-csslint@1.3.2 ├── linter-flake8@1.13.2 ├── linter-htmlhint@1.3.0 ├── linter-jshint@2.1.0 ├── linter-php@1.2.0 ├── linter-ruby@1.2.2 ├── linter-sass-lint@1.7.0 ├── markdown-preview-plus@2.4.0 ├── merge-conflicts@1.4.4 ├── minimap@4.24.7 ├── minimap-git-diff@4.3.1 ├── minimap-highlight-selected@4.4.0 ├── minimap-pigments@0.2.1 ├── pdf-view@0.50.0 ├── pigments@0.31.2 ├── project-manager@2.9.7 ├── sort-lines@0.14.0 ├── tabs-to-spaces@1.0.2 └── white-cursor@0.6.0
Additional information:
In line 26 of alerts.less there is a selector
Since it is loaded globally it breaks any button containing "close" in a class. In my case I have 2 buttons:
The markup corresponds to the style guide of atom, therefore:
Expected behavior:
I would expect it to work out of the box (that means without writing extra CSS) so they look like shown in the style guide ("Icon buttons").
Observed behavior:
However, the close button looks different than the delete button because it is matched by
button[class*="close"].Atom version: 1.9.1 OS and version: Mac OS X El Capitan 10.11.6
Installed packages:
Community Packages (42) ├── Sublime-Style-Column-Selection@1.6.0 ├── activate-power-mode@0.7.0 ├── atom-beautify@0.29.10 ├── atom-material-syntax@0.4.6 ├── atom-material-ui@1.3.3 ├── autocomplete-paths@1.0.2 ├── autocomplete-php@0.3.7 ├── autocomplete-ruby@0.1.0 ├── autocomplete-sass@0.1.0 ├── block-comment@0.4.3 ├── code-annotations@0.0.1 ├── color-picker@2.2.2 ├── dash@1.6.1 ├── emmet@2.4.3 ├── export-html@3.0.0 ├── file-icons@1.7.17 ├── highlight-selected@0.11.2 ├── html-entities@0.4.0 ├── imdone-atom@1.3.29 ├── jquery-snippets@11.0.0 ├── language-latex@0.6.1 ├── linter@1.11.14 ├── linter-coffeelint@1.1.2 ├── linter-csslint@1.3.2 ├── linter-flake8@1.13.2 ├── linter-htmlhint@1.3.0 ├── linter-jshint@2.1.0 ├── linter-php@1.2.0 ├── linter-ruby@1.2.2 ├── linter-sass-lint@1.7.0 ├── markdown-preview-plus@2.4.0 ├── merge-conflicts@1.4.4 ├── minimap@4.24.7 ├── minimap-git-diff@4.3.1 ├── minimap-highlight-selected@4.4.0 ├── minimap-pigments@0.2.1 ├── pdf-view@0.50.0 ├── pigments@0.31.2 ├── project-manager@2.9.7 ├── sort-lines@0.14.0 ├── tabs-to-spaces@1.0.2 └── white-cursor@0.6.0
Additional information: