@nrk/core-css - npm Package Compare versions

Comparing version 1.9.0 to 1.10.0

lib/docs.md

@@ -24,3 +24,3 @@ # Core CSS
     <h3>Hide from everyone</h3>
-    Add the <a href="https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/hidden"><code>hidden</code> attribute</a> attribute to dynamically hide content from all users. Remove the attribute to show it again.
+    Add the <a href="https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/hidden"><code>hidden</code> attribute</a> to dynamically hide content from all users. Remove the attribute to show it again.
   </div>
@@ -45,3 +45,3 @@ <div class="nrk-xs-12of12 nrk-md-3of12" style="padding-right:15px">
 
- The `.nrk-grid` is flex based, but with a fallback to inline-block rendering for older browsers. Used alone, the grid only places it's direct child elements next to each other, aligns height to match tallest sibling and wraps rows when needed. The grid can therefore be used just to align items, or to build more complex layouts when combined with [size classes](/#sizes):
+ The `.nrk-grid` is flex based, but with a fallback to inline-block rendering for older browsers. Used alone, the grid only places it's direct child elements next to each other, aligns height to match tallest sibling and wraps rows when needed. The grid can therefore be used just to align items, or to build more complex layouts when combined with [size classes](#sizes):
 
@@ -132,2 +132,4 @@ ```html
 
+</div>
+
 ---
@@ -210,2 +212,108 @@
 
+## Forms
+
+Use the `.nrk-input` on `<select>`, `<textarea>` and all `<input>` fields for a consistent appearance across browsers. This will reset the various platform specific styles and provide a sane default style
+which is [easy to customize](#customise). Combine this with the `.nrk-grid` system to get a fully
+functional form layout.
+
+<small><em>Note: The input type `range` is supported yet. For dates and times, use the
+[`@nrkno/core-datepicker`](https://static.nrk.no/core-components/latest/index.html?core-datepicker/readme.md)
+component.</em></small>
+
+<style>
+.my-input-focus:focus { box-shadow: 0 0 0 2px #00b9f2 }
+.doc-demo .nrk-grid fieldset input { margin-right: .2em }
+.doc-demo .nrk-grid fieldset label,
+.doc-demo .nrk-grid > label .nrk-input {
+  display: block;
+  margin-bottom: .2em;
+}
+</style>
+
+```html
+<!--demo-->
+<div class="nrk-grid">
+    <label class="nrk-xs-12of12 nrk-lg-4of12">
+      Text
+      <input class="nrk-input nrk-xs-12of12" type="text" placeholder="Text">
+    </label>
+    <label class="nrk-xs-12of12 nrk-lg-4of12">
+      Search
+      <input class="nrk-input nrk-xs-12of12" type="search" placeholder="Search">
+    </label>
+    <label class="nrk-xs-12of12 nrk-lg-4of12">
+      Number
+      <input class="nrk-input nrk-xs-12of12" type="number" placeholder="Number">
+    </label>
+    <label class="nrk-xs-12of12 nrk-lg-4of12">
+      E-mail
+      <input class="nrk-input nrk-xs-12of12" type="email" placeholder="E-mail">
+    </label>
+    <label class="nrk-xs-12of12 nrk-lg-4of12">
+      Telephone (readonly)
+      <input class="nrk-input nrk-xs-12of12" type="tel" placeholder="Telephone" readonly>
+    </label>
+    <label class="nrk-xs-12of12 nrk-lg-4of12">
+      Password
+      <input class="nrk-input nrk-xs-12of12" type="password" placeholder="Password">
+    </label>
+    <label class="nrk-xs-12of12 nrk-lg-4of12">
+      File
+      <input class="nrk-input nrk-xs-12of12" type="file">
+    </label>
+    <label class="nrk-xs-12of12 nrk-lg-4of12">
+      File (disabled)
+      <input class="nrk-input nrk-xs-12of12" type="file" disabled>
+    </label>
+    <label class="nrk-xs-12of12 nrk-lg-4of12">
+      Select
+      <select class="nrk-input nrk-xs-12of12">
+        <option value="one">One</option>
+        <option value="two">Two</option>
+        <option value="three">Three</option>
+      </select>
+    </label>
+    <label class="nrk-xs-12of12 nrk-lg-4of12">
+      Select multiple
+      <select class="nrk-input nrk-xs-12of12" multiple size="3">
+        <option value="one">One</option>
+        <option value="two">Two</option>
+        <option value="three">Three</option>
+      </select>
+    </label>
+    <div class="nrk-xs-12of12 nrk-lg-4of12">
+      <fieldset class="nrk-unset">
+        <legend class="nrk-unset">Checkboxes</legend>
+        <label><input class="nrk-input" type="checkbox" value="Checkbox" checked> Checked</label>
+        <label><input class="nrk-input" type="checkbox" value="Checkbox"> Unchecked</label>
+        <label><input class="nrk-input" type="checkbox" value="Checkbox" disabled> Disabled</label>
+      </fieldset>
+    </div>
+    <div class="nrk-xs-12of12 nrk-lg-4of12">
+      <fieldset class="nrk-unset">
+        <legend class="nrk-unset">Radios</legend>
+        <label><input class="nrk-input" type="radio" value="one" name="radio" checked> Alternative 1</label>
+        <label><input class="nrk-input" type="radio" value="two" name="radio"> Alternative 2</label>
+        <label><input class="nrk-input" type="radio" value="two" name="radio" disabled> Disabled</label>
+      </fieldset>
+    </div>
+    <label class="nrk-xs-12of12">
+      Textarea
+      <textarea class="nrk-input nrk-xs-12of12" placeholder="Textarea text" rows="4"></textarea>
+    </label>
+</div>
+```
+
+### Customise
+
+Property | Affects | Notes | Examples
+:-- | :-- | :-- | :--
+`color` | Text color and graphics |Changes color of the arrow in `<select>`, and checked state of `input[type="checkbox"]` and `input[type="radio"]` | <input type="checkbox" class="nrk-input" style="color:#00b9f2" checked> &nbsp; <input type="checkbox" class="nrk-input" style="color:#ffe100;background-color:#141517" checked>
+`background-color` | Background color | *NB:* Do not use the shorthand `background` as this breaks the `select`, `checkbox` and `radio` graphics. | <select class="nrk-input" style="background-color:#e9e9e9"><option>Options</option></select>
+`box-shadow` | Border color and style | We use `box-shadow` instead of `border`, as this renders consistently on all elements in both modern browsers, and Internet Explorer 11 (having trouble with border or checkbox/radio elements). *NB:* Also resets `:focus` style | <input type="text" class="nrk-input" style="box-shadow:0 1px 2px rgba(0,0,0,.3);margin:0 5px 9px 0"><input type="text" class="nrk-input" style="box-shadow:0 0 0 2px rgba(0,0,0,.1)">
+`:focus`, `:checked`, `:disabled`, `:enabled`, `:required`, `:valid`, `:invalid`, `:not(:focus)`, `:not(:checked)` | State based styling | Change style based on input state. Use `box-shadow` or `outline` to set your own focus styling, i.e.:<br>`.nrk-input:focus { box-shadow: 0 0 0 2px #00b9f2 }` | <input type="text" class="nrk-input my-input-focus"><br>
+
+
+---
+
 ## Aspects
@@ -212,0 +320,0 @@

package.json

@@ -6,3 +6,3 @@ {
   "author": "NRK <[e-mail]> (https://www.nrk.no/)",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "license": "MIT",
@@ -14,3 +14,3 @@ "scripts": {
     "publish:major": "npm version major -m 'Release major %s' && npm run push",
-    "start": "http-server lib -o -p 10001 -a localhost -c-1",
+    "start": "http-server lib -o -p 10001 -c-1",
     "push": "npm run build && git commit -am \"Update version number\" && git push && git push --tags && npm publish",
@@ -17,0 +17,0 @@ "static-publish": "npm run build && static-publish --directory=lib --latest --major --account=nrk-core"

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51625

increased by27.57%

Lines of code

355

increased by34.47%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes