Box: do not apply the color property to the icon #1234
Labels
Comments
ang-zeyu
added a commit
to ang-zeyu/markbind
that referenced
this issue
Jul 4, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, enabling the full spectrum of bootstrap colors to be used and providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (MarkBind#1234), and seamless boxes' content correctly inherit color (MarkBind#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
ang-zeyu
added a commit
to ang-zeyu/markbind
that referenced
this issue
Jul 4, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, enabling the full spectrum of bootstrap colors to be used and providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (MarkBind#1234), and seamless boxes' content correctly inherit color (MarkBind#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
ang-zeyu
added a commit
to ang-zeyu/markbind
that referenced
this issue
Jul 4, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, enabling the full spectrum of bootstrap colors to be used and providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (MarkBind#1234), and seamless boxes' content correctly inherit color (MarkBind#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
ang-zeyu
added a commit
to ang-zeyu/markbind
that referenced
this issue
Jul 4, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, enabling the full spectrum of bootstrap colors to be used and providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (MarkBind#1234), and seamless boxes' content correctly inherit color (MarkBind#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
ang-zeyu
added a commit
to ang-zeyu/markbind
that referenced
this issue
Jul 4, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (MarkBind#1234), and seamless boxes' content correctly inherit color (MarkBind#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
ang-zeyu
added a commit
to ang-zeyu/markbind
that referenced
this issue
Jul 10, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (MarkBind#1234), and seamless boxes' content correctly inherit color (MarkBind#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
ang-zeyu
added a commit
to ang-zeyu/markbind
that referenced
this issue
Jul 10, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (MarkBind#1234), and seamless boxes' content correctly inherit color (MarkBind#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
ang-zeyu
added a commit
that referenced
this issue
Jul 10, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (#1234), and seamless boxes' content correctly inherit color (#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Current: the
colorproperty of boxes apply to the icon as well as the text.Suggestion: apply it to the text only (or give a way to adjust the two separately).
Reason: Icon color goes with the type of the box while text color may need to be adjusted for readability reasons. e.g., bright red for the icon to catch the eye but black for the text for easier readability.
The text was updated successfully, but these errors were encountered: