🚀 Big News:Socket Has Acquired Secure Annex.Learn More →
@nrk/core-css
Advanced tools
@nrk/core-css - npm Package Compare versions
| html { | ||
| -webkit-text-size-adjust: 100%; | ||
| -moz-text-size-adjust: 100%; | ||
| -ms-text-size-adjust: 100%; | ||
| text-size-adjust: 100%; | ||
| -webkit-tap-highlight-color: transparent; | ||
| } | ||
| input { | ||
| -webkit-font-feature-settings: "liga" 0; | ||
| font-feature-settings: "liga" 0; | ||
| text-rendering: optimizeSpeed; | ||
| } | ||
| textarea { | ||
| -webkit-font-feature-settings: "liga" 0; | ||
| font-feature-settings: "liga" 0; | ||
| text-rendering: optimizeSpeed; | ||
| } | ||
| [contenteditable] { | ||
| -webkit-font-feature-settings: "liga" 0; | ||
| font-feature-settings: "liga" 0; | ||
| text-rendering: optimizeSpeed; | ||
| } | ||
| svg { | ||
| fill: inherit; | ||
| } | ||
| svg > use > svg { | ||
| fill: inherit; | ||
| } | ||
| body { | ||
| margin: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| } | ||
| img { | ||
| margin: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| } | ||
| svg { | ||
| margin: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| } | ||
| a { | ||
| margin: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| } | ||
| iframe { | ||
| margin: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| } | ||
| button { | ||
| -ms-touch-action: manipulation; | ||
| touch-action: manipulation; | ||
| } | ||
| a { | ||
| -ms-touch-action: manipulation; | ||
| touch-action: manipulation; | ||
| } | ||
| [hidden] { | ||
| display: none; | ||
| } | ||
| .nrk-truncate() { | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
| } | ||
| .nrk-unset() { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| background: none; | ||
| border: 0 solid; | ||
| border-radius: 0; | ||
| border-spacing: 0; | ||
| border-collapse: collapse; | ||
| box-sizing: border-box; | ||
| color: inherit; | ||
| font: inherit; | ||
| height: auto; | ||
| list-style: none; | ||
| margin: 0; | ||
| max-height: none; | ||
| max-width: none; | ||
| min-height: auto; | ||
| min-width: auto; | ||
| padding: 0; | ||
| text-align: inherit; | ||
| text-transform: inherit; | ||
| text-decoration: inherit; | ||
| width: auto; | ||
| &::-ms-expand { | ||
| display: none; | ||
| } | ||
| } | ||
| .nrk-grid() { | ||
| & > * { | ||
| box-sizing: border-box; | ||
| -webkit-flex-shrink: 0; | ||
| -ms-flex-negative: 0; | ||
| flex-shrink: 0; | ||
| display: inline-block; | ||
| vertical-align: top; | ||
| font-size: 1rem; | ||
| } | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-flex-wrap: wrap; | ||
| -ms-flex-wrap: wrap; | ||
| flex-wrap: wrap; | ||
| font-size: 0; | ||
| } | ||
| .nrk-grid--equalize() { | ||
| & > * { | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| } | ||
| & > * > * { | ||
| width: 100%; | ||
| } | ||
| } | ||
| .nrk-grid--nowrap() { | ||
| & > * { | ||
| white-space: normal; | ||
| } | ||
| white-space: nowrap; | ||
| -webkit-flex-wrap: nowrap; | ||
| -ms-flex-wrap: nowrap; | ||
| flex-wrap: nowrap; | ||
| } | ||
| .nrk-button() { | ||
| &::-moz-focus-inner { | ||
| border: 0; | ||
| padding: 0; | ||
| } | ||
| -webkit-appearance: none; | ||
| box-sizing: border-box; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| white-space: nowrap; | ||
| position: relative; | ||
| margin: 3px 1px; | ||
| padding: 0 19px; | ||
| border: 0 solid; | ||
| border-radius: 99px; | ||
| height: 41px; | ||
| min-width: 41px; | ||
| font: inherit; | ||
| font-size: 14px; | ||
| line-height: 41px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| background: transparent; | ||
| color: inherit; | ||
| -webkit-transition: box-shadow .2s, -webkit-transform .2s; | ||
| transition: box-shadow .2s, -webkit-transform .2s; | ||
| transition: transform .2s, box-shadow .2s; | ||
| transition: transform .2s, box-shadow .2s, -webkit-transform .2s; | ||
| &::after { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| right: .5px; | ||
| bottom: 0; | ||
| left: 0; | ||
| opacity: .4; | ||
| border: inherit; | ||
| border-radius: inherit; | ||
| border-width: 1px; | ||
| -webkit-transition: border .2s; | ||
| transition: border .2s; | ||
| -webkit-backface-visibility: hidden; | ||
| } | ||
| &:active { | ||
| -webkit-transform: scale(.95); | ||
| -ms-transform: scale(.95); | ||
| transform: scale(.95); | ||
| } | ||
| &:hover { | ||
| outline: 0; | ||
| border-color: transparent; | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:focus { | ||
| outline: 0; | ||
| border-color: transparent; | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:disabled { | ||
| cursor: default; | ||
| pointer-events: none; | ||
| box-shadow: none; | ||
| opacity: .6; | ||
| } | ||
| &.is-disabled { | ||
| cursor: default; | ||
| pointer-events: none; | ||
| box-shadow: none; | ||
| opacity: .6; | ||
| } | ||
| &.is-busy::before { | ||
| content: ''; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| width: 14px; | ||
| height: 14px; | ||
| border: 1px solid; | ||
| border-top-color: transparent; | ||
| border-radius: 50%; | ||
| margin-right: 5px; | ||
| -webkit-animation: nrk-spin 1s infinite linear; | ||
| animation: nrk-spin 1s infinite linear; | ||
| } | ||
| & svg { | ||
| vertical-align: middle; | ||
| } | ||
| } | ||
| .nrk-button--o() { | ||
| width: 41px; | ||
| height: 41px; | ||
| padding: 10px; | ||
| & svg { | ||
| display: block; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| } | ||
| .nrk-spin() { | ||
| -webkit-animation: nrk-spin 1s infinite linear; | ||
| animation: nrk-spin 1s infinite linear; | ||
| } | ||
| @-webkit-keyframes nrk-spin { | ||
| to { | ||
| -webkit-transform: rotate(360deg); | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
| @keyframes nrk-spin { | ||
| to { | ||
| -webkit-transform: rotate(360deg); | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
| .nrk-input() { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| box-sizing: border-box; | ||
| position: relative; | ||
| vertical-align: middle; | ||
| background: #fff no-repeat; | ||
| margin: 0; | ||
| border: 0; | ||
| max-width: 100%; | ||
| outline: 0; | ||
| color: #141517; | ||
| font-family: inherit; | ||
| font-size: inherit; | ||
| line-height: 1.5; | ||
| box-shadow: 0 0 0 1px rgba(0,0,0,.15); | ||
| border-radius: 4px; | ||
| padding: .5em .7em; | ||
| -webkit-transition: box-shadow .2s; | ||
| transition: box-shadow .2s; | ||
| &:focus { | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:disabled { | ||
| opacity: .5; | ||
| cursor: not-allowed!important; | ||
| } | ||
| &[readonly] { | ||
| opacity: .8; | ||
| cursor: default!important; | ||
| } | ||
| &::-ms-clear { | ||
| display: none; | ||
| } | ||
| &::-ms-expand { | ||
| display: none; | ||
| } | ||
| &::-ms-reveal { | ||
| display: none; | ||
| } | ||
| &::-ms-check { | ||
| display: none; | ||
| } | ||
| &[type="file"] { | ||
| cursor: pointer; | ||
| } | ||
| &::-ms-value { | ||
| background: none; | ||
| color: inherit; | ||
| font: inherit; | ||
| padding: 0; | ||
| margin: 0; | ||
| border: 0; | ||
| } | ||
| &[type="number"] { | ||
| -moz-appearance: textfield; | ||
| } | ||
| &::-webkit-outer-spin-button { | ||
| -webkit-appearance: none; | ||
| } | ||
| &::-webkit-inner-spin-button { | ||
| -webkit-appearance: none; | ||
| } | ||
| &[type="radio"] { | ||
| border-radius: 100%; | ||
| } | ||
| &[type="radio"] { | ||
| width: 1.3em; | ||
| height: 1.3em; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| padding: 0; | ||
| } | ||
| &[type="checkbox"] { | ||
| width: 1.3em; | ||
| height: 1.3em; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| padding: 0; | ||
| } | ||
| &[type="radio"]:checked { | ||
| background-image: -webkit-radial-gradient(at center center, transparent 25%, currentcolor 28%); | ||
| background-image: radial-gradient(at center center, transparent 25%, currentcolor 28%); | ||
| } | ||
| &[type="checkbox"]:checked { | ||
| background-position-x: 10%, 240%, 5%, 100%, 100%, 100%, 100%; | ||
| background-position-y: 40%, 70%, 10%, center, center, center, center; | ||
| background-image: -webkit-linear-gradient(45deg, transparent 58%, currentColor 59%), | ||
| -webkit-linear-gradient(315deg, currentColor 33%, transparent 34%), | ||
| -webkit-linear-gradient(45deg, transparent 58%, currentcolor 59%), | ||
| -webkit-linear-gradient(225deg, currentColor 23%, transparent 23%), | ||
| -webkit-linear-gradient(315deg, currentColor 33%, transparent 33%), | ||
| -webkit-linear-gradient(45deg, currentcolor 28%, transparent 27%), | ||
| -webkit-linear-gradient(135deg, currentcolor 42%, transparent 41%); | ||
| background-image: linear-gradient(45deg, transparent 58%, currentColor 59%), | ||
| linear-gradient(135deg, currentColor 33%, transparent 34%), | ||
| linear-gradient(45deg, transparent 58%, currentcolor 59%), | ||
| linear-gradient(-135deg, currentColor 23%, transparent 23%), | ||
| linear-gradient(135deg, currentColor 33%, transparent 33%), | ||
| linear-gradient(45deg, currentcolor 28%, transparent 27%), | ||
| linear-gradient(-45deg, currentcolor 42%, transparent 41%); | ||
| background-size: 35.5% 118%, 85% 99%, 33.7% 118%, 100% auto, 100% auto, 100% auto, 100% auto; | ||
| } | ||
| textarea& { | ||
| overflow: auto; | ||
| resize: vertical; | ||
| vertical-align: top; | ||
| line-height: inherit; | ||
| } | ||
| select&[multiple] { | ||
| vertical-align: top; | ||
| } | ||
| select&:not([multiple]) { | ||
| background-image: -webkit-linear-gradient(45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%), | ||
| -webkit-linear-gradient(135deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%); | ||
| background-image: linear-gradient(45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%), | ||
| linear-gradient(-45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%); | ||
| background-size: .36em 100%, .36em 100%; | ||
| background-repeat: no-repeat; | ||
| background-position-x: calc(100% - 1.35em), calc(100% - 1em); | ||
| background-position-y: 0; | ||
| padding-right: 2.5em; | ||
| vertical-align: top; | ||
| } | ||
| } | ||
| .nrk-switch() { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| vertical-align: middle; | ||
| background: transparent; | ||
| margin: 0; | ||
| border: 0; | ||
| outline: 0; | ||
| background: -webkit-radial-gradient(25%, circle, transparent 25%, currentColor 27.5%, currentColor); | ||
| background: radial-gradient(circle at 25%, transparent 25%, currentColor 27.5%, currentColor); | ||
| border-radius: 50px; | ||
| cursor: pointer; | ||
| color: inherit; | ||
| font: inherit; | ||
| width: 3em; | ||
| height: 1.5em; | ||
| opacity: .5; | ||
| -webkit-transition: .2s; | ||
| transition: .2s; | ||
| &::-ms-check { | ||
| display: none; | ||
| } | ||
| &:disabled { | ||
| opacity: .2; | ||
| cursor: not-allowed!important; | ||
| } | ||
| &:focus { | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:active:hover { | ||
| background-position-x: .3em; | ||
| } | ||
| &:checked { | ||
| opacity: 1; | ||
| background-position-x: 1.5em; | ||
| } | ||
| &:checked:active:hover { | ||
| background-position-x: 1.2em; | ||
| } | ||
| } | ||
| .nrk-pagination() { | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-align: center; | ||
| font-size: 0; | ||
| &::before { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 50%; | ||
| border-top: 1px solid; | ||
| opacity: .22; | ||
| } | ||
| &::after { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 50%; | ||
| border-top: 1px solid; | ||
| opacity: .22; | ||
| } | ||
| &::before { | ||
| margin-left: -50%; | ||
| } | ||
| &::after { | ||
| margin-right: -50%; | ||
| } | ||
| & > .nrk-button:only-child { | ||
| min-width: 200px; | ||
| } | ||
| & > .nrk-button:not(:last-child) { | ||
| border-top-right-radius: 0; | ||
| border-bottom-right-radius: 0; | ||
| margin-right: 0; | ||
| } | ||
| & > .nrk-button:not(:last-child)::after { | ||
| right: 0; | ||
| } | ||
| & > .nrk-button + .nrk-button { | ||
| border-top-left-radius: 0; | ||
| border-bottom-left-radius: 0; | ||
| border-left-style: none; | ||
| margin-left: 0; | ||
| } | ||
| } | ||
| .nrk-xs-100() { | ||
| width: 100vw; | ||
| margin-left: calc(50% - 50vw); | ||
| } | ||
| .nrk-xs-1of12() { | ||
| width: 8.33333%; | ||
| } | ||
| .nrk-xs-2of12() { | ||
| width: 16.6666%; | ||
| } | ||
| .nrk-xs-3of12() { | ||
| width: 25%; | ||
| } | ||
| .nrk-xs-4of12() { | ||
| width: 33.3333%; | ||
| } | ||
| .nrk-xs-5of12() { | ||
| width: 41.6666%; | ||
| } | ||
| .nrk-xs-6of12() { | ||
| width: 50%; | ||
| } | ||
| .nrk-xs-7of12() { | ||
| width: 58.3333%; | ||
| } | ||
| .nrk-xs-8of12() { | ||
| width: 66.6666%; | ||
| } | ||
| .nrk-xs-9of12() { | ||
| width: 75%; | ||
| } | ||
| .nrk-xs-10of12() { | ||
| width: 83.3333%; | ||
| } | ||
| .nrk-xs-11of12() { | ||
| width: 91.6666%; | ||
| } | ||
| .nrk-xs-12of12() { | ||
| width: 100%; | ||
| } | ||
| .nrk-sm-1of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| .nrk-sm-2of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| .nrk-sm-3of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| .nrk-sm-4of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| .nrk-sm-5of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| .nrk-sm-6of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| .nrk-sm-7of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| .nrk-sm-8of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| .nrk-sm-9of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| .nrk-sm-10of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| .nrk-sm-11of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| .nrk-sm-12of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| .nrk-md-1of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| .nrk-md-2of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| .nrk-md-3of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| .nrk-md-4of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| .nrk-md-5of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| .nrk-md-6of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| .nrk-md-7of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| .nrk-md-8of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| .nrk-md-9of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| .nrk-md-10of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| .nrk-md-11of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| .nrk-md-12of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| .nrk-lg-1of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| .nrk-lg-2of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| .nrk-lg-3of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| .nrk-lg-4of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| .nrk-lg-5of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| .nrk-lg-6of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| .nrk-lg-7of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| .nrk-lg-8of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| .nrk-lg-9of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| .nrk-lg-10of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| .nrk-lg-11of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| .nrk-lg-12of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| .nrk-xl-1of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| .nrk-xl-2of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| .nrk-xl-3of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| .nrk-xl-4of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| .nrk-xl-5of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| .nrk-xl-6of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| .nrk-xl-7of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| .nrk-xl-8of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| .nrk-xl-9of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| .nrk-xl-10of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| .nrk-xl-11of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| .nrk-xl-12of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| .nrk-aspect() { | ||
| position: relative; | ||
| & > * { | ||
| box-sizing: border-box; | ||
| position: absolute; | ||
| margin: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| &::after { | ||
| content: ''; | ||
| display: block; | ||
| padding-top: 56.25%; | ||
| } | ||
| } | ||
| .nrk-aspect--9x16() { | ||
| &::after { | ||
| padding-top: 177.78%; | ||
| } | ||
| } | ||
| .nrk-aspect--4x3() { | ||
| &::after { | ||
| padding-top: 75%; | ||
| } | ||
| } | ||
| .nrk-aspect--1x1() { | ||
| &::after { | ||
| padding-top: 100%; | ||
| } | ||
| } | ||
| .nrk-color-base() { | ||
| color: #26292a; | ||
| background-color: #fff; | ||
| } | ||
| .nrk-color-spot() { | ||
| color: #26292a; | ||
| background-color: #00b9f2; | ||
| } | ||
| .nrk-color-invert() { | ||
| color: #fff; | ||
| background-color: #141517; | ||
| } | ||
| .nrk-color-shade-1() { | ||
| color: #26292a; | ||
| background-color: #f3f3f3; | ||
| } | ||
| .nrk-color-shade-2() { | ||
| color: #26292a; | ||
| background-color: #e9e9e9; | ||
| } | ||
| .nrk-color-shade-3() { | ||
| color: #26292a; | ||
| background-color: #e0e0e0; | ||
| } | ||
| .nrk-color-shade-4() { | ||
| color: #26292a; | ||
| background-color: #c8c8c8; | ||
| } | ||
| .nrk-fade() { | ||
| opacity: .4; | ||
| } | ||
| .nrk-sr() { | ||
| position: absolute!important; | ||
| overflow: hidden!important; | ||
| width: 1px!important; | ||
| height: 1px!important; | ||
| clip: rect(0, 0, 0, 0)!important; | ||
| } | ||
| .nrk-sr-focus() { | ||
| &:not(:focus) { | ||
| position: absolute!important; | ||
| overflow: hidden!important; | ||
| width: 1px!important; | ||
| height: 1px!important; | ||
| clip: rect(0, 0, 0, 0)!important; | ||
| } | ||
| } |
| html { | ||
| -webkit-text-size-adjust: 100%; | ||
| -moz-text-size-adjust: 100%; | ||
| -ms-text-size-adjust: 100%; | ||
| text-size-adjust: 100%; | ||
| -webkit-tap-highlight-color: transparent; | ||
| } | ||
| input { | ||
| -webkit-font-feature-settings: "liga" 0; | ||
| font-feature-settings: "liga" 0; | ||
| text-rendering: optimizeSpeed; | ||
| } | ||
| textarea { | ||
| -webkit-font-feature-settings: "liga" 0; | ||
| font-feature-settings: "liga" 0; | ||
| text-rendering: optimizeSpeed; | ||
| } | ||
| [contenteditable] { | ||
| -webkit-font-feature-settings: "liga" 0; | ||
| font-feature-settings: "liga" 0; | ||
| text-rendering: optimizeSpeed; | ||
| } | ||
| svg { | ||
| fill: inherit; | ||
| } | ||
| svg > use > svg { | ||
| fill: inherit; | ||
| } | ||
| body { | ||
| margin: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| } | ||
| img { | ||
| margin: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| } | ||
| svg { | ||
| margin: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| } | ||
| a { | ||
| margin: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| } | ||
| iframe { | ||
| margin: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| } | ||
| button { | ||
| -ms-touch-action: manipulation; | ||
| touch-action: manipulation; | ||
| } | ||
| a { | ||
| -ms-touch-action: manipulation; | ||
| touch-action: manipulation; | ||
| } | ||
| [hidden] { | ||
| display: none; | ||
| } | ||
| @mixin nrk-truncate { | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
| } | ||
| @mixin nrk-unset { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| background: none; | ||
| border: 0 solid; | ||
| border-radius: 0; | ||
| border-spacing: 0; | ||
| border-collapse: collapse; | ||
| box-sizing: border-box; | ||
| color: inherit; | ||
| font: inherit; | ||
| height: auto; | ||
| list-style: none; | ||
| margin: 0; | ||
| max-height: none; | ||
| max-width: none; | ||
| min-height: auto; | ||
| min-width: auto; | ||
| padding: 0; | ||
| text-align: inherit; | ||
| text-transform: inherit; | ||
| text-decoration: inherit; | ||
| width: auto; | ||
| &::-ms-expand { | ||
| display: none; | ||
| } | ||
| } | ||
| @mixin nrk-grid { | ||
| & > * { | ||
| box-sizing: border-box; | ||
| -webkit-flex-shrink: 0; | ||
| -ms-flex-negative: 0; | ||
| flex-shrink: 0; | ||
| display: inline-block; | ||
| vertical-align: top; | ||
| font-size: 1rem; | ||
| } | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-flex-wrap: wrap; | ||
| -ms-flex-wrap: wrap; | ||
| flex-wrap: wrap; | ||
| font-size: 0; | ||
| } | ||
| @mixin nrk-grid--equalize { | ||
| & > * { | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| } | ||
| & > * > * { | ||
| width: 100%; | ||
| } | ||
| } | ||
| @mixin nrk-grid--nowrap { | ||
| & > * { | ||
| white-space: normal; | ||
| } | ||
| white-space: nowrap; | ||
| -webkit-flex-wrap: nowrap; | ||
| -ms-flex-wrap: nowrap; | ||
| flex-wrap: nowrap; | ||
| } | ||
| @mixin nrk-button { | ||
| &::-moz-focus-inner { | ||
| border: 0; | ||
| padding: 0; | ||
| } | ||
| -webkit-appearance: none; | ||
| box-sizing: border-box; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| white-space: nowrap; | ||
| position: relative; | ||
| margin: 3px 1px; | ||
| padding: 0 19px; | ||
| border: 0 solid; | ||
| border-radius: 99px; | ||
| height: 41px; | ||
| min-width: 41px; | ||
| font: inherit; | ||
| font-size: 14px; | ||
| line-height: 41px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| background: transparent; | ||
| color: inherit; | ||
| -webkit-transition: box-shadow .2s, -webkit-transform .2s; | ||
| transition: box-shadow .2s, -webkit-transform .2s; | ||
| transition: transform .2s, box-shadow .2s; | ||
| transition: transform .2s, box-shadow .2s, -webkit-transform .2s; | ||
| &::after { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| right: .5px; | ||
| bottom: 0; | ||
| left: 0; | ||
| opacity: .4; | ||
| border: inherit; | ||
| border-radius: inherit; | ||
| border-width: 1px; | ||
| -webkit-transition: border .2s; | ||
| transition: border .2s; | ||
| -webkit-backface-visibility: hidden; | ||
| } | ||
| &:active { | ||
| -webkit-transform: scale(.95); | ||
| -ms-transform: scale(.95); | ||
| transform: scale(.95); | ||
| } | ||
| &:hover { | ||
| outline: 0; | ||
| border-color: transparent; | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:focus { | ||
| outline: 0; | ||
| border-color: transparent; | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:disabled { | ||
| cursor: default; | ||
| pointer-events: none; | ||
| box-shadow: none; | ||
| opacity: .6; | ||
| } | ||
| &.is-disabled { | ||
| cursor: default; | ||
| pointer-events: none; | ||
| box-shadow: none; | ||
| opacity: .6; | ||
| } | ||
| &.is-busy::before { | ||
| content: ''; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| width: 14px; | ||
| height: 14px; | ||
| border: 1px solid; | ||
| border-top-color: transparent; | ||
| border-radius: 50%; | ||
| margin-right: 5px; | ||
| -webkit-animation: nrk-spin 1s infinite linear; | ||
| animation: nrk-spin 1s infinite linear; | ||
| } | ||
| & svg { | ||
| vertical-align: middle; | ||
| } | ||
| } | ||
| @mixin nrk-button--o { | ||
| width: 41px; | ||
| height: 41px; | ||
| padding: 10px; | ||
| & svg { | ||
| display: block; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| } | ||
| @mixin nrk-spin { | ||
| -webkit-animation: nrk-spin 1s infinite linear; | ||
| animation: nrk-spin 1s infinite linear; | ||
| } | ||
| @-webkit-keyframes nrk-spin { | ||
| to { | ||
| -webkit-transform: rotate(360deg); | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
| @keyframes nrk-spin { | ||
| to { | ||
| -webkit-transform: rotate(360deg); | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
| @mixin nrk-input { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| box-sizing: border-box; | ||
| position: relative; | ||
| vertical-align: middle; | ||
| background: #fff no-repeat; | ||
| margin: 0; | ||
| border: 0; | ||
| max-width: 100%; | ||
| outline: 0; | ||
| color: #141517; | ||
| font-family: inherit; | ||
| font-size: inherit; | ||
| line-height: 1.5; | ||
| box-shadow: 0 0 0 1px rgba(0,0,0,.15); | ||
| border-radius: 4px; | ||
| padding: .5em .7em; | ||
| -webkit-transition: box-shadow .2s; | ||
| transition: box-shadow .2s; | ||
| &:focus { | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:disabled { | ||
| opacity: .5; | ||
| cursor: not-allowed!important; | ||
| } | ||
| &[readonly] { | ||
| opacity: .8; | ||
| cursor: default!important; | ||
| } | ||
| &::-ms-clear { | ||
| display: none; | ||
| } | ||
| &::-ms-expand { | ||
| display: none; | ||
| } | ||
| &::-ms-reveal { | ||
| display: none; | ||
| } | ||
| &::-ms-check { | ||
| display: none; | ||
| } | ||
| &[type="file"] { | ||
| cursor: pointer; | ||
| } | ||
| &::-ms-value { | ||
| background: none; | ||
| color: inherit; | ||
| font: inherit; | ||
| padding: 0; | ||
| margin: 0; | ||
| border: 0; | ||
| } | ||
| &[type="number"] { | ||
| -moz-appearance: textfield; | ||
| } | ||
| &::-webkit-outer-spin-button { | ||
| -webkit-appearance: none; | ||
| } | ||
| &::-webkit-inner-spin-button { | ||
| -webkit-appearance: none; | ||
| } | ||
| &[type="radio"] { | ||
| border-radius: 100%; | ||
| } | ||
| &[type="radio"] { | ||
| width: 1.3em; | ||
| height: 1.3em; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| padding: 0; | ||
| } | ||
| &[type="checkbox"] { | ||
| width: 1.3em; | ||
| height: 1.3em; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| padding: 0; | ||
| } | ||
| &[type="radio"]:checked { | ||
| background-image: -webkit-radial-gradient(at center center, transparent 25%, currentcolor 28%); | ||
| background-image: radial-gradient(at center center, transparent 25%, currentcolor 28%); | ||
| } | ||
| &[type="checkbox"]:checked { | ||
| background-position-x: 10%, 240%, 5%, 100%, 100%, 100%, 100%; | ||
| background-position-y: 40%, 70%, 10%, center, center, center, center; | ||
| background-image: -webkit-linear-gradient(45deg, transparent 58%, currentColor 59%), | ||
| -webkit-linear-gradient(315deg, currentColor 33%, transparent 34%), | ||
| -webkit-linear-gradient(45deg, transparent 58%, currentcolor 59%), | ||
| -webkit-linear-gradient(225deg, currentColor 23%, transparent 23%), | ||
| -webkit-linear-gradient(315deg, currentColor 33%, transparent 33%), | ||
| -webkit-linear-gradient(45deg, currentcolor 28%, transparent 27%), | ||
| -webkit-linear-gradient(135deg, currentcolor 42%, transparent 41%); | ||
| background-image: linear-gradient(45deg, transparent 58%, currentColor 59%), | ||
| linear-gradient(135deg, currentColor 33%, transparent 34%), | ||
| linear-gradient(45deg, transparent 58%, currentcolor 59%), | ||
| linear-gradient(-135deg, currentColor 23%, transparent 23%), | ||
| linear-gradient(135deg, currentColor 33%, transparent 33%), | ||
| linear-gradient(45deg, currentcolor 28%, transparent 27%), | ||
| linear-gradient(-45deg, currentcolor 42%, transparent 41%); | ||
| background-size: 35.5% 118%, 85% 99%, 33.7% 118%, 100% auto, 100% auto, 100% auto, 100% auto; | ||
| } | ||
| @at-root textarea#{&} { | ||
| overflow: auto; | ||
| resize: vertical; | ||
| vertical-align: top; | ||
| line-height: inherit; | ||
| } | ||
| @at-root select#{&}[multiple] { | ||
| vertical-align: top; | ||
| } | ||
| @at-root select#{&}:not([multiple]) { | ||
| background-image: -webkit-linear-gradient(45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%), | ||
| -webkit-linear-gradient(135deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%); | ||
| background-image: linear-gradient(45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%), | ||
| linear-gradient(-45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%); | ||
| background-size: .36em 100%, .36em 100%; | ||
| background-repeat: no-repeat; | ||
| background-position-x: calc(100% - 1.35em), calc(100% - 1em); | ||
| background-position-y: 0; | ||
| padding-right: 2.5em; | ||
| vertical-align: top; | ||
| } | ||
| } | ||
| @mixin nrk-switch { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| vertical-align: middle; | ||
| background: transparent; | ||
| margin: 0; | ||
| border: 0; | ||
| outline: 0; | ||
| background: -webkit-radial-gradient(25%, circle, transparent 25%, currentColor 27.5%, currentColor); | ||
| background: radial-gradient(circle at 25%, transparent 25%, currentColor 27.5%, currentColor); | ||
| border-radius: 50px; | ||
| cursor: pointer; | ||
| color: inherit; | ||
| font: inherit; | ||
| width: 3em; | ||
| height: 1.5em; | ||
| opacity: .5; | ||
| -webkit-transition: .2s; | ||
| transition: .2s; | ||
| &::-ms-check { | ||
| display: none; | ||
| } | ||
| &:disabled { | ||
| opacity: .2; | ||
| cursor: not-allowed!important; | ||
| } | ||
| &:focus { | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:active:hover { | ||
| background-position-x: .3em; | ||
| } | ||
| &:checked { | ||
| opacity: 1; | ||
| background-position-x: 1.5em; | ||
| } | ||
| &:checked:active:hover { | ||
| background-position-x: 1.2em; | ||
| } | ||
| } | ||
| @mixin nrk-pagination { | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-align: center; | ||
| font-size: 0; | ||
| &::before { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 50%; | ||
| border-top: 1px solid; | ||
| opacity: .22; | ||
| } | ||
| &::after { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 50%; | ||
| border-top: 1px solid; | ||
| opacity: .22; | ||
| } | ||
| &::before { | ||
| margin-left: -50%; | ||
| } | ||
| &::after { | ||
| margin-right: -50%; | ||
| } | ||
| & > .nrk-button:only-child { | ||
| min-width: 200px; | ||
| } | ||
| & > .nrk-button:not(:last-child) { | ||
| border-top-right-radius: 0; | ||
| border-bottom-right-radius: 0; | ||
| margin-right: 0; | ||
| } | ||
| & > .nrk-button:not(:last-child)::after { | ||
| right: 0; | ||
| } | ||
| & > .nrk-button + .nrk-button { | ||
| border-top-left-radius: 0; | ||
| border-bottom-left-radius: 0; | ||
| border-left-style: none; | ||
| margin-left: 0; | ||
| } | ||
| } | ||
| @mixin nrk-xs-100 { | ||
| width: 100vw; | ||
| margin-left: calc(50% - 50vw); | ||
| } | ||
| @mixin nrk-xs-1of12 { | ||
| width: 8.33333%; | ||
| } | ||
| @mixin nrk-xs-2of12 { | ||
| width: 16.6666%; | ||
| } | ||
| @mixin nrk-xs-3of12 { | ||
| width: 25%; | ||
| } | ||
| @mixin nrk-xs-4of12 { | ||
| width: 33.3333%; | ||
| } | ||
| @mixin nrk-xs-5of12 { | ||
| width: 41.6666%; | ||
| } | ||
| @mixin nrk-xs-6of12 { | ||
| width: 50%; | ||
| } | ||
| @mixin nrk-xs-7of12 { | ||
| width: 58.3333%; | ||
| } | ||
| @mixin nrk-xs-8of12 { | ||
| width: 66.6666%; | ||
| } | ||
| @mixin nrk-xs-9of12 { | ||
| width: 75%; | ||
| } | ||
| @mixin nrk-xs-10of12 { | ||
| width: 83.3333%; | ||
| } | ||
| @mixin nrk-xs-11of12 { | ||
| width: 91.6666%; | ||
| } | ||
| @mixin nrk-xs-12of12 { | ||
| width: 100%; | ||
| } | ||
| @mixin nrk-sm-1of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-2of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-3of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-4of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-5of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-6of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-7of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-8of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-9of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-10of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-11of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-12of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| @mixin nrk-md-1of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| @mixin nrk-md-2of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-md-3of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| @mixin nrk-md-4of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-md-5of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-md-6of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| @mixin nrk-md-7of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-md-8of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-md-9of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| @mixin nrk-md-10of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-md-11of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-md-12of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-1of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-2of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-3of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-4of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-5of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-6of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-7of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-8of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-9of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-10of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-11of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-12of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-1of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-2of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-3of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-4of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-5of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-6of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-7of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-8of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-9of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-10of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-11of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-12of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| @mixin nrk-aspect { | ||
| position: relative; | ||
| & > * { | ||
| box-sizing: border-box; | ||
| position: absolute; | ||
| margin: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| &::after { | ||
| content: ''; | ||
| display: block; | ||
| padding-top: 56.25%; | ||
| } | ||
| } | ||
| @mixin nrk-aspect--9x16 { | ||
| &::after { | ||
| padding-top: 177.78%; | ||
| } | ||
| } | ||
| @mixin nrk-aspect--4x3 { | ||
| &::after { | ||
| padding-top: 75%; | ||
| } | ||
| } | ||
| @mixin nrk-aspect--1x1 { | ||
| &::after { | ||
| padding-top: 100%; | ||
| } | ||
| } | ||
| @mixin nrk-color-base { | ||
| color: #26292a; | ||
| background-color: #fff; | ||
| } | ||
| @mixin nrk-color-spot { | ||
| color: #26292a; | ||
| background-color: #00b9f2; | ||
| } | ||
| @mixin nrk-color-invert { | ||
| color: #fff; | ||
| background-color: #141517; | ||
| } | ||
| @mixin nrk-color-shade-1 { | ||
| color: #26292a; | ||
| background-color: #f3f3f3; | ||
| } | ||
| @mixin nrk-color-shade-2 { | ||
| color: #26292a; | ||
| background-color: #e9e9e9; | ||
| } | ||
| @mixin nrk-color-shade-3 { | ||
| color: #26292a; | ||
| background-color: #e0e0e0; | ||
| } | ||
| @mixin nrk-color-shade-4 { | ||
| color: #26292a; | ||
| background-color: #c8c8c8; | ||
| } | ||
| @mixin nrk-fade { | ||
| opacity: .4; | ||
| } | ||
| @mixin nrk-sr { | ||
| position: absolute!important; | ||
| overflow: hidden!important; | ||
| width: 1px!important; | ||
| height: 1px!important; | ||
| clip: rect(0, 0, 0, 0)!important; | ||
| } | ||
| @mixin nrk-sr-focus { | ||
| &:not(:focus) { | ||
| position: absolute!important; | ||
| overflow: hidden!important; | ||
| width: 1px!important; | ||
| height: 1px!important; | ||
| clip: rect(0, 0, 0, 0)!important; | ||
| } | ||
| } |
| html { | ||
| -webkit-text-size-adjust: 100%; | ||
| -moz-text-size-adjust: 100%; | ||
| -ms-text-size-adjust: 100%; | ||
| text-size-adjust: 100%; | ||
| -webkit-tap-highlight-color: transparent; | ||
| } | ||
| input { | ||
| -webkit-font-feature-settings: "liga" 0; | ||
| font-feature-settings: "liga" 0; | ||
| text-rendering: optimizeSpeed; | ||
| } | ||
| textarea { | ||
| -webkit-font-feature-settings: "liga" 0; | ||
| font-feature-settings: "liga" 0; | ||
| text-rendering: optimizeSpeed; | ||
| } | ||
| [contenteditable] { | ||
| -webkit-font-feature-settings: "liga" 0; | ||
| font-feature-settings: "liga" 0; | ||
| text-rendering: optimizeSpeed; | ||
| } | ||
| svg { | ||
| fill: inherit; | ||
| } | ||
| svg > use > svg { | ||
| fill: inherit; | ||
| } | ||
| body { | ||
| margin: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| } | ||
| img { | ||
| margin: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| } | ||
| svg { | ||
| margin: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| } | ||
| a { | ||
| margin: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| } | ||
| iframe { | ||
| margin: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| } | ||
| button { | ||
| -ms-touch-action: manipulation; | ||
| touch-action: manipulation; | ||
| } | ||
| a { | ||
| -ms-touch-action: manipulation; | ||
| touch-action: manipulation; | ||
| } | ||
| [hidden] { | ||
| display: none; | ||
| } | ||
| nrk-truncate() { | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
| } | ||
| nrk-unset() { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| background: none; | ||
| border: 0 solid; | ||
| border-radius: 0; | ||
| border-spacing: 0; | ||
| border-collapse: collapse; | ||
| box-sizing: border-box; | ||
| color: inherit; | ||
| font: inherit; | ||
| height: auto; | ||
| list-style: none; | ||
| margin: 0; | ||
| max-height: none; | ||
| max-width: none; | ||
| min-height: auto; | ||
| min-width: auto; | ||
| padding: 0; | ||
| text-align: inherit; | ||
| text-transform: inherit; | ||
| text-decoration: inherit; | ||
| width: auto; | ||
| &::-ms-expand { | ||
| display: none; | ||
| } | ||
| } | ||
| nrk-grid() { | ||
| & > * { | ||
| box-sizing: border-box; | ||
| -webkit-flex-shrink: 0; | ||
| -ms-flex-negative: 0; | ||
| flex-shrink: 0; | ||
| display: inline-block; | ||
| vertical-align: top; | ||
| font-size: 1rem; | ||
| } | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-flex-wrap: wrap; | ||
| -ms-flex-wrap: wrap; | ||
| flex-wrap: wrap; | ||
| font-size: 0; | ||
| } | ||
| nrk-grid--equalize() { | ||
| & > * { | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| } | ||
| & > * > * { | ||
| width: 100%; | ||
| } | ||
| } | ||
| nrk-grid--nowrap() { | ||
| & > * { | ||
| white-space: normal; | ||
| } | ||
| white-space: nowrap; | ||
| -webkit-flex-wrap: nowrap; | ||
| -ms-flex-wrap: nowrap; | ||
| flex-wrap: nowrap; | ||
| } | ||
| nrk-button() { | ||
| &::-moz-focus-inner { | ||
| border: 0; | ||
| padding: 0; | ||
| } | ||
| -webkit-appearance: none; | ||
| box-sizing: border-box; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| white-space: nowrap; | ||
| position: relative; | ||
| margin: 3px 1px; | ||
| padding: 0 19px; | ||
| border: 0 solid; | ||
| border-radius: 99px; | ||
| height: 41px; | ||
| min-width: 41px; | ||
| font: inherit; | ||
| font-size: 14px; | ||
| line-height: 41px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| background: transparent; | ||
| color: inherit; | ||
| -webkit-transition: box-shadow .2s, -webkit-transform .2s; | ||
| transition: box-shadow .2s, -webkit-transform .2s; | ||
| transition: transform .2s, box-shadow .2s; | ||
| transition: transform .2s, box-shadow .2s, -webkit-transform .2s; | ||
| &::after { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| right: .5px; | ||
| bottom: 0; | ||
| left: 0; | ||
| opacity: .4; | ||
| border: inherit; | ||
| border-radius: inherit; | ||
| border-width: 1px; | ||
| -webkit-transition: border .2s; | ||
| transition: border .2s; | ||
| -webkit-backface-visibility: hidden; | ||
| } | ||
| &:active { | ||
| -webkit-transform: scale(.95); | ||
| -ms-transform: scale(.95); | ||
| transform: scale(.95); | ||
| } | ||
| &:hover { | ||
| outline: 0; | ||
| border-color: transparent; | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:focus { | ||
| outline: 0; | ||
| border-color: transparent; | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:disabled { | ||
| cursor: default; | ||
| pointer-events: none; | ||
| box-shadow: none; | ||
| opacity: .6; | ||
| } | ||
| &.is-disabled { | ||
| cursor: default; | ||
| pointer-events: none; | ||
| box-shadow: none; | ||
| opacity: .6; | ||
| } | ||
| &.is-busy::before { | ||
| content: ''; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| width: 14px; | ||
| height: 14px; | ||
| border: 1px solid; | ||
| border-top-color: transparent; | ||
| border-radius: 50%; | ||
| margin-right: 5px; | ||
| -webkit-animation: nrk-spin 1s infinite linear; | ||
| animation: nrk-spin 1s infinite linear; | ||
| } | ||
| & svg { | ||
| vertical-align: middle; | ||
| } | ||
| } | ||
| nrk-button--o() { | ||
| width: 41px; | ||
| height: 41px; | ||
| padding: 10px; | ||
| & svg { | ||
| display: block; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| } | ||
| nrk-spin() { | ||
| -webkit-animation: nrk-spin 1s infinite linear; | ||
| animation: nrk-spin 1s infinite linear; | ||
| } | ||
| @-webkit-keyframes nrk-spin { | ||
| to { | ||
| -webkit-transform: rotate(360deg); | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
| @keyframes nrk-spin { | ||
| to { | ||
| -webkit-transform: rotate(360deg); | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
| nrk-input() { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| box-sizing: border-box; | ||
| position: relative; | ||
| vertical-align: middle; | ||
| background: #fff no-repeat; | ||
| margin: 0; | ||
| border: 0; | ||
| max-width: 100%; | ||
| outline: 0; | ||
| color: #141517; | ||
| font-family: inherit; | ||
| font-size: inherit; | ||
| line-height: 1.5; | ||
| box-shadow: 0 0 0 1px rgba(0,0,0,.15); | ||
| border-radius: 4px; | ||
| padding: .5em .7em; | ||
| -webkit-transition: box-shadow .2s; | ||
| transition: box-shadow .2s; | ||
| &:focus { | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:disabled { | ||
| opacity: .5; | ||
| cursor: not-allowed!important; | ||
| } | ||
| &[readonly] { | ||
| opacity: .8; | ||
| cursor: default!important; | ||
| } | ||
| &::-ms-clear { | ||
| display: none; | ||
| } | ||
| &::-ms-expand { | ||
| display: none; | ||
| } | ||
| &::-ms-reveal { | ||
| display: none; | ||
| } | ||
| &::-ms-check { | ||
| display: none; | ||
| } | ||
| &[type="file"] { | ||
| cursor: pointer; | ||
| } | ||
| &::-ms-value { | ||
| background: none; | ||
| color: inherit; | ||
| font: inherit; | ||
| padding: 0; | ||
| margin: 0; | ||
| border: 0; | ||
| } | ||
| &[type="number"] { | ||
| -moz-appearance: textfield; | ||
| } | ||
| &::-webkit-outer-spin-button { | ||
| -webkit-appearance: none; | ||
| } | ||
| &::-webkit-inner-spin-button { | ||
| -webkit-appearance: none; | ||
| } | ||
| &[type="radio"] { | ||
| border-radius: 100%; | ||
| } | ||
| &[type="radio"] { | ||
| width: 1.3em; | ||
| height: 1.3em; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| padding: 0; | ||
| } | ||
| &[type="checkbox"] { | ||
| width: 1.3em; | ||
| height: 1.3em; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| padding: 0; | ||
| } | ||
| &[type="radio"]:checked { | ||
| background-image: -webkit-radial-gradient(at center center, transparent 25%, currentcolor 28%); | ||
| background-image: radial-gradient(at center center, transparent 25%, currentcolor 28%); | ||
| } | ||
| &[type="checkbox"]:checked { | ||
| background-position-x: 10%, 240%, 5%, 100%, 100%, 100%, 100%; | ||
| background-position-y: 40%, 70%, 10%, center, center, center, center; | ||
| background-image: -webkit-linear-gradient(45deg, transparent 58%, currentColor 59%), | ||
| -webkit-linear-gradient(315deg, currentColor 33%, transparent 34%), | ||
| -webkit-linear-gradient(45deg, transparent 58%, currentcolor 59%), | ||
| -webkit-linear-gradient(225deg, currentColor 23%, transparent 23%), | ||
| -webkit-linear-gradient(315deg, currentColor 33%, transparent 33%), | ||
| -webkit-linear-gradient(45deg, currentcolor 28%, transparent 27%), | ||
| -webkit-linear-gradient(135deg, currentcolor 42%, transparent 41%); | ||
| background-image: linear-gradient(45deg, transparent 58%, currentColor 59%), | ||
| linear-gradient(135deg, currentColor 33%, transparent 34%), | ||
| linear-gradient(45deg, transparent 58%, currentcolor 59%), | ||
| linear-gradient(-135deg, currentColor 23%, transparent 23%), | ||
| linear-gradient(135deg, currentColor 33%, transparent 33%), | ||
| linear-gradient(45deg, currentcolor 28%, transparent 27%), | ||
| linear-gradient(-45deg, currentcolor 42%, transparent 41%); | ||
| background-size: 35.5% 118%, 85% 99%, 33.7% 118%, 100% auto, 100% auto, 100% auto, 100% auto; | ||
| } | ||
| textarea& { | ||
| overflow: auto; | ||
| resize: vertical; | ||
| vertical-align: top; | ||
| line-height: inherit; | ||
| } | ||
| select&[multiple] { | ||
| vertical-align: top; | ||
| } | ||
| select&:not([multiple]) { | ||
| background-image: -webkit-linear-gradient(45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%), | ||
| -webkit-linear-gradient(135deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%); | ||
| background-image: linear-gradient(45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%), | ||
| linear-gradient(-45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%); | ||
| background-size: .36em 100%, .36em 100%; | ||
| background-repeat: no-repeat; | ||
| background-position-x: calc(100% - 1.35em), calc(100% - 1em); | ||
| background-position-y: 0; | ||
| padding-right: 2.5em; | ||
| vertical-align: top; | ||
| } | ||
| } | ||
| nrk-switch() { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| vertical-align: middle; | ||
| background: transparent; | ||
| margin: 0; | ||
| border: 0; | ||
| outline: 0; | ||
| background: -webkit-radial-gradient(25%, circle, transparent 25%, currentColor 27.5%, currentColor); | ||
| background: radial-gradient(circle at 25%, transparent 25%, currentColor 27.5%, currentColor); | ||
| border-radius: 50px; | ||
| cursor: pointer; | ||
| color: inherit; | ||
| font: inherit; | ||
| width: 3em; | ||
| height: 1.5em; | ||
| opacity: .5; | ||
| -webkit-transition: .2s; | ||
| transition: .2s; | ||
| &::-ms-check { | ||
| display: none; | ||
| } | ||
| &:disabled { | ||
| opacity: .2; | ||
| cursor: not-allowed!important; | ||
| } | ||
| &:focus { | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:active:hover { | ||
| background-position-x: .3em; | ||
| } | ||
| &:checked { | ||
| opacity: 1; | ||
| background-position-x: 1.5em; | ||
| } | ||
| &:checked:active:hover { | ||
| background-position-x: 1.2em; | ||
| } | ||
| } | ||
| nrk-pagination() { | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-align: center; | ||
| font-size: 0; | ||
| &::before { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 50%; | ||
| border-top: 1px solid; | ||
| opacity: .22; | ||
| } | ||
| &::after { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 50%; | ||
| border-top: 1px solid; | ||
| opacity: .22; | ||
| } | ||
| &::before { | ||
| margin-left: -50%; | ||
| } | ||
| &::after { | ||
| margin-right: -50%; | ||
| } | ||
| & > .nrk-button:only-child { | ||
| min-width: 200px; | ||
| } | ||
| & > .nrk-button:not(:last-child) { | ||
| border-top-right-radius: 0; | ||
| border-bottom-right-radius: 0; | ||
| margin-right: 0; | ||
| } | ||
| & > .nrk-button:not(:last-child)::after { | ||
| right: 0; | ||
| } | ||
| & > .nrk-button + .nrk-button { | ||
| border-top-left-radius: 0; | ||
| border-bottom-left-radius: 0; | ||
| border-left-style: none; | ||
| margin-left: 0; | ||
| } | ||
| } | ||
| nrk-xs-100() { | ||
| width: 100vw; | ||
| margin-left: calc(50% - 50vw); | ||
| } | ||
| nrk-xs-1of12() { | ||
| width: 8.33333%; | ||
| } | ||
| nrk-xs-2of12() { | ||
| width: 16.6666%; | ||
| } | ||
| nrk-xs-3of12() { | ||
| width: 25%; | ||
| } | ||
| nrk-xs-4of12() { | ||
| width: 33.3333%; | ||
| } | ||
| nrk-xs-5of12() { | ||
| width: 41.6666%; | ||
| } | ||
| nrk-xs-6of12() { | ||
| width: 50%; | ||
| } | ||
| nrk-xs-7of12() { | ||
| width: 58.3333%; | ||
| } | ||
| nrk-xs-8of12() { | ||
| width: 66.6666%; | ||
| } | ||
| nrk-xs-9of12() { | ||
| width: 75%; | ||
| } | ||
| nrk-xs-10of12() { | ||
| width: 83.3333%; | ||
| } | ||
| nrk-xs-11of12() { | ||
| width: 91.6666%; | ||
| } | ||
| nrk-xs-12of12() { | ||
| width: 100%; | ||
| } | ||
| nrk-sm-1of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| nrk-sm-2of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| nrk-sm-3of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| nrk-sm-4of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| nrk-sm-5of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| nrk-sm-6of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| nrk-sm-7of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| nrk-sm-8of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| nrk-sm-9of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| nrk-sm-10of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| nrk-sm-11of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| nrk-sm-12of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| nrk-md-1of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| nrk-md-2of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| nrk-md-3of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| nrk-md-4of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| nrk-md-5of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| nrk-md-6of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| nrk-md-7of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| nrk-md-8of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| nrk-md-9of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| nrk-md-10of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| nrk-md-11of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| nrk-md-12of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| nrk-lg-1of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| nrk-lg-2of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| nrk-lg-3of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| nrk-lg-4of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| nrk-lg-5of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| nrk-lg-6of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| nrk-lg-7of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| nrk-lg-8of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| nrk-lg-9of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| nrk-lg-10of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| nrk-lg-11of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| nrk-lg-12of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| nrk-xl-1of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| nrk-xl-2of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| nrk-xl-3of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| nrk-xl-4of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| nrk-xl-5of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| nrk-xl-6of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| nrk-xl-7of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| nrk-xl-8of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| nrk-xl-9of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| nrk-xl-10of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| nrk-xl-11of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| nrk-xl-12of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| nrk-aspect() { | ||
| position: relative; | ||
| & > * { | ||
| box-sizing: border-box; | ||
| position: absolute; | ||
| margin: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| &::after { | ||
| content: ''; | ||
| display: block; | ||
| padding-top: 56.25%; | ||
| } | ||
| } | ||
| nrk-aspect--9x16() { | ||
| &::after { | ||
| padding-top: 177.78%; | ||
| } | ||
| } | ||
| nrk-aspect--4x3() { | ||
| &::after { | ||
| padding-top: 75%; | ||
| } | ||
| } | ||
| nrk-aspect--1x1() { | ||
| &::after { | ||
| padding-top: 100%; | ||
| } | ||
| } | ||
| nrk-color-base() { | ||
| color: #26292a; | ||
| background-color: #fff; | ||
| } | ||
| nrk-color-spot() { | ||
| color: #26292a; | ||
| background-color: #00b9f2; | ||
| } | ||
| nrk-color-invert() { | ||
| color: #fff; | ||
| background-color: #141517; | ||
| } | ||
| nrk-color-shade-1() { | ||
| color: #26292a; | ||
| background-color: #f3f3f3; | ||
| } | ||
| nrk-color-shade-2() { | ||
| color: #26292a; | ||
| background-color: #e9e9e9; | ||
| } | ||
| nrk-color-shade-3() { | ||
| color: #26292a; | ||
| background-color: #e0e0e0; | ||
| } | ||
| nrk-color-shade-4() { | ||
| color: #26292a; | ||
| background-color: #c8c8c8; | ||
| } | ||
| nrk-fade() { | ||
| opacity: .4; | ||
| } | ||
| nrk-sr() { | ||
| position: absolute!important; | ||
| overflow: hidden!important; | ||
| width: 1px!important; | ||
| height: 1px!important; | ||
| clip: rect(0, 0, 0, 0)!important; | ||
| } | ||
| nrk-sr-focus() { | ||
| &:not(:focus) { | ||
| position: absolute!important; | ||
| overflow: hidden!important; | ||
| width: 1px!important; | ||
| height: 1px!important; | ||
| clip: rect(0, 0, 0, 0)!important; | ||
| } | ||
| } |
| .nrk-truncate() { | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
| } | ||
| .nrk-unset() { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| background: none; | ||
| border: 0 solid; | ||
| border-radius: 0; | ||
| border-spacing: 0; | ||
| border-collapse: collapse; | ||
| box-sizing: border-box; | ||
| color: inherit; | ||
| font: inherit; | ||
| height: auto; | ||
| list-style: none; | ||
| margin: 0; | ||
| max-height: none; | ||
| max-width: none; | ||
| min-height: auto; | ||
| min-width: auto; | ||
| padding: 0; | ||
| text-align: inherit; | ||
| text-transform: inherit; | ||
| text-decoration: inherit; | ||
| width: auto; | ||
| &::-ms-expand { | ||
| display: none; | ||
| } | ||
| } | ||
| .nrk-grid() { | ||
| & > * { | ||
| box-sizing: border-box; | ||
| -webkit-flex-shrink: 0; | ||
| -ms-flex-negative: 0; | ||
| flex-shrink: 0; | ||
| display: inline-block; | ||
| vertical-align: top; | ||
| font-size: 1rem; | ||
| } | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-flex-wrap: wrap; | ||
| -ms-flex-wrap: wrap; | ||
| flex-wrap: wrap; | ||
| font-size: 0; | ||
| } | ||
| .nrk-grid--equalize() { | ||
| & > * { | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| } | ||
| & > * > * { | ||
| width: 100%; | ||
| } | ||
| } | ||
| .nrk-grid--nowrap() { | ||
| & > * { | ||
| white-space: normal; | ||
| } | ||
| white-space: nowrap; | ||
| -webkit-flex-wrap: nowrap; | ||
| -ms-flex-wrap: nowrap; | ||
| flex-wrap: nowrap; | ||
| } | ||
| .nrk-button() { | ||
| &::-moz-focus-inner { | ||
| border: 0; | ||
| padding: 0; | ||
| } | ||
| -webkit-appearance: none; | ||
| box-sizing: border-box; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| white-space: nowrap; | ||
| position: relative; | ||
| margin: 3px 1px; | ||
| padding: 0 19px; | ||
| border: 0 solid; | ||
| border-radius: 99px; | ||
| height: 41px; | ||
| min-width: 41px; | ||
| font: inherit; | ||
| font-size: 14px; | ||
| line-height: 41px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| background: transparent; | ||
| color: inherit; | ||
| -webkit-transition: box-shadow .2s, -webkit-transform .2s; | ||
| transition: box-shadow .2s, -webkit-transform .2s; | ||
| transition: transform .2s, box-shadow .2s; | ||
| transition: transform .2s, box-shadow .2s, -webkit-transform .2s; | ||
| &::after { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| right: .5px; | ||
| bottom: 0; | ||
| left: 0; | ||
| opacity: .4; | ||
| border: inherit; | ||
| border-radius: inherit; | ||
| border-width: 1px; | ||
| -webkit-transition: border .2s; | ||
| transition: border .2s; | ||
| -webkit-backface-visibility: hidden; | ||
| } | ||
| &:active { | ||
| -webkit-transform: scale(.95); | ||
| -ms-transform: scale(.95); | ||
| transform: scale(.95); | ||
| } | ||
| &:hover { | ||
| outline: 0; | ||
| border-color: transparent; | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:focus { | ||
| outline: 0; | ||
| border-color: transparent; | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:disabled { | ||
| cursor: default; | ||
| pointer-events: none; | ||
| box-shadow: none; | ||
| opacity: .6; | ||
| } | ||
| &.is-disabled { | ||
| cursor: default; | ||
| pointer-events: none; | ||
| box-shadow: none; | ||
| opacity: .6; | ||
| } | ||
| &.is-busy::before { | ||
| content: ''; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| width: 14px; | ||
| height: 14px; | ||
| border: 1px solid; | ||
| border-top-color: transparent; | ||
| border-radius: 50%; | ||
| margin-right: 5px; | ||
| -webkit-animation: nrk-spin 1s infinite linear; | ||
| animation: nrk-spin 1s infinite linear; | ||
| } | ||
| & svg { | ||
| vertical-align: middle; | ||
| } | ||
| } | ||
| .nrk-button--o() { | ||
| width: 41px; | ||
| height: 41px; | ||
| padding: 10px; | ||
| & svg { | ||
| display: block; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| } | ||
| .nrk-spin() { | ||
| -webkit-animation: nrk-spin 1s infinite linear; | ||
| animation: nrk-spin 1s infinite linear; | ||
| } | ||
| .nrk-input() { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| box-sizing: border-box; | ||
| position: relative; | ||
| vertical-align: middle; | ||
| background: #fff no-repeat; | ||
| margin: 0; | ||
| border: 0; | ||
| max-width: 100%; | ||
| outline: 0; | ||
| color: #141517; | ||
| font-family: inherit; | ||
| font-size: inherit; | ||
| line-height: 1.5; | ||
| box-shadow: 0 0 0 1px rgba(0,0,0,.15); | ||
| border-radius: 4px; | ||
| padding: .5em .7em; | ||
| -webkit-transition: box-shadow .2s; | ||
| transition: box-shadow .2s; | ||
| &:focus { | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:disabled { | ||
| opacity: .5; | ||
| cursor: not-allowed!important; | ||
| } | ||
| &[readonly] { | ||
| opacity: .8; | ||
| cursor: default!important; | ||
| } | ||
| &::-ms-clear { | ||
| display: none; | ||
| } | ||
| &::-ms-expand { | ||
| display: none; | ||
| } | ||
| &::-ms-reveal { | ||
| display: none; | ||
| } | ||
| &::-ms-check { | ||
| display: none; | ||
| } | ||
| &[type="file"] { | ||
| cursor: pointer; | ||
| } | ||
| &::-ms-value { | ||
| background: none; | ||
| color: inherit; | ||
| font: inherit; | ||
| padding: 0; | ||
| margin: 0; | ||
| border: 0; | ||
| } | ||
| &[type="number"] { | ||
| -moz-appearance: textfield; | ||
| } | ||
| &::-webkit-outer-spin-button { | ||
| -webkit-appearance: none; | ||
| } | ||
| &::-webkit-inner-spin-button { | ||
| -webkit-appearance: none; | ||
| } | ||
| &[type="radio"] { | ||
| border-radius: 100%; | ||
| } | ||
| &[type="radio"] { | ||
| width: 1.3em; | ||
| height: 1.3em; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| padding: 0; | ||
| } | ||
| &[type="checkbox"] { | ||
| width: 1.3em; | ||
| height: 1.3em; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| padding: 0; | ||
| } | ||
| &[type="radio"]:checked { | ||
| background-image: -webkit-radial-gradient(at center center, transparent 25%, currentcolor 28%); | ||
| background-image: radial-gradient(at center center, transparent 25%, currentcolor 28%); | ||
| } | ||
| &[type="checkbox"]:checked { | ||
| background-position-x: 10%, 240%, 5%, 100%, 100%, 100%, 100%; | ||
| background-position-y: 40%, 70%, 10%, center, center, center, center; | ||
| background-image: -webkit-linear-gradient(45deg, transparent 58%, currentColor 59%), | ||
| -webkit-linear-gradient(315deg, currentColor 33%, transparent 34%), | ||
| -webkit-linear-gradient(45deg, transparent 58%, currentcolor 59%), | ||
| -webkit-linear-gradient(225deg, currentColor 23%, transparent 23%), | ||
| -webkit-linear-gradient(315deg, currentColor 33%, transparent 33%), | ||
| -webkit-linear-gradient(45deg, currentcolor 28%, transparent 27%), | ||
| -webkit-linear-gradient(135deg, currentcolor 42%, transparent 41%); | ||
| background-image: linear-gradient(45deg, transparent 58%, currentColor 59%), | ||
| linear-gradient(135deg, currentColor 33%, transparent 34%), | ||
| linear-gradient(45deg, transparent 58%, currentcolor 59%), | ||
| linear-gradient(-135deg, currentColor 23%, transparent 23%), | ||
| linear-gradient(135deg, currentColor 33%, transparent 33%), | ||
| linear-gradient(45deg, currentcolor 28%, transparent 27%), | ||
| linear-gradient(-45deg, currentcolor 42%, transparent 41%); | ||
| background-size: 35.5% 118%, 85% 99%, 33.7% 118%, 100% auto, 100% auto, 100% auto, 100% auto; | ||
| } | ||
| textarea& { | ||
| overflow: auto; | ||
| resize: vertical; | ||
| vertical-align: top; | ||
| line-height: inherit; | ||
| } | ||
| select&[multiple] { | ||
| vertical-align: top; | ||
| } | ||
| select&:not([multiple]) { | ||
| background-image: -webkit-linear-gradient(45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%), | ||
| -webkit-linear-gradient(135deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%); | ||
| background-image: linear-gradient(45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%), | ||
| linear-gradient(-45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%); | ||
| background-size: .36em 100%, .36em 100%; | ||
| background-repeat: no-repeat; | ||
| background-position-x: calc(100% - 1.35em), calc(100% - 1em); | ||
| background-position-y: 0; | ||
| padding-right: 2.5em; | ||
| vertical-align: top; | ||
| } | ||
| } | ||
| .nrk-switch() { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| vertical-align: middle; | ||
| background: transparent; | ||
| margin: 0; | ||
| border: 0; | ||
| outline: 0; | ||
| background: -webkit-radial-gradient(25%, circle, transparent 25%, currentColor 27.5%, currentColor); | ||
| background: radial-gradient(circle at 25%, transparent 25%, currentColor 27.5%, currentColor); | ||
| border-radius: 50px; | ||
| cursor: pointer; | ||
| color: inherit; | ||
| font: inherit; | ||
| width: 3em; | ||
| height: 1.5em; | ||
| opacity: .5; | ||
| -webkit-transition: .2s; | ||
| transition: .2s; | ||
| &::-ms-check { | ||
| display: none; | ||
| } | ||
| &:disabled { | ||
| opacity: .2; | ||
| cursor: not-allowed!important; | ||
| } | ||
| &:focus { | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:active:hover { | ||
| background-position-x: .3em; | ||
| } | ||
| &:checked { | ||
| opacity: 1; | ||
| background-position-x: 1.5em; | ||
| } | ||
| &:checked:active:hover { | ||
| background-position-x: 1.2em; | ||
| } | ||
| } | ||
| .nrk-pagination() { | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-align: center; | ||
| font-size: 0; | ||
| &::before { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 50%; | ||
| border-top: 1px solid; | ||
| opacity: .22; | ||
| } | ||
| &::after { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 50%; | ||
| border-top: 1px solid; | ||
| opacity: .22; | ||
| } | ||
| &::before { | ||
| margin-left: -50%; | ||
| } | ||
| &::after { | ||
| margin-right: -50%; | ||
| } | ||
| & > .nrk-button:only-child { | ||
| min-width: 200px; | ||
| } | ||
| & > .nrk-button:not(:last-child) { | ||
| border-top-right-radius: 0; | ||
| border-bottom-right-radius: 0; | ||
| margin-right: 0; | ||
| } | ||
| & > .nrk-button:not(:last-child)::after { | ||
| right: 0; | ||
| } | ||
| & > .nrk-button + .nrk-button { | ||
| border-top-left-radius: 0; | ||
| border-bottom-left-radius: 0; | ||
| border-left-style: none; | ||
| margin-left: 0; | ||
| } | ||
| } | ||
| .nrk-xs-100() { | ||
| width: 100vw; | ||
| margin-left: calc(50% - 50vw); | ||
| } | ||
| .nrk-xs-1of12() { | ||
| width: 8.33333%; | ||
| } | ||
| .nrk-xs-2of12() { | ||
| width: 16.6666%; | ||
| } | ||
| .nrk-xs-3of12() { | ||
| width: 25%; | ||
| } | ||
| .nrk-xs-4of12() { | ||
| width: 33.3333%; | ||
| } | ||
| .nrk-xs-5of12() { | ||
| width: 41.6666%; | ||
| } | ||
| .nrk-xs-6of12() { | ||
| width: 50%; | ||
| } | ||
| .nrk-xs-7of12() { | ||
| width: 58.3333%; | ||
| } | ||
| .nrk-xs-8of12() { | ||
| width: 66.6666%; | ||
| } | ||
| .nrk-xs-9of12() { | ||
| width: 75%; | ||
| } | ||
| .nrk-xs-10of12() { | ||
| width: 83.3333%; | ||
| } | ||
| .nrk-xs-11of12() { | ||
| width: 91.6666%; | ||
| } | ||
| .nrk-xs-12of12() { | ||
| width: 100%; | ||
| } | ||
| .nrk-sm-1of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| .nrk-sm-2of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| .nrk-sm-3of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| .nrk-sm-4of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| .nrk-sm-5of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| .nrk-sm-6of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| .nrk-sm-7of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| .nrk-sm-8of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| .nrk-sm-9of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| .nrk-sm-10of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| .nrk-sm-11of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| .nrk-sm-12of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| .nrk-md-1of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| .nrk-md-2of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| .nrk-md-3of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| .nrk-md-4of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| .nrk-md-5of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| .nrk-md-6of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| .nrk-md-7of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| .nrk-md-8of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| .nrk-md-9of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| .nrk-md-10of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| .nrk-md-11of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| .nrk-md-12of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| .nrk-lg-1of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| .nrk-lg-2of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| .nrk-lg-3of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| .nrk-lg-4of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| .nrk-lg-5of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| .nrk-lg-6of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| .nrk-lg-7of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| .nrk-lg-8of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| .nrk-lg-9of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| .nrk-lg-10of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| .nrk-lg-11of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| .nrk-lg-12of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| .nrk-xl-1of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| .nrk-xl-2of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| .nrk-xl-3of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| .nrk-xl-4of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| .nrk-xl-5of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| .nrk-xl-6of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| .nrk-xl-7of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| .nrk-xl-8of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| .nrk-xl-9of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| .nrk-xl-10of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| .nrk-xl-11of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| .nrk-xl-12of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| .nrk-aspect() { | ||
| position: relative; | ||
| & > * { | ||
| box-sizing: border-box; | ||
| position: absolute; | ||
| margin: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| &::after { | ||
| content: ''; | ||
| display: block; | ||
| padding-top: 56.25%; | ||
| } | ||
| } | ||
| .nrk-aspect--9x16() { | ||
| &::after { | ||
| padding-top: 177.78%; | ||
| } | ||
| } | ||
| .nrk-aspect--4x3() { | ||
| &::after { | ||
| padding-top: 75%; | ||
| } | ||
| } | ||
| .nrk-aspect--1x1() { | ||
| &::after { | ||
| padding-top: 100%; | ||
| } | ||
| } | ||
| .nrk-color-base() { | ||
| color: #26292a; | ||
| background-color: #fff; | ||
| } | ||
| .nrk-color-spot() { | ||
| color: #26292a; | ||
| background-color: #00b9f2; | ||
| } | ||
| .nrk-color-invert() { | ||
| color: #fff; | ||
| background-color: #141517; | ||
| } | ||
| .nrk-color-shade-1() { | ||
| color: #26292a; | ||
| background-color: #f3f3f3; | ||
| } | ||
| .nrk-color-shade-2() { | ||
| color: #26292a; | ||
| background-color: #e9e9e9; | ||
| } | ||
| .nrk-color-shade-3() { | ||
| color: #26292a; | ||
| background-color: #e0e0e0; | ||
| } | ||
| .nrk-color-shade-4() { | ||
| color: #26292a; | ||
| background-color: #c8c8c8; | ||
| } | ||
| .nrk-fade() { | ||
| opacity: .4; | ||
| } | ||
| .nrk-sr() { | ||
| position: absolute!important; | ||
| overflow: hidden!important; | ||
| width: 1px!important; | ||
| height: 1px!important; | ||
| clip: rect(0, 0, 0, 0)!important; | ||
| } | ||
| .nrk-sr-focus() { | ||
| &:not(:focus) { | ||
| position: absolute!important; | ||
| overflow: hidden!important; | ||
| width: 1px!important; | ||
| height: 1px!important; | ||
| clip: rect(0, 0, 0, 0)!important; | ||
| } | ||
| } |
| @mixin nrk-truncate { | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
| } | ||
| @mixin nrk-unset { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| background: none; | ||
| border: 0 solid; | ||
| border-radius: 0; | ||
| border-spacing: 0; | ||
| border-collapse: collapse; | ||
| box-sizing: border-box; | ||
| color: inherit; | ||
| font: inherit; | ||
| height: auto; | ||
| list-style: none; | ||
| margin: 0; | ||
| max-height: none; | ||
| max-width: none; | ||
| min-height: auto; | ||
| min-width: auto; | ||
| padding: 0; | ||
| text-align: inherit; | ||
| text-transform: inherit; | ||
| text-decoration: inherit; | ||
| width: auto; | ||
| &::-ms-expand { | ||
| display: none; | ||
| } | ||
| } | ||
| @mixin nrk-grid { | ||
| & > * { | ||
| box-sizing: border-box; | ||
| -webkit-flex-shrink: 0; | ||
| -ms-flex-negative: 0; | ||
| flex-shrink: 0; | ||
| display: inline-block; | ||
| vertical-align: top; | ||
| font-size: 1rem; | ||
| } | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-flex-wrap: wrap; | ||
| -ms-flex-wrap: wrap; | ||
| flex-wrap: wrap; | ||
| font-size: 0; | ||
| } | ||
| @mixin nrk-grid--equalize { | ||
| & > * { | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| } | ||
| & > * > * { | ||
| width: 100%; | ||
| } | ||
| } | ||
| @mixin nrk-grid--nowrap { | ||
| & > * { | ||
| white-space: normal; | ||
| } | ||
| white-space: nowrap; | ||
| -webkit-flex-wrap: nowrap; | ||
| -ms-flex-wrap: nowrap; | ||
| flex-wrap: nowrap; | ||
| } | ||
| @mixin nrk-button { | ||
| &::-moz-focus-inner { | ||
| border: 0; | ||
| padding: 0; | ||
| } | ||
| -webkit-appearance: none; | ||
| box-sizing: border-box; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| white-space: nowrap; | ||
| position: relative; | ||
| margin: 3px 1px; | ||
| padding: 0 19px; | ||
| border: 0 solid; | ||
| border-radius: 99px; | ||
| height: 41px; | ||
| min-width: 41px; | ||
| font: inherit; | ||
| font-size: 14px; | ||
| line-height: 41px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| background: transparent; | ||
| color: inherit; | ||
| -webkit-transition: box-shadow .2s, -webkit-transform .2s; | ||
| transition: box-shadow .2s, -webkit-transform .2s; | ||
| transition: transform .2s, box-shadow .2s; | ||
| transition: transform .2s, box-shadow .2s, -webkit-transform .2s; | ||
| &::after { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| right: .5px; | ||
| bottom: 0; | ||
| left: 0; | ||
| opacity: .4; | ||
| border: inherit; | ||
| border-radius: inherit; | ||
| border-width: 1px; | ||
| -webkit-transition: border .2s; | ||
| transition: border .2s; | ||
| -webkit-backface-visibility: hidden; | ||
| } | ||
| &:active { | ||
| -webkit-transform: scale(.95); | ||
| -ms-transform: scale(.95); | ||
| transform: scale(.95); | ||
| } | ||
| &:hover { | ||
| outline: 0; | ||
| border-color: transparent; | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:focus { | ||
| outline: 0; | ||
| border-color: transparent; | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:disabled { | ||
| cursor: default; | ||
| pointer-events: none; | ||
| box-shadow: none; | ||
| opacity: .6; | ||
| } | ||
| &.is-disabled { | ||
| cursor: default; | ||
| pointer-events: none; | ||
| box-shadow: none; | ||
| opacity: .6; | ||
| } | ||
| &.is-busy::before { | ||
| content: ''; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| width: 14px; | ||
| height: 14px; | ||
| border: 1px solid; | ||
| border-top-color: transparent; | ||
| border-radius: 50%; | ||
| margin-right: 5px; | ||
| -webkit-animation: nrk-spin 1s infinite linear; | ||
| animation: nrk-spin 1s infinite linear; | ||
| } | ||
| & svg { | ||
| vertical-align: middle; | ||
| } | ||
| } | ||
| @mixin nrk-button--o { | ||
| width: 41px; | ||
| height: 41px; | ||
| padding: 10px; | ||
| & svg { | ||
| display: block; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| } | ||
| @mixin nrk-spin { | ||
| -webkit-animation: nrk-spin 1s infinite linear; | ||
| animation: nrk-spin 1s infinite linear; | ||
| } | ||
| @mixin nrk-input { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| box-sizing: border-box; | ||
| position: relative; | ||
| vertical-align: middle; | ||
| background: #fff no-repeat; | ||
| margin: 0; | ||
| border: 0; | ||
| max-width: 100%; | ||
| outline: 0; | ||
| color: #141517; | ||
| font-family: inherit; | ||
| font-size: inherit; | ||
| line-height: 1.5; | ||
| box-shadow: 0 0 0 1px rgba(0,0,0,.15); | ||
| border-radius: 4px; | ||
| padding: .5em .7em; | ||
| -webkit-transition: box-shadow .2s; | ||
| transition: box-shadow .2s; | ||
| &:focus { | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:disabled { | ||
| opacity: .5; | ||
| cursor: not-allowed!important; | ||
| } | ||
| &[readonly] { | ||
| opacity: .8; | ||
| cursor: default!important; | ||
| } | ||
| &::-ms-clear { | ||
| display: none; | ||
| } | ||
| &::-ms-expand { | ||
| display: none; | ||
| } | ||
| &::-ms-reveal { | ||
| display: none; | ||
| } | ||
| &::-ms-check { | ||
| display: none; | ||
| } | ||
| &[type="file"] { | ||
| cursor: pointer; | ||
| } | ||
| &::-ms-value { | ||
| background: none; | ||
| color: inherit; | ||
| font: inherit; | ||
| padding: 0; | ||
| margin: 0; | ||
| border: 0; | ||
| } | ||
| &[type="number"] { | ||
| -moz-appearance: textfield; | ||
| } | ||
| &::-webkit-outer-spin-button { | ||
| -webkit-appearance: none; | ||
| } | ||
| &::-webkit-inner-spin-button { | ||
| -webkit-appearance: none; | ||
| } | ||
| &[type="radio"] { | ||
| border-radius: 100%; | ||
| } | ||
| &[type="radio"] { | ||
| width: 1.3em; | ||
| height: 1.3em; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| padding: 0; | ||
| } | ||
| &[type="checkbox"] { | ||
| width: 1.3em; | ||
| height: 1.3em; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| padding: 0; | ||
| } | ||
| &[type="radio"]:checked { | ||
| background-image: -webkit-radial-gradient(at center center, transparent 25%, currentcolor 28%); | ||
| background-image: radial-gradient(at center center, transparent 25%, currentcolor 28%); | ||
| } | ||
| &[type="checkbox"]:checked { | ||
| background-position-x: 10%, 240%, 5%, 100%, 100%, 100%, 100%; | ||
| background-position-y: 40%, 70%, 10%, center, center, center, center; | ||
| background-image: -webkit-linear-gradient(45deg, transparent 58%, currentColor 59%), | ||
| -webkit-linear-gradient(315deg, currentColor 33%, transparent 34%), | ||
| -webkit-linear-gradient(45deg, transparent 58%, currentcolor 59%), | ||
| -webkit-linear-gradient(225deg, currentColor 23%, transparent 23%), | ||
| -webkit-linear-gradient(315deg, currentColor 33%, transparent 33%), | ||
| -webkit-linear-gradient(45deg, currentcolor 28%, transparent 27%), | ||
| -webkit-linear-gradient(135deg, currentcolor 42%, transparent 41%); | ||
| background-image: linear-gradient(45deg, transparent 58%, currentColor 59%), | ||
| linear-gradient(135deg, currentColor 33%, transparent 34%), | ||
| linear-gradient(45deg, transparent 58%, currentcolor 59%), | ||
| linear-gradient(-135deg, currentColor 23%, transparent 23%), | ||
| linear-gradient(135deg, currentColor 33%, transparent 33%), | ||
| linear-gradient(45deg, currentcolor 28%, transparent 27%), | ||
| linear-gradient(-45deg, currentcolor 42%, transparent 41%); | ||
| background-size: 35.5% 118%, 85% 99%, 33.7% 118%, 100% auto, 100% auto, 100% auto, 100% auto; | ||
| } | ||
| @at-root textarea#{&} { | ||
| overflow: auto; | ||
| resize: vertical; | ||
| vertical-align: top; | ||
| line-height: inherit; | ||
| } | ||
| @at-root select#{&}[multiple] { | ||
| vertical-align: top; | ||
| } | ||
| @at-root select#{&}:not([multiple]) { | ||
| background-image: -webkit-linear-gradient(45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%), | ||
| -webkit-linear-gradient(135deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%); | ||
| background-image: linear-gradient(45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%), | ||
| linear-gradient(-45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%); | ||
| background-size: .36em 100%, .36em 100%; | ||
| background-repeat: no-repeat; | ||
| background-position-x: calc(100% - 1.35em), calc(100% - 1em); | ||
| background-position-y: 0; | ||
| padding-right: 2.5em; | ||
| vertical-align: top; | ||
| } | ||
| } | ||
| @mixin nrk-switch { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| vertical-align: middle; | ||
| background: transparent; | ||
| margin: 0; | ||
| border: 0; | ||
| outline: 0; | ||
| background: -webkit-radial-gradient(25%, circle, transparent 25%, currentColor 27.5%, currentColor); | ||
| background: radial-gradient(circle at 25%, transparent 25%, currentColor 27.5%, currentColor); | ||
| border-radius: 50px; | ||
| cursor: pointer; | ||
| color: inherit; | ||
| font: inherit; | ||
| width: 3em; | ||
| height: 1.5em; | ||
| opacity: .5; | ||
| -webkit-transition: .2s; | ||
| transition: .2s; | ||
| &::-ms-check { | ||
| display: none; | ||
| } | ||
| &:disabled { | ||
| opacity: .2; | ||
| cursor: not-allowed!important; | ||
| } | ||
| &:focus { | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:active:hover { | ||
| background-position-x: .3em; | ||
| } | ||
| &:checked { | ||
| opacity: 1; | ||
| background-position-x: 1.5em; | ||
| } | ||
| &:checked:active:hover { | ||
| background-position-x: 1.2em; | ||
| } | ||
| } | ||
| @mixin nrk-pagination { | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-align: center; | ||
| font-size: 0; | ||
| &::before { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 50%; | ||
| border-top: 1px solid; | ||
| opacity: .22; | ||
| } | ||
| &::after { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 50%; | ||
| border-top: 1px solid; | ||
| opacity: .22; | ||
| } | ||
| &::before { | ||
| margin-left: -50%; | ||
| } | ||
| &::after { | ||
| margin-right: -50%; | ||
| } | ||
| & > .nrk-button:only-child { | ||
| min-width: 200px; | ||
| } | ||
| & > .nrk-button:not(:last-child) { | ||
| border-top-right-radius: 0; | ||
| border-bottom-right-radius: 0; | ||
| margin-right: 0; | ||
| } | ||
| & > .nrk-button:not(:last-child)::after { | ||
| right: 0; | ||
| } | ||
| & > .nrk-button + .nrk-button { | ||
| border-top-left-radius: 0; | ||
| border-bottom-left-radius: 0; | ||
| border-left-style: none; | ||
| margin-left: 0; | ||
| } | ||
| } | ||
| @mixin nrk-xs-100 { | ||
| width: 100vw; | ||
| margin-left: calc(50% - 50vw); | ||
| } | ||
| @mixin nrk-xs-1of12 { | ||
| width: 8.33333%; | ||
| } | ||
| @mixin nrk-xs-2of12 { | ||
| width: 16.6666%; | ||
| } | ||
| @mixin nrk-xs-3of12 { | ||
| width: 25%; | ||
| } | ||
| @mixin nrk-xs-4of12 { | ||
| width: 33.3333%; | ||
| } | ||
| @mixin nrk-xs-5of12 { | ||
| width: 41.6666%; | ||
| } | ||
| @mixin nrk-xs-6of12 { | ||
| width: 50%; | ||
| } | ||
| @mixin nrk-xs-7of12 { | ||
| width: 58.3333%; | ||
| } | ||
| @mixin nrk-xs-8of12 { | ||
| width: 66.6666%; | ||
| } | ||
| @mixin nrk-xs-9of12 { | ||
| width: 75%; | ||
| } | ||
| @mixin nrk-xs-10of12 { | ||
| width: 83.3333%; | ||
| } | ||
| @mixin nrk-xs-11of12 { | ||
| width: 91.6666%; | ||
| } | ||
| @mixin nrk-xs-12of12 { | ||
| width: 100%; | ||
| } | ||
| @mixin nrk-sm-1of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-2of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-3of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-4of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-5of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-6of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-7of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-8of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-9of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-10of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-11of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-sm-12of12 { | ||
| @media (min-width: 40rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| @mixin nrk-md-1of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| @mixin nrk-md-2of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-md-3of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| @mixin nrk-md-4of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-md-5of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-md-6of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| @mixin nrk-md-7of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-md-8of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-md-9of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| @mixin nrk-md-10of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-md-11of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-md-12of12 { | ||
| @media (min-width: 45rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-1of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-2of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-3of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-4of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-5of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-6of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-7of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-8of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-9of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-10of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-11of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-lg-12of12 { | ||
| @media (min-width: 62rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-1of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-2of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-3of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-4of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-5of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-6of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-7of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-8of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-9of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-10of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-11of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| @mixin nrk-xl-12of12 { | ||
| @media (min-width: 90rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| @mixin nrk-aspect { | ||
| position: relative; | ||
| & > * { | ||
| box-sizing: border-box; | ||
| position: absolute; | ||
| margin: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| &::after { | ||
| content: ''; | ||
| display: block; | ||
| padding-top: 56.25%; | ||
| } | ||
| } | ||
| @mixin nrk-aspect--9x16 { | ||
| &::after { | ||
| padding-top: 177.78%; | ||
| } | ||
| } | ||
| @mixin nrk-aspect--4x3 { | ||
| &::after { | ||
| padding-top: 75%; | ||
| } | ||
| } | ||
| @mixin nrk-aspect--1x1 { | ||
| &::after { | ||
| padding-top: 100%; | ||
| } | ||
| } | ||
| @mixin nrk-color-base { | ||
| color: #26292a; | ||
| background-color: #fff; | ||
| } | ||
| @mixin nrk-color-spot { | ||
| color: #26292a; | ||
| background-color: #00b9f2; | ||
| } | ||
| @mixin nrk-color-invert { | ||
| color: #fff; | ||
| background-color: #141517; | ||
| } | ||
| @mixin nrk-color-shade-1 { | ||
| color: #26292a; | ||
| background-color: #f3f3f3; | ||
| } | ||
| @mixin nrk-color-shade-2 { | ||
| color: #26292a; | ||
| background-color: #e9e9e9; | ||
| } | ||
| @mixin nrk-color-shade-3 { | ||
| color: #26292a; | ||
| background-color: #e0e0e0; | ||
| } | ||
| @mixin nrk-color-shade-4 { | ||
| color: #26292a; | ||
| background-color: #c8c8c8; | ||
| } | ||
| @mixin nrk-fade { | ||
| opacity: .4; | ||
| } | ||
| @mixin nrk-sr { | ||
| position: absolute!important; | ||
| overflow: hidden!important; | ||
| width: 1px!important; | ||
| height: 1px!important; | ||
| clip: rect(0, 0, 0, 0)!important; | ||
| } | ||
| @mixin nrk-sr-focus { | ||
| &:not(:focus) { | ||
| position: absolute!important; | ||
| overflow: hidden!important; | ||
| width: 1px!important; | ||
| height: 1px!important; | ||
| clip: rect(0, 0, 0, 0)!important; | ||
| } | ||
| } |
| nrk-truncate() { | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
| } | ||
| nrk-unset() { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| background: none; | ||
| border: 0 solid; | ||
| border-radius: 0; | ||
| border-spacing: 0; | ||
| border-collapse: collapse; | ||
| box-sizing: border-box; | ||
| color: inherit; | ||
| font: inherit; | ||
| height: auto; | ||
| list-style: none; | ||
| margin: 0; | ||
| max-height: none; | ||
| max-width: none; | ||
| min-height: auto; | ||
| min-width: auto; | ||
| padding: 0; | ||
| text-align: inherit; | ||
| text-transform: inherit; | ||
| text-decoration: inherit; | ||
| width: auto; | ||
| &::-ms-expand { | ||
| display: none; | ||
| } | ||
| } | ||
| nrk-grid() { | ||
| & > * { | ||
| box-sizing: border-box; | ||
| -webkit-flex-shrink: 0; | ||
| -ms-flex-negative: 0; | ||
| flex-shrink: 0; | ||
| display: inline-block; | ||
| vertical-align: top; | ||
| font-size: 1rem; | ||
| } | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-flex-wrap: wrap; | ||
| -ms-flex-wrap: wrap; | ||
| flex-wrap: wrap; | ||
| font-size: 0; | ||
| } | ||
| nrk-grid--equalize() { | ||
| & > * { | ||
| display: -webkit-box; | ||
| display: -webkit-flex; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| } | ||
| & > * > * { | ||
| width: 100%; | ||
| } | ||
| } | ||
| nrk-grid--nowrap() { | ||
| & > * { | ||
| white-space: normal; | ||
| } | ||
| white-space: nowrap; | ||
| -webkit-flex-wrap: nowrap; | ||
| -ms-flex-wrap: nowrap; | ||
| flex-wrap: nowrap; | ||
| } | ||
| nrk-button() { | ||
| &::-moz-focus-inner { | ||
| border: 0; | ||
| padding: 0; | ||
| } | ||
| -webkit-appearance: none; | ||
| box-sizing: border-box; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| white-space: nowrap; | ||
| position: relative; | ||
| margin: 3px 1px; | ||
| padding: 0 19px; | ||
| border: 0 solid; | ||
| border-radius: 99px; | ||
| height: 41px; | ||
| min-width: 41px; | ||
| font: inherit; | ||
| font-size: 14px; | ||
| line-height: 41px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| background: transparent; | ||
| color: inherit; | ||
| -webkit-transition: box-shadow .2s, -webkit-transform .2s; | ||
| transition: box-shadow .2s, -webkit-transform .2s; | ||
| transition: transform .2s, box-shadow .2s; | ||
| transition: transform .2s, box-shadow .2s, -webkit-transform .2s; | ||
| &::after { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| right: .5px; | ||
| bottom: 0; | ||
| left: 0; | ||
| opacity: .4; | ||
| border: inherit; | ||
| border-radius: inherit; | ||
| border-width: 1px; | ||
| -webkit-transition: border .2s; | ||
| transition: border .2s; | ||
| -webkit-backface-visibility: hidden; | ||
| } | ||
| &:active { | ||
| -webkit-transform: scale(.95); | ||
| -ms-transform: scale(.95); | ||
| transform: scale(.95); | ||
| } | ||
| &:hover { | ||
| outline: 0; | ||
| border-color: transparent; | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:focus { | ||
| outline: 0; | ||
| border-color: transparent; | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:disabled { | ||
| cursor: default; | ||
| pointer-events: none; | ||
| box-shadow: none; | ||
| opacity: .6; | ||
| } | ||
| &.is-disabled { | ||
| cursor: default; | ||
| pointer-events: none; | ||
| box-shadow: none; | ||
| opacity: .6; | ||
| } | ||
| &.is-busy::before { | ||
| content: ''; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| width: 14px; | ||
| height: 14px; | ||
| border: 1px solid; | ||
| border-top-color: transparent; | ||
| border-radius: 50%; | ||
| margin-right: 5px; | ||
| -webkit-animation: nrk-spin 1s infinite linear; | ||
| animation: nrk-spin 1s infinite linear; | ||
| } | ||
| & svg { | ||
| vertical-align: middle; | ||
| } | ||
| } | ||
| nrk-button--o() { | ||
| width: 41px; | ||
| height: 41px; | ||
| padding: 10px; | ||
| & svg { | ||
| display: block; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| } | ||
| nrk-spin() { | ||
| -webkit-animation: nrk-spin 1s infinite linear; | ||
| animation: nrk-spin 1s infinite linear; | ||
| } | ||
| nrk-input() { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| box-sizing: border-box; | ||
| position: relative; | ||
| vertical-align: middle; | ||
| background: #fff no-repeat; | ||
| margin: 0; | ||
| border: 0; | ||
| max-width: 100%; | ||
| outline: 0; | ||
| color: #141517; | ||
| font-family: inherit; | ||
| font-size: inherit; | ||
| line-height: 1.5; | ||
| box-shadow: 0 0 0 1px rgba(0,0,0,.15); | ||
| border-radius: 4px; | ||
| padding: .5em .7em; | ||
| -webkit-transition: box-shadow .2s; | ||
| transition: box-shadow .2s; | ||
| &:focus { | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:disabled { | ||
| opacity: .5; | ||
| cursor: not-allowed!important; | ||
| } | ||
| &[readonly] { | ||
| opacity: .8; | ||
| cursor: default!important; | ||
| } | ||
| &::-ms-clear { | ||
| display: none; | ||
| } | ||
| &::-ms-expand { | ||
| display: none; | ||
| } | ||
| &::-ms-reveal { | ||
| display: none; | ||
| } | ||
| &::-ms-check { | ||
| display: none; | ||
| } | ||
| &[type="file"] { | ||
| cursor: pointer; | ||
| } | ||
| &::-ms-value { | ||
| background: none; | ||
| color: inherit; | ||
| font: inherit; | ||
| padding: 0; | ||
| margin: 0; | ||
| border: 0; | ||
| } | ||
| &[type="number"] { | ||
| -moz-appearance: textfield; | ||
| } | ||
| &::-webkit-outer-spin-button { | ||
| -webkit-appearance: none; | ||
| } | ||
| &::-webkit-inner-spin-button { | ||
| -webkit-appearance: none; | ||
| } | ||
| &[type="radio"] { | ||
| border-radius: 100%; | ||
| } | ||
| &[type="radio"] { | ||
| width: 1.3em; | ||
| height: 1.3em; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| padding: 0; | ||
| } | ||
| &[type="checkbox"] { | ||
| width: 1.3em; | ||
| height: 1.3em; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| padding: 0; | ||
| } | ||
| &[type="radio"]:checked { | ||
| background-image: -webkit-radial-gradient(at center center, transparent 25%, currentcolor 28%); | ||
| background-image: radial-gradient(at center center, transparent 25%, currentcolor 28%); | ||
| } | ||
| &[type="checkbox"]:checked { | ||
| background-position-x: 10%, 240%, 5%, 100%, 100%, 100%, 100%; | ||
| background-position-y: 40%, 70%, 10%, center, center, center, center; | ||
| background-image: -webkit-linear-gradient(45deg, transparent 58%, currentColor 59%), | ||
| -webkit-linear-gradient(315deg, currentColor 33%, transparent 34%), | ||
| -webkit-linear-gradient(45deg, transparent 58%, currentcolor 59%), | ||
| -webkit-linear-gradient(225deg, currentColor 23%, transparent 23%), | ||
| -webkit-linear-gradient(315deg, currentColor 33%, transparent 33%), | ||
| -webkit-linear-gradient(45deg, currentcolor 28%, transparent 27%), | ||
| -webkit-linear-gradient(135deg, currentcolor 42%, transparent 41%); | ||
| background-image: linear-gradient(45deg, transparent 58%, currentColor 59%), | ||
| linear-gradient(135deg, currentColor 33%, transparent 34%), | ||
| linear-gradient(45deg, transparent 58%, currentcolor 59%), | ||
| linear-gradient(-135deg, currentColor 23%, transparent 23%), | ||
| linear-gradient(135deg, currentColor 33%, transparent 33%), | ||
| linear-gradient(45deg, currentcolor 28%, transparent 27%), | ||
| linear-gradient(-45deg, currentcolor 42%, transparent 41%); | ||
| background-size: 35.5% 118%, 85% 99%, 33.7% 118%, 100% auto, 100% auto, 100% auto, 100% auto; | ||
| } | ||
| textarea& { | ||
| overflow: auto; | ||
| resize: vertical; | ||
| vertical-align: top; | ||
| line-height: inherit; | ||
| } | ||
| select&[multiple] { | ||
| vertical-align: top; | ||
| } | ||
| select&:not([multiple]) { | ||
| background-image: -webkit-linear-gradient(45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%), | ||
| -webkit-linear-gradient(135deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%); | ||
| background-image: linear-gradient(45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%), | ||
| linear-gradient(-45deg, transparent 46%, currentcolor 47%, currentcolor 49%, transparent 51%); | ||
| background-size: .36em 100%, .36em 100%; | ||
| background-repeat: no-repeat; | ||
| background-position-x: calc(100% - 1.35em), calc(100% - 1em); | ||
| background-position-y: 0; | ||
| padding-right: 2.5em; | ||
| vertical-align: top; | ||
| } | ||
| } | ||
| nrk-switch() { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| vertical-align: middle; | ||
| background: transparent; | ||
| margin: 0; | ||
| border: 0; | ||
| outline: 0; | ||
| background: -webkit-radial-gradient(25%, circle, transparent 25%, currentColor 27.5%, currentColor); | ||
| background: radial-gradient(circle at 25%, transparent 25%, currentColor 27.5%, currentColor); | ||
| border-radius: 50px; | ||
| cursor: pointer; | ||
| color: inherit; | ||
| font: inherit; | ||
| width: 3em; | ||
| height: 1.5em; | ||
| opacity: .5; | ||
| -webkit-transition: .2s; | ||
| transition: .2s; | ||
| &::-ms-check { | ||
| display: none; | ||
| } | ||
| &:disabled { | ||
| opacity: .2; | ||
| cursor: not-allowed!important; | ||
| } | ||
| &:focus { | ||
| box-shadow: 0 0 2px 1px #00b9f2; | ||
| } | ||
| &:active:hover { | ||
| background-position-x: .3em; | ||
| } | ||
| &:checked { | ||
| opacity: 1; | ||
| background-position-x: 1.5em; | ||
| } | ||
| &:checked:active:hover { | ||
| background-position-x: 1.2em; | ||
| } | ||
| } | ||
| nrk-pagination() { | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-align: center; | ||
| font-size: 0; | ||
| &::before { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 50%; | ||
| border-top: 1px solid; | ||
| opacity: .22; | ||
| } | ||
| &::after { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 50%; | ||
| border-top: 1px solid; | ||
| opacity: .22; | ||
| } | ||
| &::before { | ||
| margin-left: -50%; | ||
| } | ||
| &::after { | ||
| margin-right: -50%; | ||
| } | ||
| & > .nrk-button:only-child { | ||
| min-width: 200px; | ||
| } | ||
| & > .nrk-button:not(:last-child) { | ||
| border-top-right-radius: 0; | ||
| border-bottom-right-radius: 0; | ||
| margin-right: 0; | ||
| } | ||
| & > .nrk-button:not(:last-child)::after { | ||
| right: 0; | ||
| } | ||
| & > .nrk-button + .nrk-button { | ||
| border-top-left-radius: 0; | ||
| border-bottom-left-radius: 0; | ||
| border-left-style: none; | ||
| margin-left: 0; | ||
| } | ||
| } | ||
| nrk-xs-100() { | ||
| width: 100vw; | ||
| margin-left: calc(50% - 50vw); | ||
| } | ||
| nrk-xs-1of12() { | ||
| width: 8.33333%; | ||
| } | ||
| nrk-xs-2of12() { | ||
| width: 16.6666%; | ||
| } | ||
| nrk-xs-3of12() { | ||
| width: 25%; | ||
| } | ||
| nrk-xs-4of12() { | ||
| width: 33.3333%; | ||
| } | ||
| nrk-xs-5of12() { | ||
| width: 41.6666%; | ||
| } | ||
| nrk-xs-6of12() { | ||
| width: 50%; | ||
| } | ||
| nrk-xs-7of12() { | ||
| width: 58.3333%; | ||
| } | ||
| nrk-xs-8of12() { | ||
| width: 66.6666%; | ||
| } | ||
| nrk-xs-9of12() { | ||
| width: 75%; | ||
| } | ||
| nrk-xs-10of12() { | ||
| width: 83.3333%; | ||
| } | ||
| nrk-xs-11of12() { | ||
| width: 91.6666%; | ||
| } | ||
| nrk-xs-12of12() { | ||
| width: 100%; | ||
| } | ||
| nrk-sm-1of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| nrk-sm-2of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| nrk-sm-3of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| nrk-sm-4of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| nrk-sm-5of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| nrk-sm-6of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| nrk-sm-7of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| nrk-sm-8of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| nrk-sm-9of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| nrk-sm-10of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| nrk-sm-11of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| nrk-sm-12of12() { | ||
| @media (min-width: 40rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| nrk-md-1of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| nrk-md-2of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| nrk-md-3of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| nrk-md-4of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| nrk-md-5of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| nrk-md-6of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| nrk-md-7of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| nrk-md-8of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| nrk-md-9of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| nrk-md-10of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| nrk-md-11of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| nrk-md-12of12() { | ||
| @media (min-width: 45rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| nrk-lg-1of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| nrk-lg-2of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| nrk-lg-3of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| nrk-lg-4of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| nrk-lg-5of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| nrk-lg-6of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| nrk-lg-7of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| nrk-lg-8of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| nrk-lg-9of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| nrk-lg-10of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| nrk-lg-11of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| nrk-lg-12of12() { | ||
| @media (min-width: 62rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| nrk-xl-1of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 8.33333%; | ||
| } | ||
| } | ||
| nrk-xl-2of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 16.6666%; | ||
| } | ||
| } | ||
| nrk-xl-3of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 25%; | ||
| } | ||
| } | ||
| nrk-xl-4of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 33.3333%; | ||
| } | ||
| } | ||
| nrk-xl-5of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 41.6666%; | ||
| } | ||
| } | ||
| nrk-xl-6of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 50%; | ||
| } | ||
| } | ||
| nrk-xl-7of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 58.3333%; | ||
| } | ||
| } | ||
| nrk-xl-8of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 66.6666%; | ||
| } | ||
| } | ||
| nrk-xl-9of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 75%; | ||
| } | ||
| } | ||
| nrk-xl-10of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 83.3333%; | ||
| } | ||
| } | ||
| nrk-xl-11of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 91.6666%; | ||
| } | ||
| } | ||
| nrk-xl-12of12() { | ||
| @media (min-width: 90rem) { | ||
| width: 100%; | ||
| } | ||
| } | ||
| nrk-aspect() { | ||
| position: relative; | ||
| & > * { | ||
| box-sizing: border-box; | ||
| position: absolute; | ||
| margin: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| &::after { | ||
| content: ''; | ||
| display: block; | ||
| padding-top: 56.25%; | ||
| } | ||
| } | ||
| nrk-aspect--9x16() { | ||
| &::after { | ||
| padding-top: 177.78%; | ||
| } | ||
| } | ||
| nrk-aspect--4x3() { | ||
| &::after { | ||
| padding-top: 75%; | ||
| } | ||
| } | ||
| nrk-aspect--1x1() { | ||
| &::after { | ||
| padding-top: 100%; | ||
| } | ||
| } | ||
| nrk-color-base() { | ||
| color: #26292a; | ||
| background-color: #fff; | ||
| } | ||
| nrk-color-spot() { | ||
| color: #26292a; | ||
| background-color: #00b9f2; | ||
| } | ||
| nrk-color-invert() { | ||
| color: #fff; | ||
| background-color: #141517; | ||
| } | ||
| nrk-color-shade-1() { | ||
| color: #26292a; | ||
| background-color: #f3f3f3; | ||
| } | ||
| nrk-color-shade-2() { | ||
| color: #26292a; | ||
| background-color: #e9e9e9; | ||
| } | ||
| nrk-color-shade-3() { | ||
| color: #26292a; | ||
| background-color: #e0e0e0; | ||
| } | ||
| nrk-color-shade-4() { | ||
| color: #26292a; | ||
| background-color: #c8c8c8; | ||
| } | ||
| nrk-fade() { | ||
| opacity: .4; | ||
| } | ||
| nrk-sr() { | ||
| position: absolute!important; | ||
| overflow: hidden!important; | ||
| width: 1px!important; | ||
| height: 1px!important; | ||
| clip: rect(0, 0, 0, 0)!important; | ||
| } | ||
| nrk-sr-focus() { | ||
| &:not(:focus) { | ||
| position: absolute!important; | ||
| overflow: hidden!important; | ||
| width: 1px!important; | ||
| height: 1px!important; | ||
| clip: rect(0, 0, 0, 0)!important; | ||
| } | ||
| } |
+1
-1
@@ -1,2 +0,2 @@ | ||
| /*! @nrk/core-css v1.12.4 - Copyright (c) 2018-2019 NRK */html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}[contenteditable],input,textarea{-webkit-font-feature-settings:"liga" 0;font-feature-settings:"liga" 0;text-rendering:optimizeSpeed}svg>use>svg{fill:inherit}a,body,iframe,img,svg{margin:0;border:0;color:inherit;fill:currentColor}a,button{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}.nrk-truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nrk-unset{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0 solid;border-radius:0;border-spacing:0;border-collapse:collapse;box-sizing:border-box;color:inherit;font:inherit;height:auto;list-style:none;margin:0;max-height:none;max-width:none;min-height:auto;min-width:auto;padding:0;text-align:inherit;text-decoration:none;width:auto}.nrk-unset::-ms-expand{display:none}.nrk-grid>*{box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;vertical-align:top;font-size:1rem}.nrk-grid{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:0}.nrk-grid,.nrk-grid--equalize>*{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.nrk-grid--equalize>*>*{width:100%}.nrk-grid--nowrap>*{white-space:normal}.nrk-grid--nowrap{white-space:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.nrk-button::-moz-focus-inner{border:0;padding:0}.nrk-button{-webkit-appearance:none;box-sizing:border-box;display:inline-block;vertical-align:middle;white-space:nowrap;position:relative;margin:3px 1px;padding:0 19px;border:0 solid;border-radius:99px;height:41px;min-width:41px;font:inherit;font-size:14px;line-height:41px;text-align:center;text-decoration:none;background:transparent;color:inherit;-webkit-transition:box-shadow .2s,-webkit-transform .2s;transition:box-shadow .2s,-webkit-transform .2s;transition:transform .2s,box-shadow .2s;transition:transform .2s,box-shadow .2s,-webkit-transform .2s}.nrk-button:after{content:"";position:absolute;top:0;right:0;right:.5px;bottom:0;left:0;opacity:.4;border:inherit;border-radius:inherit;border-width:1px;-webkit-transition:border .2s;transition:border .2s;-webkit-backface-visibility:hidden}.nrk-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.nrk-button:focus,.nrk-button:hover{outline:0;border-color:transparent;box-shadow:0 0 2px 1px #00b9f2}.nrk-button.is-disabled,.nrk-button:disabled{cursor:default;pointer-events:none;box-shadow:none;opacity:.6}.nrk-button.is-busy:before{content:"";display:inline-block;vertical-align:middle;width:14px;height:14px;border:1px solid;border-top:1px solid transparent;border-radius:50%;margin-right:5px;-webkit-animation:nrk-spin 1s linear infinite;animation:nrk-spin 1s linear infinite}.nrk-button svg{vertical-align:middle}.nrk-button--o{width:41px;height:41px;padding:10px}.nrk-button--o svg{display:block;width:100%;height:100%}.nrk-spin{-webkit-animation:nrk-spin 1s linear infinite;animation:nrk-spin 1s linear infinite}@-webkit-keyframes nrk-spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes nrk-spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.nrk-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;position:relative;vertical-align:middle;background:#fff no-repeat;margin:0;border:0;max-width:100%;outline:0;color:#141517;font-family:inherit;font-size:inherit;line-height:1.5;box-shadow:0 0 0 1px rgba(0,0,0,.15);border-radius:4px;padding:.5em .7em;-webkit-transition:box-shadow .2s;transition:box-shadow .2s}.nrk-input:focus{box-shadow:0 0 2px 1px #00b9f2}.nrk-input:disabled{opacity:.5;cursor:not-allowed!important}.nrk-input[readonly]{opacity:.8;cursor:default!important}.nrk-input::-ms-check,.nrk-input::-ms-clear,.nrk-input::-ms-expand,.nrk-input::-ms-reveal{display:none}.nrk-input[type=file]{cursor:pointer}.nrk-input::-ms-value{background:none;color:inherit;font:inherit;padding:0;margin:0;border:0}.nrk-input[type=number]{-moz-appearance:textfield}.nrk-input::-webkit-inner-spin-button,.nrk-input::-webkit-outer-spin-button{-webkit-appearance:none}.nrk-input[type=radio]{border-radius:100%}.nrk-input[type=checkbox],.nrk-input[type=radio]{width:1.3em;height:1.3em;vertical-align:middle;cursor:pointer;padding:0}.nrk-input[type=radio]:checked{background-image:-webkit-radial-gradient(at center center,transparent 25%,currentcolor 28%);background-image:radial-gradient(at center center,transparent 25%,currentcolor 28%)}.nrk-input[type=checkbox]:checked{background-position-x:10%,240%,5%,100%,100%,100%,100%;background-position-y:40%,70%,10%,center,center,center,center;background-image:-webkit-linear-gradient(45deg,transparent 58%,currentColor 59%),-webkit-linear-gradient(315deg,currentColor 33%,transparent 34%),-webkit-linear-gradient(45deg,transparent 58%,currentcolor 59%),-webkit-linear-gradient(225deg,currentColor 23%,transparent 0),-webkit-linear-gradient(315deg,currentColor 33%,transparent 0),-webkit-linear-gradient(45deg,currentcolor 28%,transparent 0),-webkit-linear-gradient(135deg,currentcolor 42%,transparent 0);background-image:linear-gradient(45deg,transparent 58%,currentColor 59%),linear-gradient(135deg,currentColor 33%,transparent 34%),linear-gradient(45deg,transparent 58%,currentcolor 59%),linear-gradient(-135deg,currentColor 23%,transparent 0),linear-gradient(135deg,currentColor 33%,transparent 0),linear-gradient(45deg,currentcolor 28%,transparent 0),linear-gradient(-45deg,currentcolor 42%,transparent 0);background-size:35.5% 118%,85% 99%,33.7% 118%,100% auto,100% auto,100% auto,100% auto}textarea.nrk-input{overflow:auto;resize:vertical;vertical-align:top;line-height:inherit}select.nrk-input[multiple]{vertical-align:top}select.nrk-input:not([multiple]){background-image:-webkit-linear-gradient(45deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%),-webkit-linear-gradient(135deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%);background-image:linear-gradient(45deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%),linear-gradient(-45deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%);background-size:.36em 100%,.36em 100%;background-repeat:no-repeat;background-position-x:calc(100% - 1.35em),calc(100% - 1em);background-position-y:0;padding-right:2.5em;vertical-align:top}.nrk-switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;background:transparent;margin:0;border:0;outline:0;background:-webkit-radial-gradient(25%,circle,transparent 25%,currentColor 27.5%,currentColor);background:radial-gradient(circle at 25%,transparent 25%,currentColor 27.5%,currentColor);border-radius:50px;cursor:pointer;color:inherit;font:inherit;width:3em;height:1.5em;opacity:.5;-webkit-transition:.2s;transition:.2s}.nrk-switch::-ms-check{display:none}.nrk-switch:disabled{opacity:.2;cursor:not-allowed!important}.nrk-switch:focus{box-shadow:0 0 2px 1px #00b9f2}.nrk-switch:active:hover{background-position-x:.3em}.nrk-switch:checked{opacity:1;background-position-x:1.5em}.nrk-switch:checked:active:hover{background-position-x:1.2em}.nrk-pagination{overflow:hidden;white-space:nowrap;text-align:center;font-size:0}.nrk-pagination:after,.nrk-pagination:before{content:"";display:inline-block;width:50%;border-top:1px solid;opacity:.22}.nrk-pagination:before{margin-left:-50%}.nrk-pagination:after{margin-right:-50%}.nrk-pagination>.nrk-button:only-child{min-width:200px}.nrk-pagination>.nrk-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}.nrk-pagination>.nrk-button:not(:last-child):after{right:0}.nrk-pagination>.nrk-button+.nrk-button{border-top-left-radius:0;border-bottom-left-radius:0;border-left-style:none;margin-left:0}.nrk-xs-100{width:100vw;margin-left:calc(50% - 50vw)}.nrk-xs-1of12{width:8.33333%}.nrk-xs-2of12{width:16.6666%}.nrk-xs-3of12{width:25%}.nrk-xs-4of12{width:33.3333%}.nrk-xs-5of12{width:41.6666%}.nrk-xs-6of12{width:50%}.nrk-xs-7of12{width:58.3333%}.nrk-xs-8of12{width:66.6666%}.nrk-xs-9of12{width:75%}.nrk-xs-10of12{width:83.3333%}.nrk-xs-11of12{width:91.6666%}.nrk-xs-12of12{width:100%}@media (min-width:40rem){.nrk-sm-1of12{width:8.33333%}.nrk-sm-2of12{width:16.6666%}.nrk-sm-3of12{width:25%}.nrk-sm-4of12{width:33.3333%}.nrk-sm-5of12{width:41.6666%}.nrk-sm-6of12{width:50%}.nrk-sm-7of12{width:58.3333%}.nrk-sm-8of12{width:66.6666%}.nrk-sm-9of12{width:75%}.nrk-sm-10of12{width:83.3333%}.nrk-sm-11of12{width:91.6666%}.nrk-sm-12of12{width:100%}}@media (min-width:45rem){.nrk-md-1of12{width:8.33333%}.nrk-md-2of12{width:16.6666%}.nrk-md-3of12{width:25%}.nrk-md-4of12{width:33.3333%}.nrk-md-5of12{width:41.6666%}.nrk-md-6of12{width:50%}.nrk-md-7of12{width:58.3333%}.nrk-md-8of12{width:66.6666%}.nrk-md-9of12{width:75%}.nrk-md-10of12{width:83.3333%}.nrk-md-11of12{width:91.6666%}.nrk-md-12of12{width:100%}}@media (min-width:62rem){.nrk-lg-1of12{width:8.33333%}.nrk-lg-2of12{width:16.6666%}.nrk-lg-3of12{width:25%}.nrk-lg-4of12{width:33.3333%}.nrk-lg-5of12{width:41.6666%}.nrk-lg-6of12{width:50%}.nrk-lg-7of12{width:58.3333%}.nrk-lg-8of12{width:66.6666%}.nrk-lg-9of12{width:75%}.nrk-lg-10of12{width:83.3333%}.nrk-lg-11of12{width:91.6666%}.nrk-lg-12of12{width:100%}}@media (min-width:90rem){.nrk-xl-1of12{width:8.33333%}.nrk-xl-2of12{width:16.6666%}.nrk-xl-3of12{width:25%}.nrk-xl-4of12{width:33.3333%}.nrk-xl-5of12{width:41.6666%}.nrk-xl-6of12{width:50%}.nrk-xl-7of12{width:58.3333%}.nrk-xl-8of12{width:66.6666%}.nrk-xl-9of12{width:75%}.nrk-xl-10of12{width:83.3333%}.nrk-xl-11of12{width:91.6666%}.nrk-xl-12of12{width:100%}}.nrk-aspect{position:relative}.nrk-aspect>*{box-sizing:border-box;position:absolute;margin:0;width:100%;height:100%}.nrk-aspect:after{content:"";display:block;padding-top:56.25%}.nrk-aspect--9x16:after{padding-top:177.78%}.nrk-aspect--4x3:after{padding-top:75%}.nrk-aspect--1x1:after{padding-top:100%}.nrk-color-base{color:#26292a;background-color:#fff}.nrk-color-spot{color:#26292a;background-color:#00b9f2}.nrk-color-invert{color:#fff;background-color:#141517}.nrk-color-shade-1{color:#26292a;background-color:#f3f3f3}.nrk-color-shade-2{color:#26292a;background-color:#e9e9e9}.nrk-color-shade-3{color:#26292a;background-color:#e0e0e0}.nrk-color-shade-4{color:#26292a;background-color:#c8c8c8}.nrk-fade{opacity:.4}.nrk-sr,.nrk-sr-focus:not(:focus){position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;clip:rect(0,0,0,0)!important} | ||
| /*! @nrk/core-css v1.13.0 - Copyright (c) 2018-2019 NRK */html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}[contenteditable],input,textarea{-webkit-font-feature-settings:"liga" 0;font-feature-settings:"liga" 0;text-rendering:optimizeSpeed}svg,svg>use>svg{fill:inherit}a,body,iframe,img,svg{margin:0;border:0;color:inherit}a,button{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}.nrk-truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nrk-unset{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0 solid;border-radius:0;border-spacing:0;border-collapse:collapse;box-sizing:border-box;color:inherit;font:inherit;height:auto;list-style:none;margin:0;max-height:none;max-width:none;min-height:auto;min-width:auto;padding:0;text-align:inherit;text-transform:inherit;text-decoration:inherit;width:auto}.nrk-unset::-ms-expand{display:none}.nrk-grid>*{box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;vertical-align:top;font-size:1rem}.nrk-grid{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:0}.nrk-grid,.nrk-grid--equalize>*{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.nrk-grid--equalize>*>*{width:100%}.nrk-grid--nowrap>*{white-space:normal}.nrk-grid--nowrap{white-space:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.nrk-button::-moz-focus-inner{border:0;padding:0}.nrk-button{-webkit-appearance:none;box-sizing:border-box;display:inline-block;vertical-align:middle;white-space:nowrap;position:relative;margin:3px 1px;padding:0 19px;border:0 solid;border-radius:99px;height:41px;min-width:41px;font:inherit;font-size:14px;line-height:41px;text-align:center;text-decoration:none;background:transparent;color:inherit;-webkit-transition:box-shadow .2s,-webkit-transform .2s;transition:box-shadow .2s,-webkit-transform .2s;transition:transform .2s,box-shadow .2s;transition:transform .2s,box-shadow .2s,-webkit-transform .2s}.nrk-button:after{content:"";position:absolute;top:0;right:0;right:.5px;bottom:0;left:0;opacity:.4;border:inherit;border-radius:inherit;border-width:1px;-webkit-transition:border .2s;transition:border .2s;-webkit-backface-visibility:hidden}.nrk-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.nrk-button:focus,.nrk-button:hover{outline:0;border-color:transparent;box-shadow:0 0 2px 1px #00b9f2}.nrk-button.is-disabled,.nrk-button:disabled{cursor:default;pointer-events:none;box-shadow:none;opacity:.6}.nrk-button.is-busy:before{content:"";display:inline-block;vertical-align:middle;width:14px;height:14px;border:1px solid;border-top:1px solid transparent;border-radius:50%;margin-right:5px;-webkit-animation:nrk-spin 1s linear infinite;animation:nrk-spin 1s linear infinite}.nrk-button svg{vertical-align:middle}.nrk-button--o{width:41px;height:41px;padding:10px}.nrk-button--o svg{display:block;width:100%;height:100%}.nrk-spin{-webkit-animation:nrk-spin 1s linear infinite;animation:nrk-spin 1s linear infinite}@-webkit-keyframes nrk-spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes nrk-spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.nrk-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;position:relative;vertical-align:middle;background:#fff no-repeat;margin:0;border:0;max-width:100%;outline:0;color:#141517;font-family:inherit;font-size:inherit;line-height:1.5;box-shadow:0 0 0 1px rgba(0,0,0,.15);border-radius:4px;padding:.5em .7em;-webkit-transition:box-shadow .2s;transition:box-shadow .2s}.nrk-input:focus{box-shadow:0 0 2px 1px #00b9f2}.nrk-input:disabled{opacity:.5;cursor:not-allowed!important}.nrk-input[readonly]{opacity:.8;cursor:default!important}.nrk-input::-ms-check,.nrk-input::-ms-clear,.nrk-input::-ms-expand,.nrk-input::-ms-reveal{display:none}.nrk-input[type=file]{cursor:pointer}.nrk-input::-ms-value{background:none;color:inherit;font:inherit;padding:0;margin:0;border:0}.nrk-input[type=number]{-moz-appearance:textfield}.nrk-input::-webkit-inner-spin-button,.nrk-input::-webkit-outer-spin-button{-webkit-appearance:none}.nrk-input[type=radio]{border-radius:100%}.nrk-input[type=checkbox],.nrk-input[type=radio]{width:1.3em;height:1.3em;vertical-align:middle;cursor:pointer;padding:0}.nrk-input[type=radio]:checked{background-image:-webkit-radial-gradient(at center center,transparent 25%,currentcolor 28%);background-image:radial-gradient(at center center,transparent 25%,currentcolor 28%)}.nrk-input[type=checkbox]:checked{background-position-x:10%,240%,5%,100%,100%,100%,100%;background-position-y:40%,70%,10%,center,center,center,center;background-image:-webkit-linear-gradient(45deg,transparent 58%,currentColor 59%),-webkit-linear-gradient(315deg,currentColor 33%,transparent 34%),-webkit-linear-gradient(45deg,transparent 58%,currentcolor 59%),-webkit-linear-gradient(225deg,currentColor 23%,transparent 0),-webkit-linear-gradient(315deg,currentColor 33%,transparent 0),-webkit-linear-gradient(45deg,currentcolor 28%,transparent 0),-webkit-linear-gradient(135deg,currentcolor 42%,transparent 0);background-image:linear-gradient(45deg,transparent 58%,currentColor 59%),linear-gradient(135deg,currentColor 33%,transparent 34%),linear-gradient(45deg,transparent 58%,currentcolor 59%),linear-gradient(-135deg,currentColor 23%,transparent 0),linear-gradient(135deg,currentColor 33%,transparent 0),linear-gradient(45deg,currentcolor 28%,transparent 0),linear-gradient(-45deg,currentcolor 42%,transparent 0);background-size:35.5% 118%,85% 99%,33.7% 118%,100% auto,100% auto,100% auto,100% auto}textarea.nrk-input{overflow:auto;resize:vertical;vertical-align:top;line-height:inherit}select.nrk-input[multiple]{vertical-align:top}select.nrk-input:not([multiple]){background-image:-webkit-linear-gradient(45deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%),-webkit-linear-gradient(135deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%);background-image:linear-gradient(45deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%),linear-gradient(-45deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%);background-size:.36em 100%,.36em 100%;background-repeat:no-repeat;background-position-x:calc(100% - 1.35em),calc(100% - 1em);background-position-y:0;padding-right:2.5em;vertical-align:top}.nrk-switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;background:transparent;margin:0;border:0;outline:0;background:-webkit-radial-gradient(25%,circle,transparent 25%,currentColor 27.5%,currentColor);background:radial-gradient(circle at 25%,transparent 25%,currentColor 27.5%,currentColor);border-radius:50px;cursor:pointer;color:inherit;font:inherit;width:3em;height:1.5em;opacity:.5;-webkit-transition:.2s;transition:.2s}.nrk-switch::-ms-check{display:none}.nrk-switch:disabled{opacity:.2;cursor:not-allowed!important}.nrk-switch:focus{box-shadow:0 0 2px 1px #00b9f2}.nrk-switch:active:hover{background-position-x:.3em}.nrk-switch:checked{opacity:1;background-position-x:1.5em}.nrk-switch:checked:active:hover{background-position-x:1.2em}.nrk-pagination{overflow:hidden;white-space:nowrap;text-align:center;font-size:0}.nrk-pagination:after,.nrk-pagination:before{content:"";display:inline-block;width:50%;border-top:1px solid;opacity:.22}.nrk-pagination:before{margin-left:-50%}.nrk-pagination:after{margin-right:-50%}.nrk-pagination>.nrk-button:only-child{min-width:200px}.nrk-pagination>.nrk-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}.nrk-pagination>.nrk-button:not(:last-child):after{right:0}.nrk-pagination>.nrk-button+.nrk-button{border-top-left-radius:0;border-bottom-left-radius:0;border-left-style:none;margin-left:0}.nrk-xs-100{width:100vw;margin-left:calc(50% - 50vw)}.nrk-xs-1of12{width:8.33333%}.nrk-xs-2of12{width:16.6666%}.nrk-xs-3of12{width:25%}.nrk-xs-4of12{width:33.3333%}.nrk-xs-5of12{width:41.6666%}.nrk-xs-6of12{width:50%}.nrk-xs-7of12{width:58.3333%}.nrk-xs-8of12{width:66.6666%}.nrk-xs-9of12{width:75%}.nrk-xs-10of12{width:83.3333%}.nrk-xs-11of12{width:91.6666%}.nrk-xs-12of12{width:100%}@media (min-width:40rem){.nrk-sm-1of12{width:8.33333%}.nrk-sm-2of12{width:16.6666%}.nrk-sm-3of12{width:25%}.nrk-sm-4of12{width:33.3333%}.nrk-sm-5of12{width:41.6666%}.nrk-sm-6of12{width:50%}.nrk-sm-7of12{width:58.3333%}.nrk-sm-8of12{width:66.6666%}.nrk-sm-9of12{width:75%}.nrk-sm-10of12{width:83.3333%}.nrk-sm-11of12{width:91.6666%}.nrk-sm-12of12{width:100%}}@media (min-width:45rem){.nrk-md-1of12{width:8.33333%}.nrk-md-2of12{width:16.6666%}.nrk-md-3of12{width:25%}.nrk-md-4of12{width:33.3333%}.nrk-md-5of12{width:41.6666%}.nrk-md-6of12{width:50%}.nrk-md-7of12{width:58.3333%}.nrk-md-8of12{width:66.6666%}.nrk-md-9of12{width:75%}.nrk-md-10of12{width:83.3333%}.nrk-md-11of12{width:91.6666%}.nrk-md-12of12{width:100%}}@media (min-width:62rem){.nrk-lg-1of12{width:8.33333%}.nrk-lg-2of12{width:16.6666%}.nrk-lg-3of12{width:25%}.nrk-lg-4of12{width:33.3333%}.nrk-lg-5of12{width:41.6666%}.nrk-lg-6of12{width:50%}.nrk-lg-7of12{width:58.3333%}.nrk-lg-8of12{width:66.6666%}.nrk-lg-9of12{width:75%}.nrk-lg-10of12{width:83.3333%}.nrk-lg-11of12{width:91.6666%}.nrk-lg-12of12{width:100%}}@media (min-width:90rem){.nrk-xl-1of12{width:8.33333%}.nrk-xl-2of12{width:16.6666%}.nrk-xl-3of12{width:25%}.nrk-xl-4of12{width:33.3333%}.nrk-xl-5of12{width:41.6666%}.nrk-xl-6of12{width:50%}.nrk-xl-7of12{width:58.3333%}.nrk-xl-8of12{width:66.6666%}.nrk-xl-9of12{width:75%}.nrk-xl-10of12{width:83.3333%}.nrk-xl-11of12{width:91.6666%}.nrk-xl-12of12{width:100%}}.nrk-aspect{position:relative}.nrk-aspect>*{box-sizing:border-box;position:absolute;margin:0;width:100%;height:100%}.nrk-aspect:after{content:"";display:block;padding-top:56.25%}.nrk-aspect--9x16:after{padding-top:177.78%}.nrk-aspect--4x3:after{padding-top:75%}.nrk-aspect--1x1:after{padding-top:100%}.nrk-color-base{color:#26292a;background-color:#fff}.nrk-color-spot{color:#26292a;background-color:#00b9f2}.nrk-color-invert{color:#fff;background-color:#141517}.nrk-color-shade-1{color:#26292a;background-color:#f3f3f3}.nrk-color-shade-2{color:#26292a;background-color:#e9e9e9}.nrk-color-shade-3{color:#26292a;background-color:#e0e0e0}.nrk-color-shade-4{color:#26292a;background-color:#c8c8c8}.nrk-fade{opacity:.4}.nrk-sr,.nrk-sr-focus:not(:focus){position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;clip:rect(0,0,0,0)!important} | ||
| /*# sourceMappingURL=core-css.min.css.map */ |
+5
-6
@@ -23,2 +23,5 @@ html { | ||
| } | ||
| svg { | ||
| fill: inherit; | ||
| } | ||
| svg > use > svg { | ||
@@ -31,3 +34,2 @@ fill: inherit; | ||
| color: inherit; | ||
| fill: currentColor; | ||
| } | ||
@@ -38,3 +40,2 @@ img { | ||
| color: inherit; | ||
| fill: currentColor; | ||
| } | ||
@@ -45,3 +46,2 @@ svg { | ||
| color: inherit; | ||
| fill: currentColor; | ||
| } | ||
@@ -52,3 +52,2 @@ a { | ||
| color: inherit; | ||
| fill: currentColor; | ||
| } | ||
@@ -59,3 +58,2 @@ iframe { | ||
| color: inherit; | ||
| fill: currentColor; | ||
| } | ||
@@ -99,3 +97,4 @@ button { | ||
| text-align: inherit; | ||
| text-decoration: none; | ||
| text-transform: inherit; | ||
| text-decoration: inherit; | ||
| width: auto; | ||
@@ -102,0 +101,0 @@ &::-ms-expand { |
+1
-1
@@ -1,2 +0,2 @@ | ||
| /*! @nrk/core-css v1.12.4 - Copyright (c) 2018-2019 NRK */html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}[contenteditable],input,textarea{-webkit-font-feature-settings:"liga" 0;font-feature-settings:"liga" 0;text-rendering:optimizeSpeed}svg>use>svg{fill:inherit}a,body,iframe,img,svg{margin:0;border:0;color:inherit;fill:currentColor}a,button{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}.nrk-truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nrk-unset{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0 solid;border-radius:0;border-spacing:0;border-collapse:collapse;box-sizing:border-box;color:inherit;font:inherit;height:auto;list-style:none;margin:0;max-height:none;max-width:none;min-height:auto;min-width:auto;padding:0;text-align:inherit;text-decoration:none;width:auto}.nrk-unset::-ms-expand{display:none}.nrk-grid>*{box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;vertical-align:top;font-size:1rem}.nrk-grid{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:0}.nrk-grid,.nrk-grid--equalize>*{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.nrk-grid--equalize>*>*{width:100%}.nrk-grid--nowrap>*{white-space:normal}.nrk-grid--nowrap{white-space:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.nrk-button::-moz-focus-inner{border:0;padding:0}.nrk-button{-webkit-appearance:none;box-sizing:border-box;display:inline-block;vertical-align:middle;white-space:nowrap;position:relative;margin:3px 1px;padding:0 19px;border:0 solid;border-radius:99px;height:41px;min-width:41px;font:inherit;font-size:14px;line-height:41px;text-align:center;text-decoration:none;background:transparent;color:inherit;-webkit-transition:box-shadow .2s,-webkit-transform .2s;transition:box-shadow .2s,-webkit-transform .2s;transition:transform .2s,box-shadow .2s;transition:transform .2s,box-shadow .2s,-webkit-transform .2s}.nrk-button:after{content:"";position:absolute;top:0;right:0;right:.5px;bottom:0;left:0;opacity:.4;border:inherit;border-radius:inherit;border-width:1px;-webkit-transition:border .2s;transition:border .2s;-webkit-backface-visibility:hidden}.nrk-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.nrk-button:focus,.nrk-button:hover{outline:0;border-color:transparent;box-shadow:0 0 2px 1px #00b9f2}.nrk-button.is-disabled,.nrk-button:disabled{cursor:default;pointer-events:none;box-shadow:none;opacity:.6}.nrk-button.is-busy:before{content:"";display:inline-block;vertical-align:middle;width:14px;height:14px;border:1px solid;border-top:1px solid transparent;border-radius:50%;margin-right:5px;-webkit-animation:nrk-spin 1s linear infinite;animation:nrk-spin 1s linear infinite}.nrk-button svg{vertical-align:middle}.nrk-button--o{width:41px;height:41px;padding:10px}.nrk-button--o svg{display:block;width:100%;height:100%}.nrk-spin{-webkit-animation:nrk-spin 1s linear infinite;animation:nrk-spin 1s linear infinite}@-webkit-keyframes nrk-spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes nrk-spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.nrk-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;position:relative;vertical-align:middle;background:#fff no-repeat;margin:0;border:0;max-width:100%;outline:0;color:#141517;font-family:inherit;font-size:inherit;line-height:1.5;box-shadow:0 0 0 1px rgba(0,0,0,.15);border-radius:4px;padding:.5em .7em;-webkit-transition:box-shadow .2s;transition:box-shadow .2s}.nrk-input:focus{box-shadow:0 0 2px 1px #00b9f2}.nrk-input:disabled{opacity:.5;cursor:not-allowed!important}.nrk-input[readonly]{opacity:.8;cursor:default!important}.nrk-input::-ms-check,.nrk-input::-ms-clear,.nrk-input::-ms-expand,.nrk-input::-ms-reveal{display:none}.nrk-input[type=file]{cursor:pointer}.nrk-input::-ms-value{background:none;color:inherit;font:inherit;padding:0;margin:0;border:0}.nrk-input[type=number]{-moz-appearance:textfield}.nrk-input::-webkit-inner-spin-button,.nrk-input::-webkit-outer-spin-button{-webkit-appearance:none}.nrk-input[type=radio]{border-radius:100%}.nrk-input[type=checkbox],.nrk-input[type=radio]{width:1.3em;height:1.3em;vertical-align:middle;cursor:pointer;padding:0}.nrk-input[type=radio]:checked{background-image:-webkit-radial-gradient(at center center,transparent 25%,currentcolor 28%);background-image:radial-gradient(at center center,transparent 25%,currentcolor 28%)}.nrk-input[type=checkbox]:checked{background-position-x:10%,240%,5%,100%,100%,100%,100%;background-position-y:40%,70%,10%,center,center,center,center;background-image:-webkit-linear-gradient(45deg,transparent 58%,currentColor 59%),-webkit-linear-gradient(315deg,currentColor 33%,transparent 34%),-webkit-linear-gradient(45deg,transparent 58%,currentcolor 59%),-webkit-linear-gradient(225deg,currentColor 23%,transparent 0),-webkit-linear-gradient(315deg,currentColor 33%,transparent 0),-webkit-linear-gradient(45deg,currentcolor 28%,transparent 0),-webkit-linear-gradient(135deg,currentcolor 42%,transparent 0);background-image:linear-gradient(45deg,transparent 58%,currentColor 59%),linear-gradient(135deg,currentColor 33%,transparent 34%),linear-gradient(45deg,transparent 58%,currentcolor 59%),linear-gradient(-135deg,currentColor 23%,transparent 0),linear-gradient(135deg,currentColor 33%,transparent 0),linear-gradient(45deg,currentcolor 28%,transparent 0),linear-gradient(-45deg,currentcolor 42%,transparent 0);background-size:35.5% 118%,85% 99%,33.7% 118%,100% auto,100% auto,100% auto,100% auto}textarea.nrk-input{overflow:auto;resize:vertical;vertical-align:top;line-height:inherit}select.nrk-input[multiple]{vertical-align:top}select.nrk-input:not([multiple]){background-image:-webkit-linear-gradient(45deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%),-webkit-linear-gradient(135deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%);background-image:linear-gradient(45deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%),linear-gradient(-45deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%);background-size:.36em 100%,.36em 100%;background-repeat:no-repeat;background-position-x:calc(100% - 1.35em),calc(100% - 1em);background-position-y:0;padding-right:2.5em;vertical-align:top}.nrk-switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;background:transparent;margin:0;border:0;outline:0;background:-webkit-radial-gradient(25%,circle,transparent 25%,currentColor 27.5%,currentColor);background:radial-gradient(circle at 25%,transparent 25%,currentColor 27.5%,currentColor);border-radius:50px;cursor:pointer;color:inherit;font:inherit;width:3em;height:1.5em;opacity:.5;-webkit-transition:.2s;transition:.2s}.nrk-switch::-ms-check{display:none}.nrk-switch:disabled{opacity:.2;cursor:not-allowed!important}.nrk-switch:focus{box-shadow:0 0 2px 1px #00b9f2}.nrk-switch:active:hover{background-position-x:.3em}.nrk-switch:checked{opacity:1;background-position-x:1.5em}.nrk-switch:checked:active:hover{background-position-x:1.2em}.nrk-pagination{overflow:hidden;white-space:nowrap;text-align:center;font-size:0}.nrk-pagination:after,.nrk-pagination:before{content:"";display:inline-block;width:50%;border-top:1px solid;opacity:.22}.nrk-pagination:before{margin-left:-50%}.nrk-pagination:after{margin-right:-50%}.nrk-pagination>.nrk-button:only-child{min-width:200px}.nrk-pagination>.nrk-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}.nrk-pagination>.nrk-button:not(:last-child):after{right:0}.nrk-pagination>.nrk-button+.nrk-button{border-top-left-radius:0;border-bottom-left-radius:0;border-left-style:none;margin-left:0}.nrk-xs-100{width:100vw;margin-left:calc(50% - 50vw)}.nrk-xs-1of12{width:8.33333%}.nrk-xs-2of12{width:16.6666%}.nrk-xs-3of12{width:25%}.nrk-xs-4of12{width:33.3333%}.nrk-xs-5of12{width:41.6666%}.nrk-xs-6of12{width:50%}.nrk-xs-7of12{width:58.3333%}.nrk-xs-8of12{width:66.6666%}.nrk-xs-9of12{width:75%}.nrk-xs-10of12{width:83.3333%}.nrk-xs-11of12{width:91.6666%}.nrk-xs-12of12{width:100%}@media (min-width:40rem){.nrk-sm-1of12{width:8.33333%}.nrk-sm-2of12{width:16.6666%}.nrk-sm-3of12{width:25%}.nrk-sm-4of12{width:33.3333%}.nrk-sm-5of12{width:41.6666%}.nrk-sm-6of12{width:50%}.nrk-sm-7of12{width:58.3333%}.nrk-sm-8of12{width:66.6666%}.nrk-sm-9of12{width:75%}.nrk-sm-10of12{width:83.3333%}.nrk-sm-11of12{width:91.6666%}.nrk-sm-12of12{width:100%}}@media (min-width:45rem){.nrk-md-1of12{width:8.33333%}.nrk-md-2of12{width:16.6666%}.nrk-md-3of12{width:25%}.nrk-md-4of12{width:33.3333%}.nrk-md-5of12{width:41.6666%}.nrk-md-6of12{width:50%}.nrk-md-7of12{width:58.3333%}.nrk-md-8of12{width:66.6666%}.nrk-md-9of12{width:75%}.nrk-md-10of12{width:83.3333%}.nrk-md-11of12{width:91.6666%}.nrk-md-12of12{width:100%}}@media (min-width:62rem){.nrk-lg-1of12{width:8.33333%}.nrk-lg-2of12{width:16.6666%}.nrk-lg-3of12{width:25%}.nrk-lg-4of12{width:33.3333%}.nrk-lg-5of12{width:41.6666%}.nrk-lg-6of12{width:50%}.nrk-lg-7of12{width:58.3333%}.nrk-lg-8of12{width:66.6666%}.nrk-lg-9of12{width:75%}.nrk-lg-10of12{width:83.3333%}.nrk-lg-11of12{width:91.6666%}.nrk-lg-12of12{width:100%}}@media (min-width:90rem){.nrk-xl-1of12{width:8.33333%}.nrk-xl-2of12{width:16.6666%}.nrk-xl-3of12{width:25%}.nrk-xl-4of12{width:33.3333%}.nrk-xl-5of12{width:41.6666%}.nrk-xl-6of12{width:50%}.nrk-xl-7of12{width:58.3333%}.nrk-xl-8of12{width:66.6666%}.nrk-xl-9of12{width:75%}.nrk-xl-10of12{width:83.3333%}.nrk-xl-11of12{width:91.6666%}.nrk-xl-12of12{width:100%}}.nrk-aspect{position:relative}.nrk-aspect>*{box-sizing:border-box;position:absolute;margin:0;width:100%;height:100%}.nrk-aspect:after{content:"";display:block;padding-top:56.25%}.nrk-aspect--9x16:after{padding-top:177.78%}.nrk-aspect--4x3:after{padding-top:75%}.nrk-aspect--1x1:after{padding-top:100%}.nrk-color-base{color:#26292a;background-color:#fff}.nrk-color-spot{color:#26292a;background-color:#00b9f2}.nrk-color-invert{color:#fff;background-color:#141517}.nrk-color-shade-1{color:#26292a;background-color:#f3f3f3}.nrk-color-shade-2{color:#26292a;background-color:#e9e9e9}.nrk-color-shade-3{color:#26292a;background-color:#e0e0e0}.nrk-color-shade-4{color:#26292a;background-color:#c8c8c8}.nrk-fade{opacity:.4}.nrk-sr,.nrk-sr-focus:not(:focus){position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;clip:rect(0,0,0,0)!important} | ||
| /*! @nrk/core-css v1.13.0 - Copyright (c) 2018-2019 NRK */html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}[contenteditable],input,textarea{-webkit-font-feature-settings:"liga" 0;font-feature-settings:"liga" 0;text-rendering:optimizeSpeed}svg,svg>use>svg{fill:inherit}a,body,iframe,img,svg{margin:0;border:0;color:inherit}a,button{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}.nrk-truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nrk-unset{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0 solid;border-radius:0;border-spacing:0;border-collapse:collapse;box-sizing:border-box;color:inherit;font:inherit;height:auto;list-style:none;margin:0;max-height:none;max-width:none;min-height:auto;min-width:auto;padding:0;text-align:inherit;text-transform:inherit;text-decoration:inherit;width:auto}.nrk-unset::-ms-expand{display:none}.nrk-grid>*{box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:inline-block;vertical-align:top;font-size:1rem}.nrk-grid{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:0}.nrk-grid,.nrk-grid--equalize>*{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.nrk-grid--equalize>*>*{width:100%}.nrk-grid--nowrap>*{white-space:normal}.nrk-grid--nowrap{white-space:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.nrk-button::-moz-focus-inner{border:0;padding:0}.nrk-button{-webkit-appearance:none;box-sizing:border-box;display:inline-block;vertical-align:middle;white-space:nowrap;position:relative;margin:3px 1px;padding:0 19px;border:0 solid;border-radius:99px;height:41px;min-width:41px;font:inherit;font-size:14px;line-height:41px;text-align:center;text-decoration:none;background:transparent;color:inherit;-webkit-transition:box-shadow .2s,-webkit-transform .2s;transition:box-shadow .2s,-webkit-transform .2s;transition:transform .2s,box-shadow .2s;transition:transform .2s,box-shadow .2s,-webkit-transform .2s}.nrk-button:after{content:"";position:absolute;top:0;right:0;right:.5px;bottom:0;left:0;opacity:.4;border:inherit;border-radius:inherit;border-width:1px;-webkit-transition:border .2s;transition:border .2s;-webkit-backface-visibility:hidden}.nrk-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.nrk-button:focus,.nrk-button:hover{outline:0;border-color:transparent;box-shadow:0 0 2px 1px #00b9f2}.nrk-button.is-disabled,.nrk-button:disabled{cursor:default;pointer-events:none;box-shadow:none;opacity:.6}.nrk-button.is-busy:before{content:"";display:inline-block;vertical-align:middle;width:14px;height:14px;border:1px solid;border-top:1px solid transparent;border-radius:50%;margin-right:5px;-webkit-animation:nrk-spin 1s linear infinite;animation:nrk-spin 1s linear infinite}.nrk-button svg{vertical-align:middle}.nrk-button--o{width:41px;height:41px;padding:10px}.nrk-button--o svg{display:block;width:100%;height:100%}.nrk-spin{-webkit-animation:nrk-spin 1s linear infinite;animation:nrk-spin 1s linear infinite}@-webkit-keyframes nrk-spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes nrk-spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.nrk-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;position:relative;vertical-align:middle;background:#fff no-repeat;margin:0;border:0;max-width:100%;outline:0;color:#141517;font-family:inherit;font-size:inherit;line-height:1.5;box-shadow:0 0 0 1px rgba(0,0,0,.15);border-radius:4px;padding:.5em .7em;-webkit-transition:box-shadow .2s;transition:box-shadow .2s}.nrk-input:focus{box-shadow:0 0 2px 1px #00b9f2}.nrk-input:disabled{opacity:.5;cursor:not-allowed!important}.nrk-input[readonly]{opacity:.8;cursor:default!important}.nrk-input::-ms-check,.nrk-input::-ms-clear,.nrk-input::-ms-expand,.nrk-input::-ms-reveal{display:none}.nrk-input[type=file]{cursor:pointer}.nrk-input::-ms-value{background:none;color:inherit;font:inherit;padding:0;margin:0;border:0}.nrk-input[type=number]{-moz-appearance:textfield}.nrk-input::-webkit-inner-spin-button,.nrk-input::-webkit-outer-spin-button{-webkit-appearance:none}.nrk-input[type=radio]{border-radius:100%}.nrk-input[type=checkbox],.nrk-input[type=radio]{width:1.3em;height:1.3em;vertical-align:middle;cursor:pointer;padding:0}.nrk-input[type=radio]:checked{background-image:-webkit-radial-gradient(at center center,transparent 25%,currentcolor 28%);background-image:radial-gradient(at center center,transparent 25%,currentcolor 28%)}.nrk-input[type=checkbox]:checked{background-position-x:10%,240%,5%,100%,100%,100%,100%;background-position-y:40%,70%,10%,center,center,center,center;background-image:-webkit-linear-gradient(45deg,transparent 58%,currentColor 59%),-webkit-linear-gradient(315deg,currentColor 33%,transparent 34%),-webkit-linear-gradient(45deg,transparent 58%,currentcolor 59%),-webkit-linear-gradient(225deg,currentColor 23%,transparent 0),-webkit-linear-gradient(315deg,currentColor 33%,transparent 0),-webkit-linear-gradient(45deg,currentcolor 28%,transparent 0),-webkit-linear-gradient(135deg,currentcolor 42%,transparent 0);background-image:linear-gradient(45deg,transparent 58%,currentColor 59%),linear-gradient(135deg,currentColor 33%,transparent 34%),linear-gradient(45deg,transparent 58%,currentcolor 59%),linear-gradient(-135deg,currentColor 23%,transparent 0),linear-gradient(135deg,currentColor 33%,transparent 0),linear-gradient(45deg,currentcolor 28%,transparent 0),linear-gradient(-45deg,currentcolor 42%,transparent 0);background-size:35.5% 118%,85% 99%,33.7% 118%,100% auto,100% auto,100% auto,100% auto}textarea.nrk-input{overflow:auto;resize:vertical;vertical-align:top;line-height:inherit}select.nrk-input[multiple]{vertical-align:top}select.nrk-input:not([multiple]){background-image:-webkit-linear-gradient(45deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%),-webkit-linear-gradient(135deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%);background-image:linear-gradient(45deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%),linear-gradient(-45deg,transparent 46%,currentcolor 47%,currentcolor 49%,transparent 51%);background-size:.36em 100%,.36em 100%;background-repeat:no-repeat;background-position-x:calc(100% - 1.35em),calc(100% - 1em);background-position-y:0;padding-right:2.5em;vertical-align:top}.nrk-switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;background:transparent;margin:0;border:0;outline:0;background:-webkit-radial-gradient(25%,circle,transparent 25%,currentColor 27.5%,currentColor);background:radial-gradient(circle at 25%,transparent 25%,currentColor 27.5%,currentColor);border-radius:50px;cursor:pointer;color:inherit;font:inherit;width:3em;height:1.5em;opacity:.5;-webkit-transition:.2s;transition:.2s}.nrk-switch::-ms-check{display:none}.nrk-switch:disabled{opacity:.2;cursor:not-allowed!important}.nrk-switch:focus{box-shadow:0 0 2px 1px #00b9f2}.nrk-switch:active:hover{background-position-x:.3em}.nrk-switch:checked{opacity:1;background-position-x:1.5em}.nrk-switch:checked:active:hover{background-position-x:1.2em}.nrk-pagination{overflow:hidden;white-space:nowrap;text-align:center;font-size:0}.nrk-pagination:after,.nrk-pagination:before{content:"";display:inline-block;width:50%;border-top:1px solid;opacity:.22}.nrk-pagination:before{margin-left:-50%}.nrk-pagination:after{margin-right:-50%}.nrk-pagination>.nrk-button:only-child{min-width:200px}.nrk-pagination>.nrk-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}.nrk-pagination>.nrk-button:not(:last-child):after{right:0}.nrk-pagination>.nrk-button+.nrk-button{border-top-left-radius:0;border-bottom-left-radius:0;border-left-style:none;margin-left:0}.nrk-xs-100{width:100vw;margin-left:calc(50% - 50vw)}.nrk-xs-1of12{width:8.33333%}.nrk-xs-2of12{width:16.6666%}.nrk-xs-3of12{width:25%}.nrk-xs-4of12{width:33.3333%}.nrk-xs-5of12{width:41.6666%}.nrk-xs-6of12{width:50%}.nrk-xs-7of12{width:58.3333%}.nrk-xs-8of12{width:66.6666%}.nrk-xs-9of12{width:75%}.nrk-xs-10of12{width:83.3333%}.nrk-xs-11of12{width:91.6666%}.nrk-xs-12of12{width:100%}@media (min-width:40rem){.nrk-sm-1of12{width:8.33333%}.nrk-sm-2of12{width:16.6666%}.nrk-sm-3of12{width:25%}.nrk-sm-4of12{width:33.3333%}.nrk-sm-5of12{width:41.6666%}.nrk-sm-6of12{width:50%}.nrk-sm-7of12{width:58.3333%}.nrk-sm-8of12{width:66.6666%}.nrk-sm-9of12{width:75%}.nrk-sm-10of12{width:83.3333%}.nrk-sm-11of12{width:91.6666%}.nrk-sm-12of12{width:100%}}@media (min-width:45rem){.nrk-md-1of12{width:8.33333%}.nrk-md-2of12{width:16.6666%}.nrk-md-3of12{width:25%}.nrk-md-4of12{width:33.3333%}.nrk-md-5of12{width:41.6666%}.nrk-md-6of12{width:50%}.nrk-md-7of12{width:58.3333%}.nrk-md-8of12{width:66.6666%}.nrk-md-9of12{width:75%}.nrk-md-10of12{width:83.3333%}.nrk-md-11of12{width:91.6666%}.nrk-md-12of12{width:100%}}@media (min-width:62rem){.nrk-lg-1of12{width:8.33333%}.nrk-lg-2of12{width:16.6666%}.nrk-lg-3of12{width:25%}.nrk-lg-4of12{width:33.3333%}.nrk-lg-5of12{width:41.6666%}.nrk-lg-6of12{width:50%}.nrk-lg-7of12{width:58.3333%}.nrk-lg-8of12{width:66.6666%}.nrk-lg-9of12{width:75%}.nrk-lg-10of12{width:83.3333%}.nrk-lg-11of12{width:91.6666%}.nrk-lg-12of12{width:100%}}@media (min-width:90rem){.nrk-xl-1of12{width:8.33333%}.nrk-xl-2of12{width:16.6666%}.nrk-xl-3of12{width:25%}.nrk-xl-4of12{width:33.3333%}.nrk-xl-5of12{width:41.6666%}.nrk-xl-6of12{width:50%}.nrk-xl-7of12{width:58.3333%}.nrk-xl-8of12{width:66.6666%}.nrk-xl-9of12{width:75%}.nrk-xl-10of12{width:83.3333%}.nrk-xl-11of12{width:91.6666%}.nrk-xl-12of12{width:100%}}.nrk-aspect{position:relative}.nrk-aspect>*{box-sizing:border-box;position:absolute;margin:0;width:100%;height:100%}.nrk-aspect:after{content:"";display:block;padding-top:56.25%}.nrk-aspect--9x16:after{padding-top:177.78%}.nrk-aspect--4x3:after{padding-top:75%}.nrk-aspect--1x1:after{padding-top:100%}.nrk-color-base{color:#26292a;background-color:#fff}.nrk-color-spot{color:#26292a;background-color:#00b9f2}.nrk-color-invert{color:#fff;background-color:#141517}.nrk-color-shade-1{color:#26292a;background-color:#f3f3f3}.nrk-color-shade-2{color:#26292a;background-color:#e9e9e9}.nrk-color-shade-3{color:#26292a;background-color:#e0e0e0}.nrk-color-shade-4{color:#26292a;background-color:#c8c8c8}.nrk-fade{opacity:.4}.nrk-sr,.nrk-sr-focus:not(:focus){position:absolute!important;overflow:hidden!important;width:1px!important;height:1px!important;clip:rect(0,0,0,0)!important} | ||
| /*# sourceMappingURL=core-css.min.css.map */ |
+5
-6
@@ -23,2 +23,5 @@ html { | ||
| } | ||
| svg { | ||
| fill: inherit; | ||
| } | ||
| svg > use > svg { | ||
@@ -31,3 +34,2 @@ fill: inherit; | ||
| color: inherit; | ||
| fill: currentColor; | ||
| } | ||
@@ -38,3 +40,2 @@ img { | ||
| color: inherit; | ||
| fill: currentColor; | ||
| } | ||
@@ -45,3 +46,2 @@ svg { | ||
| color: inherit; | ||
| fill: currentColor; | ||
| } | ||
@@ -52,3 +52,2 @@ a { | ||
| color: inherit; | ||
| fill: currentColor; | ||
| } | ||
@@ -59,3 +58,2 @@ iframe { | ||
| color: inherit; | ||
| fill: currentColor; | ||
| } | ||
@@ -99,3 +97,4 @@ button { | ||
| text-align: inherit; | ||
| text-decoration: none; | ||
| text-transform: inherit; | ||
| text-decoration: inherit; | ||
| width: auto; | ||
@@ -102,0 +101,0 @@ &::-ms-expand { |
+5
-5
@@ -6,3 +6,3 @@ { | ||
| "author": "NRK <opensource@nrk.no> (https://www.nrk.no/)", | ||
| "version": "1.12.4", | ||
| "version": "1.13.0", | ||
| "license": "MIT", | ||
@@ -26,8 +26,8 @@ "scripts": { | ||
| "devDependencies": { | ||
| "autoprefixer": "9.4.6", | ||
| "autoprefixer": "9.5.0", | ||
| "postcss": "7.0.14", | ||
| "postcss-classes-to-mixins": "0.0.6", | ||
| "postcss-classes-to-mixins": "2.0.0", | ||
| "postcss-header": "1.0.0", | ||
| "rollup": "1.1.2", | ||
| "rollup-plugin-postcss": "2.0.1", | ||
| "rollup": "1.8.0", | ||
| "rollup-plugin-postcss": "2.0.3", | ||
| "rollup-plugin-serve": "1.0.1", | ||
@@ -34,0 +34,0 @@ "standard": "12.0.1" |
+25
-10
| # @nrk/core-css  | ||
| > Base styling and utilities for all NRK projects. | ||
| > Base styling and utilities for all NRK projects. | ||
| > `@nrk/core-css` exposes a set of class names and mixins to ease creating backwards compatible layouts and standard NRK styling. The code is built on BEM-conventions and is namespaced `nrk-` to play nice with existing projects. | ||
| For installation and usage, read the [documentation](https://static.nrk.no/core-css/latest/). | ||
| ## Documentation | ||
| https://static.nrk.no/core-css/latest/ | ||
| ## Adding fonts and icons | ||
| ## Installation | ||
| In order to use NRKs core fonts and icons, see these related projects: | ||
| https://github.com/nrkno/core-fonts (Only available for NRK employees) | ||
| https://github.com/nrkno/core-icons | ||
| ### Using NPM | ||
| Once the fonts (*LFT Etica* and *NRK Etica Slab*) have been imported, add this to your project’s CSS: | ||
| ```sh | ||
| npm install @nrk/core-css --save-exact | ||
| ``` | ||
| then import it into your stylesheet: | ||
| ```css | ||
| html { | ||
| font-family: 'LFT Etica', 'Helvetica Neue', Helvetica, Arial, sans-serif; | ||
| } | ||
| @import '@nrk/core-css/core-css.css'; // css | ||
| @import '@nrk/core-css/core-css.scss'; // sass | ||
| @import '@nrk/core-css/core-css.less'; // less | ||
| @import 'node_modules/@nrk/core-css/core-css.styl' // stylus | ||
| ``` | ||
| ### Using static | ||
| Recommended only for prototyping. | ||
| ```html | ||
| <link rel="stylesheet" href="https://static.nrk.no/core-css/major/1/core-css.min.css"> | ||
| ``` | ||
| ## Local development | ||
@@ -20,0 +35,0 @@ First clone `@nrk/core-css` and install dependencies: |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
202435
84.66%- Number of package files
18
50%- Lines of code
86
2.38%- Number of lines in readme file
58
34.88%No dependency changes