Comments (4)
I'm not understanding the problem @TedGoas. You can provide some problem examples?
from stacks.
@hellohynes We have a few notice styles. Here's another one from the docs site:
Let's agree we won't use the outline style here anymore. ๐
Looking at the power blue example, here's the code:
<div class="grid ai-start gs4 s-notice s-notice__info mb48">
<div class="grid--cell mr8">{% svg /resources/svg-icons/Alert.svg width="18" height="18" aria-hidden="true" class="svg-icon iconAlert" %}</div>
<div class="grid--cell lh-lg">
<strong>Note:</strong> The <code class="stacks-code bg-powder-200">unset</code> property is a combination property that resets a property to its inherited value. It behaves like the <code class="stacks-code bg-powder-200">inherit</code> and the <code class="stacks-code bg-powder-200">initial</code> keywords, but it properly selects the right value for you. Unfortunately, <code class="stacks-code bg-powder-200">unset</code> is not fully supported in Internet Explorer. Because of this all <code class="stacks-code bg-powder-200">unset</code> values have the correct <code class="stacks-code bg-powder-200">inherit</code> or <code class="stacks-code bg-powder-200">initial</code> value applied.
</div>
</div>
There's some utility classes in there I think we can remove, or rather, move. Classes like mr8
, lh-lg
, and bg-powder-200
. I'm suggesting we move stuff like this into a higher level class so we don't have to inline style each individual notice.
from stacks.
I don't agree that we should not use outlined style on the Stacks site. It's a Stacks style.
Going through the utility classesโฆ
- You don't need
mr8
ongrid-cell
. Usegs8
on the wrappinggrid
and you get the same effect - Add
lh-lg
to the wrappings-notice
- Unfortunately if you want to change the background color on
stacks-code
you will have to apply a different class. What's the problem using the default gray background?
from stacks.
@hellohynes FWIW that isn't my code.
I'm suggesting we standardize the default style because we're currently styling each of them inline and it's not scaling well (I have to redo a bunch of notices that should match but don't).
from stacks.
Related Issues (20)
- Remove references to Jobs in examples in Grammar and mechanics guide
- Button group does not use aria-current to indicate selected option
- Notify users of input validation with aria-live
- Pagination missing aria-current label
- ! HOT 1
- Tooltip flickers when hovering SVG HOT 4
- "align-items: start" has mixed support HOT 1
- `s-table__bx` has a 2px gap between cell borders HOT 1
- Eliminate need for clip-path on `.s-expandable` HOT 1
- Support deletion state for post summary child answers
- Accordion example jitters because of scroll bar
- Navigational dropdown item documentation incomplete
- Stacks.Razor repo link broken HOT 2
- Stacks - how to use it? HOT 1
- Mso Email Template Button is not visible on Outlook Web HOT 1
- More editor related icons HOT 2
- Css Grid HOT 1
- Illegal HTML in example on input component page HOT 1
- adb shell pm grant com.arumcomm.androiddevinfo android.permission.PACKAGE_USAGE_STATS adb shell pm grant com.arumcomm.androiddevinfo android.permission.READ_LOGS
- Responsive class `.pb0` does not work
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stacks.