Skip to content
This repository has been archived by the owner on Apr 4, 2022. It is now read-only.

Commit

Permalink
Gluon alpha.3 launch
Browse files Browse the repository at this point in the history
  • Loading branch information
@Chalarangelo
Chalarangelo committed Feb 1, 2018
1 parent 2948804 commit 4160140
Show file tree
Hide file tree
Showing 6 changed files with 481 additions and 16 deletions.
241 changes: 240 additions & 1 deletion dist/mini-default-v3.0.0-alpha.2.css → dist/mini-default-v3.0.0-alpha.3.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
Flavor name: Default (mini-default)
Author: Angelos Chalaris ([email protected])
Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.2
mini.css version: v3.0.0-alpha.3
*/
/*
Browsers resets and base typography.
Expand Down Expand Up @@ -1928,3 +1928,242 @@ progress.tertiary {
.spinner.tertiary {
--spinner-fore-color: #308732;
}

/*
Definitions for icons - powered by Feather (https://feathericons.com/).
*/
span[class^='icon-'] {
display: inline-block;
height: 1em;
width: 1em;
vertical-align: -0.125em;
background-size: contain;
margin: 0 calc(var(--universal-margin) / 4);
}

span[class^='icon-'].secondary {
-webkit-filter: invert(25%);
filter: invert(25%);
}

span[class^='icon-'].inverse {
-webkit-filter: invert(100%);
filter: invert(100%);
}

span.icon-alert {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

span.icon-bookmark {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E");
}

span.icon-calendar {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
}

span.icon-credit {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E");
}

span.icon-edit {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'%3E%3C/path%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'%3E%3C/polygon%3E%3C/svg%3E");
}

span.icon-link {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
}

span.icon-help {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

span.icon-home {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
}

span.icon-info {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E");
}

span.icon-lock {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
}

span.icon-mail {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
}

span.icon-location {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
}

span.icon-phone {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
}

span.icon-rss {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'%3E%3C/path%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'%3E%3C/path%3E%3Ccircle cx='5' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E");
}

span.icon-search {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}

span.icon-settings {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E");
}

span.icon-share {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E");
}

span.icon-cart {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E");
}

span.icon-upload {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
}

span.icon-user {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
}

/*
Definitions for utilities and helper classes.
*/
/* Utility module CSS variable definitions */
:root {
--generic-border-color: rgba(0, 0, 0, 0.3);
--generic-box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.25);
}

.hidden {
display: none !important;
}

.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}

.bordered {
border: 0.0625rem solid var(--generic-border-color) !important;
}

.rounded {
border-radius: var(--universal-border-radius) !important;
}

.circular {
border-radius: 50% !important;
}

.shadowed {
box-shadow: var(--generic-box-shadow) !important;
}

.responsive-margin {
margin: calc(var(--universal-margin) / 4) !important;
}

@media screen and (min-width: 768px) {
.responsive-margin {
margin: calc(var(--universal-margin) / 2) !important;
}
}

@media screen and (min-width: 1280px) {
.responsive-margin {
margin: var(--universal-margin) !important;
}
}

.responsive-padding {
padding: calc(var(--universal-padding) / 4) !important;
}

@media screen and (min-width: 768px) {
.responsive-padding {
padding: calc(var(--universal-padding) / 2) !important;
}
}

@media screen and (min-width: 1280px) {
.responsive-padding {
padding: var(--universal-padding) !important;
}
}

@media screen and (max-width: 767px) {
.hidden-sm {
display: none !important;
}
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
.hidden-md {
display: none !important;
}
}

@media screen and (min-width: 1280px) {
.hidden-lg {
display: none !important;
}
}

@media screen and (max-width: 767px) {
.visually-hidden-sm {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
.visually-hidden-md {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}

@media screen and (min-width: 1280px) {
.visually-hidden-lg {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
2 changes: 1 addition & 1 deletion dist/mini-default-v3.0.0-alpha.2.min.css → dist/mini-default-v3.0.0-alpha.3.min.css
View file

Large diffs are not rendered by default.

109 changes: 109 additions & 0 deletions docs/v3/DEVLOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,9 +194,118 @@
- Generated new favicons.
- Everything should be ready to release `v3.0.0-alpha.1` tomorrow.

# v3.0.0-alpha.2

## 20171120

- Updated `.drawer` documentation to include customization.
- Recompiled default flavor just in case.
- Fixed the devlog showing wrong dates. **Hugging cat** was at it again, it seems!
- Unleashed the first **Gluon** alpha unto the world!

## 20171204

- Started working on `contextual` module.
- Removed the `margin` property from `mark` elements, it seemed particularly irrelevant, provided they are usually inlined inside text. This can be added manually now, but I don't think nobody will have a use for it.
- Removed `border` styling from `mark` elements, it also seemed reasonably irrelevant. Easy to add, generic borders will help here, when I add them back in `utility`.
- Slightly altered `inline-block` version of `mark` to match the styling of the rest of the elements.
- Worked on `contextual_mixins` to get the `mark` variants ready. Slightly altered the mixins from the old version.
- Used mixins to add `secondary`, `tertiary` and `tag` `mark` variants.
- Fed **hugging cat**.

## 20171208

- Added `tooltip` and `toast`. Their mixins were rarely ever used as far as I can tell, so they will not make into **Gluon**, at least for now. If the need arises, they can be easily added back in at a later date.
- Apparently the `-webkit-clip-path` is necessary for best support. Remind **hugging cat** every time from now on.
- Removed legacy support from `tooltip`'s tail. I mean everything uses `calc` now, so what's the use to keep that in?
- I am removing `-webkit-transform`, it seems unnecessary now.

## 20171211

- Added `.modal` component. Breaking changes to comply with the new guidelines (i.e. apply the class on the `checkbox` element, not the element after it, much like `.drawer`). Cleaned up a little bit, dealt with a few problems here and there. Custom styling for the `.modal-close`, not bound to anything else.
- Moved vertical version of `.tabs` into `contextual` under `.collapse`. Reduced complexity, improved performance and generally a better feel to them.
- **Hugging cat** was messing with the `DEVLOG`, good thing I noticed and fixed it.
- Moved component-specific variable definitions in `contextual` under the related conditionals.
- Documented `mark` elements.
- Fixed a broken link in `index.html`.
- Added the appropriate script for generating Codepen links dynamically. Oh, yeah!
- Documented `.toast` messages.

## 20171217

- Documented `.tooltip`.

## 20171228

- Documented `.modal`.
- Documented `.collapse`.

## 20171229

- Coded `progress` module. Everything is pretty much the same as before.
- Renamed `.spinner-donut` to `.spinner`.
- Added a default variant to `progress` and `.spinner`, so that we can have `.primary`, `.secondary` and `.tertiary`.
- Added alternative color mixins for `progress` and `.spinner`.
- Removed size variants and the inline variant mixin from `progress` and `.spinner`.
- Updated flavor file with the `progress` module and mixed-in variants.

## 20171230

- Documented `progress` element.
- Documented `spinner` component.

## 20180102

- Started working on `table` module. Tables are now scrollable by default.
- Coded desktop view for `table`, no `@media` queries in there yet, but there will be more sooner rather than later.
- Added mobile view for tables, fully functional, no problems, still missing `.horizontal` and `.striped` (also `.hoverable` ?) and variablization.

## 20180103

- Added `.horizontal` `table` elements, optimized for minimal size. Some variables are missing and unset but overall both normal and `.horizontal` tables should work properly now on desktop as well as on mobile.

## 20180108

- Updated tables, variables cleanup.
- Added `.striped` and `.hoverable` `table` styles.
- Documented `table` module.

## 20180115

- Updated menus to not include a dead `blog` link no more. Sorry, **hugging cat**!
- Updated tag for `v3.0.0-alpha.2`.
- Released the new alpha.

# v3.0.0-alpha.3

## 20180116

- Started working on `utility` module.
- Moved all old mixins from `utility_mixins` to the base `utility` module.
- Removed `close`, `breadcrumbs` and legacy utility helper classes.
- Everything including `utility` module, but no icons is `6.75KB`, which is quite good, considering everything.

## 20180122

- Started implementing the `icon` module. Made some changes in the icon set (removed `x` and `menu`, added `phone` and `rss`).
- Due to decisions on using `filter: invert(100)` for icon coloring, the minimum supported version of Firefox will now be `35` instead of `31`.
- Added all icons.
- Added `.inverse` and `.secondary` filters for icons.
- Total size with icons is `8.17KB` gzipped.

## 20180123

- Updated `icon` module to have the variables definitions in comments (in case of standalone use).
- Documented `icon` module in its entirety and retested everything. It's all good.

## 20180129

- Documented visibility helpers.
- Documented element decorators.
- Documented responsive spacing and sizing modifiers.
- Updated version info to `v3.0.0-alpha.3`, soon ready to be released as the final alpha.

## 20180201

- Prepared everything for `v3.0.0-alpha.3`.
- Released the new alpha.
Loading

0 comments on commit 4160140

Please sign in to comment.