Wolfr

<template>
  <nav role="navigation" aria-label="Pagination">
    <ul class="c-pagination">
      <li class="c-pagination__element">
        <Button icon="arrow-left-s" layout="icon-only" :theme='internalPage === 1 ? "inactive" : "secondary"'
                @click="decreasePageNumber">Previous page
        </Button>
      </li>

      <li class="c-pagination__element" v-for="(page, index) in pages" :key="page === MORE ? -index : page">

Wolfr

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { guidFor } from '@ember/object/internals';

export default class Accordion extends Component {

  @tracked isActive = false
  accordionId = 'accordion-' + guidFor(this);

Wolfr

<div class="auk-accordion {{if this.isActive "auk-accordion--is-active"}}">

    <WebComponents::AuButtonLink
      @padded="padded-y"
      @icon="chevron-right"
      @block="true"
      {{on "click" this.toggleAccordion}}
      aria-expanded={{if this.isActive "true" "false"}}
      aria-controls={{this.accordionId}}>{{@label}}
    </WebComponents::AuButtonLink>

Wolfr

body {
  background: red;
}

.st-toolbar {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

Wolfr

import { Component, Element, State, h } from '@stencil/core';
import { hasSlot } from '../../utilities/slot';

/**
 * @since 2.0
 * @status stable
 *
 * @slot - The card's body.
 * @slot header - The card's header.
 * @slot footer - The card's footer.

Wolfr

Note that is a draft post. NOT checked by the full Routify team yet. Any feedback welcome! (You are looking at a major rewrite, this used to be more about Routify vs Sapper)

What's the difference between Roxi, Routify and Sapper?

We are getting got a lot of questions about how Routify is different than Sapper. Rather than going into long comparisons about the differences with Sapper, I would like to explain the project goals of the Routify and Roxi projects. I hope this will make it clearer where things are going.

Now that we have released Routify 1.5, it's time to talk about Roxi.

In any non-trivial project, there is a need for a project structure. You've got routing, asset pipeline (CSS, images), data handling issues and more to deal with.

Wolfr

@-moz-document domain("www.ejustice.just.fgov.be") {
/* Stylesheet to make staatsblad more legible */

frame {
    border: none;
}

a {
    color: #468FFA;
}

Wolfr

Now using node v12.14.1 (npm v6.13.6)
johanronsse@Johans-iMac spark-backoffice-prototype % npm i              

> fsevents@1.2.13 install /Users/johanronsse/Sites/spark-backoffice-prototype/node_modules/glob-watcher/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

Wolfr

//- Button 1.1
//- 1.1: Added disabled state
mixin c-button(options, attributes)
  - var DEFAULT_OPTIONS = {};
  - DEFAULT_OPTIONS.label = 'Button label' // string
  - DEFAULT_OPTIONS.skin = 'default' // string
  - DEFAULT_OPTIONS.size = false // string
  - DEFAULT_OPTIONS.href = false // string
  - DEFAULT_OPTIONS.icon = false // boolean
  - DEFAULT_OPTIONS.disabled = false // boolean

Wolfr

$theme-color: #000;
$theme-name: "|customer-a";

*[data-theme="#{$theme-name}"] button {
  color: $theme-color;
}