blazesoftware / css Goto Github PK

View Code? Open in Web Editor NEW

24.0 24.0 2.0 1.33 MB

CSS foundation for Blaze UI

Home Page: https://www.blazeui.com

TypeScript 25.46% HTML 1.16% SCSS 73.39%

bem css framework sass scss toolkit web-components

css's People

Contributors

Stargazers

Watchers

Forkers

nguyenkhacnhathd

css's Issues

blaze.css does not work standalone in shadow DOM

I have been using blaze.css since version 1.0. Great stuff, thank you. But for at least the past year I have had rendering problems with inputs and toggles. I tried many times to understand what the problem was and never managed to. Recently I tried once more to use blaze in a web component and ran into the same issues as in the past. I tried to create a minimal test to reproduce the rendering problems and found the following way:

For the test, download a copy of the latest blaze.css:

$ wget https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css

Create the following index.html, 70% of which is simply the login-example code from blazeui.com:

<!doctype html>
<html>
  <body>
    <template>
      <link rel="stylesheet" href="blaze.css">
      <!-- START CONTENT FROM https://www.blazeui.com/examples/login -->
      <form class="o-container o-container--xsmall c-card u-high">
        <header class="c-card__header">
          <h2 class="c-heading">
            Login
            <div class="c-heading__sub">Existing users</div>
          </h2>
        </header>
        <div class="c-card__body">
          <div class="o-form-element">
            <label class="c-label">
              Email:
              <input class="c-field c-field--label" type="email" placeholder="[email protected]" />
              <div role="tooltip" class="c-hint">
                The email used to register the account
              </div>
            </label>
          </div>
          <label class="o-form-element c-label">
            Password:
            <input class="c-field c-field--label" type="password" />
          </label>
          <div class="o-form-element">
            <label class="c-toggle c-toggle--success">
              Remember me?
              <input type="checkbox" checked />
              <div class="c-toggle__track">
                <div class="c-toggle__handle"></div>
              </div>
            </label>
          </div>
        </div>
        <footer class="c-card__footer">
          <button type="button" class="c-button c-button--brand c-button--block">
            Login
          </button>
        </footer>
      </form>
      <!-- END CONTENT FROM https://www.blazeui.com/examples/login -->
    </template>
    <script>
        class LoginFormElement extends HTMLElement {
            connectedCallback() {
                const template = document.querySelector('template');
                const shadowRoot = this.attachShadow({mode:'open'});
                shadowRoot.appendChild(template.content.cloneNode(true));
            }
        }
        window.customElements.define('login-form', LoginFormElement);
        document.body.appendChild(document.createElement('login-form'));
    </script>
  </body>
</html>

Rendering index.html in a browser (I tried both Chromium 81 and Firefox 68 ESR) yields:

The reason for that faulty rendering is that blaze defines its CSS variables on :root and those variables do not cross into the component. The first idea is to define the variables on both :root and :host:

$ sed -i s/:root/:root,:host/ blaze.css

This time, the login page renders a little better but has the two issues I have had for one or two years: the inputs stretch to the border of the container, and the toggle has an extra piece on its track:

But it's more complicated than that: in my project interface, I don't have the stretched button, and it's rather easy to get the correct rendering inside the component by some random tricks, for example by duplicating the link element in the light DOM (I have no idea why that makes a difference, it means some CSS information crosses the component barrier). But I have never been able to get the correct rendering in my components.

I hope it helps (and that any answer to this issue will hopefully help me solve my longstanding issue).

Using data URIs breaks strict CSP directive

I serve everything on my site with the default-src 'self' CSP header. This allows an increased security by preventing in particular inline styles and scripts, but it also forbids data URIs. Blaze.css uses data URIs in two places, cards and inputs (select), to show a black triangle using an inline png. Loading the blaze stylesheet hence results in a CSP-violation report:

127.0.0.1/:1 Refused to load the image 'data:image/png;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

I don't know if it is possible to draw the triangle using only CSS and not using a data URI, but I thought it would make sense to mention the issue. There could be a solution, maybe by letting the user provide the icon as SVG.

How to reproduce using a python+Flask server:

load blaze.css locally:

wget https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css

create and run a Flask application (or any server serving the same content and setting the response header):

from flask import Flask, Response, send_file

app = Flask(__name__)

@app.route("/blaze.css")
def blaze():
    return send_file('blaze.css')

@app.route("/")
def home():
    resp = Response('''
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="blaze.css">
  </head>
  <body>
    <select class="c-field">
      <option>Choose me...</option>
    </select>
  </body>
</html>
    ''')
    resp.headers['Content-Security-Policy'] = "default-src 'self'"
    return resp

app.run(debug = True)

visit http://127.0.0.1:5000/ with a browser and see the CSP report in the console.

Please feel free to close this issue if it is too specific. But it would be great if it could be fixed easily.

Allow the use of c-icon with c-button

I would like to create a button with an icon like it is possible to do with inputs, for example with a lock icon to show that a form submission is secure. As far as I can tell, it could be easy to allow the c-icon rules to apply to buttons too, though I guess it would require to rename the o-field classes and there needs to be some changes for buttons that are not c-button--block. An html document that illustrates the idea and some positioning issues:

<!doctype html>
<html>
  <body>
    <link rel="stylesheet" href="https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css">
    <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <style>
     .o-field--icon-left .c-button {
         padding-left: calc(var(--spacing-small)*4);
     }
     .o-field--icon-right .c-button {
         padding-right: calc(var(--spacing-small)*4);
     }
     .o-field--icon-right .c-button+.c-icon {
         right: var(--spacing-small);
     }
    </style>
    <div class="o-container o-container--xsmall">
      <div class="o-field o-field--icon-left o-field--icon-right">
        <i class="fas fa-lock c-icon"></i>
        <a class="c-button c-button--block">Submit</a>
        <i class="fas fa-lock c-icon" aria-hidden></i>
      </div>
      <div class="u-center-block">
        <div class="u-center-block__content u-center-block__content--horizontal">
          <div class="o-field o-field--icon-left o-field--icon-right">
            <i class="fas fa-lock c-icon"></i>
            <a class="c-button">Submit</a>
            <i class="fas fa-lock c-icon" aria-hidden></i>
          </div>
        </div>
      </div>
      <div class="o-field o-field--icon-left o-field--icon-right u-window-box-super">
        <i class="fas fa-lock c-icon"></i>
        <a class="c-button">Submit</a>
        <i class="fas fa-lock c-icon" aria-hidden></i>
      </div>
    </div>
  </body>
</html>

which renders as:

The example is pretty ugly but, with only one icon in a real page, with the right colors, it's alright.

Provide an app-header component

As a followup to #1, my impression is that blaze.css could gain at implementing an “app header”, by extending the o-page-header class used by the blazeui.com site into something close to Polymer's app-header component, visible for example in the chromium-dash application.

Implement floating label for text input

(This is just a suggestion. Please feel free to close the issue if the suggestion is not in line with blaze's philosophy.)

Some argue that floating labels are problematic but I think they can be useful, in particular for forms with one or two inputs, like login. It would be useful and fairly easy, I believe, to allow developers to use floating labels with blaze. A proof-of-concept implementation:

<html>
  <link rel="stylesheet" href="https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css">
  <style>
   input.c-field ~ .floating-label {
       position: absolute;
       pointer-events: none;
       color: var(--color-default);
       top: 50%;
       left: var(--spacing-small);
       transform: translateY(-50%);
       transition: 0.2s ease all;
   }
   input.c-field:focus ~ .floating-label,
   input.c-field:not(:focus):not(:placeholder-shown) ~ .floating-label {
       color: var(--border-color);
       background-color: white;
       transform: translateY(0%);
       top: var(--spacing-medium);
       left: var(--spacing-small);
       padding: 0 var(--spacing-xsmall);
       font-size: var(--text-font-size-xsmall);
   }
   input.c-field:focus + .floating-label {
       color: var(--border-color-focus);
   }
  </style>
  <div class="o-container o-container--xsmall">
    <div class="o-form-element">
      <input id="nickname" placeholder=" " class="c-field">
      <label class="floating-label" for="nickname">Nickname</label>
    </div>
  </div>
</html>

The rendering of the unfocused and focused input is:

There are two issues with that implementation:

:placeholder-shown only works in modern browsers
it requires to set placeholder to an invisible string

Other implementations use the :invalid selector but it does not work with inputs with a defined pattern, like emails.

To support older browser, blaze could define a class that toggles between the centered label and the focused/top label. In javascript, one would listen to focus/blur events, and key events to test if the input value is empty, and toggle the floating-label class.

It may require to change other rules like c-icon and c-hint, for it would be great to be able to have multiple abolutely-positioned elements attached to an input, e.g.:

    <div class="o-form-element o-field o-field--icon-right">
      <input id="password" type="password" class="c-field" minlength="8" required>
      <label class="floating-label" for="password">Password</label>
      <i class="fas fa-check c-icon"></i>
      <div role="tooltip" class="c-hint">Minimum 8 characters</div>
    </div>

where the check icon will be displayed when the password is long enough. Right now, both c-icon and c-hint want to be input's next sibling, if I understand correctly.

Thanks.

No c-nav--inline

Documented c-nav--inline style does not exists in 9.2.0 release: http://blazecss.com/components/navs/#inline

blazesoftware / css Goto Github PK

css's People

Contributors

Stargazers

Watchers

Forkers

css's Issues

blaze.css does not work standalone in shadow DOM

Using data URIs breaks strict CSP directive

Allow the use of c-icon with c-button

Provide an app-header component

Implement floating label for text input

No c-nav--inline

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent