From b143da3b8c02ed97aea68ed0857a152b92f4b4d2 Mon Sep 17 00:00:00 2001 From: Rastislav Date: Fri, 25 Oct 2024 18:44:41 +0200 Subject: [PATCH] Fixes --- README.md | 66 ++++----------------------------- package.json | 4 +- preview/pug/layout.pug | 4 +- preview/pug/page/filters.pug | 33 ++--------------- preview/pug/page/grid.pug | 64 ++++++++++++++++++++++++++++++++ preview/pug/page/media.pug | 2 +- preview/pug/page/typography.pug | 20 +++++++--- scss/coco.scss | 2 +- scss/config/_color.scss | 4 +- scss/config/_grid.scss | 26 +++++++++++++ scss/config/_index.scss | 1 + scss/element/_default.scss | 9 +++++ scss/element/_grid.scss | 56 ++++++++++++++++++++++++++++ scss/element/_index.scss | 3 +- scss/element/_typography.scss | 14 +++++++ scss/filters/_blur.scss | 17 --------- scss/filters/_brightness.scss | 19 ---------- scss/filters/_chessboard.scss | 32 ++++++++-------- scss/filters/_contrast.scss | 19 ---------- scss/filters/_grayscale.scss | 23 ------------ scss/filters/_hue-rotate.scss | 17 --------- scss/filters/_index.scss | 9 ----- scss/filters/_invert.scss | 19 ---------- scss/filters/_opacity.scss | 19 ---------- scss/filters/_saturate.scss | 19 ---------- scss/filters/_sepia.scss | 19 ---------- scss/form/_check.scss | 2 + scss/form/_control.scss | 2 + scss/form/_label.scss | 1 + scss/form/_range.scss | 1 + scss/form/_switch.scss | 2 + scss/function/_config.scss | 9 ++--- scss/plugin/_normalize.scss | 43 +-------------------- 33 files changed, 238 insertions(+), 342 deletions(-) create mode 100644 preview/pug/page/grid.pug create mode 100644 scss/config/_grid.scss create mode 100644 scss/element/_grid.scss delete mode 100644 scss/filters/_blur.scss delete mode 100644 scss/filters/_brightness.scss delete mode 100644 scss/filters/_contrast.scss delete mode 100644 scss/filters/_grayscale.scss delete mode 100644 scss/filters/_hue-rotate.scss delete mode 100644 scss/filters/_invert.scss delete mode 100644 scss/filters/_opacity.scss delete mode 100644 scss/filters/_saturate.scss delete mode 100644 scss/filters/_sepia.scss diff --git a/README.md b/README.md index 14ec1bd..b6a9478 100755 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ # COCO -**COCO** is an open-source CSS framework based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes). +**COCO** is an open-source CSS framework. -100% Responsive πŸ’» | Modular πŸ—‚ | Modern πŸ’ˆ | Free βš—οΈ +Minimalistic β›½ | Modular πŸ—‚ | Modern πŸ’ˆ | Free βš—οΈ --- | --- | --- | --- -*Designed for multi-device support* | *Import only what you need* | *Built with Flexbox* | *Open Source* +*As small as possible, yet feature-rich* | *Import only the components you need* | *Built on CSS3* | *Open Source* ## CDN @@ -68,30 +68,20 @@ After installation, import the CSS file into your project: **CSS version:** ```css -@import '@blockchainhub/coco/dist/css/coco.css'; +@import '@blockchainhub/coco/dist/coco.css'; ``` **Minified CSS version:** ```css -@import '@blockchainhub/coco/dist/css/coco.min.css'; +@import '@blockchainhub/coco/dist/coco.min.css'; ``` -**SCSS version:** - -```css -@import '@blockchainhub/coco/dist/scss/coco.scss'; -``` - -## Customize Distribution - -COCO is a CSS framework that outputs a single CSS file [coco.css](https://github.com/bchainhub/coco/blob/master/dist/css/coco.css) or a SASS distribution. You can use it "out of the box" or download the Sass source files to customize the variables. - ## Get Started -### Simplest Grid System +### Simplest Grid System, same as Bootstrap -> Add columns, and they will resize automatically based on screen size. +> This framework uses a grid system with the same standards as Bootstrap. ### Features @@ -107,34 +97,6 @@ COCO is a CSS framework that outputs a single CSS file [coco.css](https://github ``` -#### Tabs - -> Create tabs without JavaScript: - -```html -
- -
-
-
Content of second tab
-
Content of third tab
-
Content of first tab (default)
-
-``` - -#### Hamburger Menu - -> Build a hamburger menu without JavaScript: - -1. Add `` inside the `.navbar`. -2. Change the link to a label: ``. -3. Ensure your menu `id` matches `label[data-target]` for JavaScript compatibility. -4. Test the hamburger menu functionality. - #### em.oji > Use emojis as icons with effects: @@ -151,25 +113,13 @@ COCO is a CSS framework that outputs a single CSS file [coco.css](https://github version ``` -## Browser Support - -COCO uses [autoprefixer](https://github.com/postcss/autoprefixer) to ensure Flexbox compatibility with older browsers. Based on [Can I use](https://caniuse.com/#feat=flexbox), COCO supports **recent** versions of: - -- Chrome -- Edge -- Firefox -- Opera -- Safari - -Internet Explorer 10+ is only partially supported. - ## Documentation For detailed documentation, visit the [Online Manual](https://bchainhub.github.io/coco/). ## Informational Notice -Wondering why some files start with an underscore? +Have you noticed some files start with an underscore? > Sass files that begin with an underscore (`_`) are considered partials. These files are not compiled by themselves but are included in other files. diff --git a/package.json b/package.json index 4810fa0..957e52e 100755 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "build": "npm-run-all add-version delete:dev-folder build:prod remove-version", "build:prod": "npm-run-all sass:prod:expanded sass:prod:compressed autoprefixer", "pug": "pug --obj preview/pug/assets/data.json --watch preview/pug/ --out preview/html/ --pretty", - "sass:preview": "sass --watch --update --style=expanded --no-source-map scss:preview/assets/css --load-path=scss", + "sass:preview": "sass --watch --update --style=expanded --no-source-map scss/coco-styles.scss:preview/assets/css/coco.css --load-path=scss", "sass:prod:expanded": "sass --no-source-map --style=expanded scss/coco-styles.scss:dist/coco.css", "sass:prod:compressed": "sass --no-source-map --style=compressed scss/coco-styles.scss:dist/coco.min.css", "lint": "npm-run-all add-version sass:lint remove-version", @@ -47,7 +47,7 @@ "npm-run-all": "^4.1.5", "postcss-cli": "^11.0.0", "pug-cli": "^1.0.0-alpha6", - "sass": "^1.80.3", + "sass": "^1.80.4", "sass-true": "^8.1.0", "stylelint": "^16.10.0", "stylelint-config-sass-guidelines": "^12.1.0", diff --git a/preview/pug/layout.pug b/preview/pug/layout.pug index 99dee5d..4e4efd3 100755 --- a/preview/pug/layout.pug +++ b/preview/pug/layout.pug @@ -14,7 +14,7 @@ html(lang='en') } meta(charset='UTF-8') meta(name='viewport' content='width=device-width, initial-scale=1.0') - title coco CSS Development Preview + title CoCo CSS Framework link(rel='stylesheet' href=`../../assets/css/coco.css?time=${time}`) link(rel='icon' href='../../assets/img/favicon-32x32.png' type='image/png') body @@ -43,6 +43,8 @@ html(lang='en') a(href='component.html' aria-current=page === 'component' ? 'page' : '') Component li a(href='filters.html' aria-current=page === 'filters' ? 'page' : '') Filters + li + a(href='grid.html' aria-current=page === 'grid' ? 'page' : '') Grid system div(class='form-group') label(class='form-label') Reading direction select(id='reading-direction' class='form-control form-control--sm') diff --git a/preview/pug/page/filters.pug b/preview/pug/page/filters.pug index bcd7ef3..64f5827 100644 --- a/preview/pug/page/filters.pug +++ b/preview/pug/page/filters.pug @@ -14,54 +14,29 @@ block content figure(class='figure') img.filter.amaro(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') figcaption(class='figure-caption') .filter.amaro - figure(class='figure') - img.filter.blur-5(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') - figcaption(class='figure-caption') .filter.blur-5 figure(class='figure') img.filter.brannan(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') figcaption(class='figure-caption') .filter.brannan - figure(class='figure') - img.filter.brightness-50(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') - figcaption(class='figure-caption') .filter.brightness-50 figure(class='figure') img.filter.brooklyn(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') figcaption(class='figure-caption') .filter.brooklyn - figure(class='figure') - img.filter.chessboard(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') - figcaption(class='figure-caption') .filter.chessboard figure(class='figure') img.filter.clarendon(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') figcaption(class='figure-caption') .filter.clarendon - figure(class='figure') - img.filter.contrast-50(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') - figcaption(class='figure-caption') .filter.contrast-50 figure(class='figure') img.filter.earlybird(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') figcaption(class='figure-caption') .filter.earlybird figure(class='figure') img.filter.gingham(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') figcaption(class='figure-caption') .filter.gingham - figure(class='figure') - img.filter.grayscale-50(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') - figcaption(class='figure-caption') .filter.grayscale-50 figure(class='figure') img.filter.hudson(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') figcaption(class='figure-caption') .filter.hudson - figure(class='figure') - img.filter.hue-rotate-90(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') - figcaption(class='figure-caption') .filter.hue-rotate-90 figure(class='figure') img.filter.inkwell(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') figcaption(class='figure-caption') .filter.inkwell figure(class='figure') - img.filter.invert-50(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') - figcaption(class='figure-caption') .filter.invert-50 - figure(class='figure') - img.filter.opacity-50(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') - figcaption(class='figure-caption') .filter.opacity-50 - figure(class='figure') - img.filter.saturate-200(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') - figcaption(class='figure-caption') .filter.saturate-200 - figure(class='figure') - img.filter.sepia-50(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') - figcaption(class='figure-caption') .filter.sepia-50 + .row + div.filter.chessboard.is-light(style="width: 200px; height: 200px;") + div.filter.chessboard.is-dark(style="width: 200px; height: 200px;") + figcaption.figure-caption .filter.chessboard [.is-light, .is-dark] diff --git a/preview/pug/page/grid.pug b/preview/pug/page/grid.pug new file mode 100644 index 0000000..4b8c894 --- /dev/null +++ b/preview/pug/page/grid.pug @@ -0,0 +1,64 @@ +extends ../layout.pug + +block variables + - var title = 'Grid system' + - var page = 'grid' + +block content + h2.section-title Grid system + p This Flexbox-based grid system, inspired by Bootstrap, allows for easy, responsive layouts. Here’s a quick guide on how to use it: + + h3 Flexbox Grid System Tutorial + + .tutorial-container + h4 Step 1: Set Up a Container + p Start by adding a container to center and add padding around your content. + pre + code.language-html + | <div class="container"> + | <div class="row"> + | <div class="col col-12">Full Width Column</div> + | </div> + | </div> + + h4 Step 2: Use Rows to Wrap Columns + p Wrap your columns in a row to structure them in a horizontal layout. + pre + code.language-html + | <div class="row"> + | <div class="col col-6">Half Width</div> + | <div class="col col-6">Half Width</div> + | </div> + + h4 Step 3: Define Columns with Responsive Classes + p Assign column classes to control width at different screen sizes: + pre + code.language-html + | <div class="row"> + | <div class="col-sm-12 col-md-6 col-lg-4">Responsive Column</div> + | <div class="col-sm-12 col-md-6 col-lg-4">Responsive Column</div> + | <div class="col-sm-12 col-md-6 col-lg-4">Responsive Column</div> + | </div> + + h4 Step 4: Responsive Adjustments + p As the viewport changes, columns adjust based on their class. For instance: + ul + li `col-12`: Full width on all screens + li `col-md-6`: Half width on medium and larger screens + li `col-lg-4`: One-third width on large screens + + h4 Step 5: Example of Nested Columns + p You can nest rows within columns for more complex layouts: + pre + code.language-html + | <div class="container"> + | <div class="row"> + | <div class="col col-6"> + | <div class="row"> + | <div class="col col-6">Nested Column</div> + | <div class="col col-6">Nested Column</div> + | </div> + | </div> + | <div class="col col-6">Half Width Column</div> + | </div> + | </div> diff --git a/preview/pug/page/media.pug b/preview/pug/page/media.pug index 7351a33..5dbc3cc 100755 --- a/preview/pug/page/media.pug +++ b/preview/pug/page/media.pug @@ -6,7 +6,7 @@ block variables block content div(style='aspect-ratio: 16 / 9;') - iframe(width='560' height='315' src='https://www.youtube.com/embed/-6Xl9tBWt54' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen) + iframe(width='560' height='315' src='https://www.youtube.com/embed/JpJvfzzm9Bc' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen) img(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Moutain') figure(class='figure') img(src='https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3&auto=format&fit=crop&w=1650&q=80' alt='Mountain') diff --git a/preview/pug/page/typography.pug b/preview/pug/page/typography.pug index ec5fbd4..0345bf0 100755 --- a/preview/pug/page/typography.pug +++ b/preview/pug/page/typography.pug @@ -76,9 +76,17 @@ block content p.hidden This is a hidden paragraph. hr p.lead - span - em.oji 🀩 - span - em.oji.grayscale πŸ€“ - span - em.oji.flat πŸ’– + p.h4 Em.oji + ul + li + em.oji 🀩 + span em.oji + li + em.oji.grayscale πŸ€“ + span em.oji.grayscale + li + em.oji.flat πŸ’– + span em.oji.flat + hr + div + span.copy [.copy] Copy this text by clicking on it and pressing Ctrl+C or Cmd+C. diff --git a/scss/coco.scss b/scss/coco.scss index 4ddcd02..9c5e579 100755 --- a/scss/coco.scss +++ b/scss/coco.scss @@ -4,6 +4,6 @@ @forward 'mixin/generator'; @forward 'element'; @forward 'form'; -@forward 'filters'; @forward 'print'; @forward 'plugin'; +@forward 'filters'; diff --git a/scss/config/_color.scss b/scss/config/_color.scss index 7ff2df7..f462f02 100755 --- a/scss/config/_color.scss +++ b/scss/config/_color.scss @@ -5,9 +5,9 @@ $color-black: hsl(205deg 100% 2%) !default; $color-danger: hsl(0deg 71% 51%) !default; $color-gray: hsl(208deg 9% 42%) !default; $color-gray-light: hsl(215deg 63% 93%) !default; -$color-primary: hsl(262deg 71% 49%) !default; +$color-primary: hsl(121deg 44% 49%) !default; $color-secondary: hsl(227deg 92% 55%) !default; -$color-success: hsl(150deg 100% 33%) !default; +$color-success: hsl(167, 100%, 33%) !default; $color-white: hsl(0deg 0% 100%) !default; $colors: () !default; diff --git a/scss/config/_grid.scss b/scss/config/_grid.scss new file mode 100644 index 0000000..85c8cc0 --- /dev/null +++ b/scss/config/_grid.scss @@ -0,0 +1,26 @@ +@use 'sass:map'; + +$grid: () !default; +$grid: map.merge( + ( + 'container-max-width': 1320px, // Maximum width of the container + 'grid-columns': 12, // 12 columns by default + 'gutter-width': 1.5rem, // 1.5rem gutters + 'grid-breakpoints': ( + 'xs': 0, // Extra small devices (portrait phones) + 'sm': 576px, // Small devices (landscape phones) + 'md': 768px, // Medium devices (tablets) + 'lg': 992px, // Large devices (desktops) + 'xl': 1200px, // Extra large devices (large desktops) + 'xxl': 1400px // Extra extra large devices (larger desktops) + ), + 'container-widths': ( + 'sm': 540px, + 'md': 720px, + 'lg': 960px, + 'xl': 1140px, + 'xxl': 1320px + ) + ), + $grid +); diff --git a/scss/config/_index.scss b/scss/config/_index.scss index d9870bd..2d9d900 100755 --- a/scss/config/_index.scss +++ b/scss/config/_index.scss @@ -3,6 +3,7 @@ @forward 'setting'; @forward 'spacer'; @forward 'display'; +@forward 'grid'; @forward 'typography'; @forward 'button'; @forward 'form'; diff --git a/scss/element/_default.scss b/scss/element/_default.scss index c18f279..003b447 100755 --- a/scss/element/_default.scss +++ b/scss/element/_default.scss @@ -29,6 +29,15 @@ color: color('text'); } + body.has-sticky-footer { + display: flex; + min-height: 100vh; + flex-direction: column; + > main { + flex: 1; + } + } + a { color: color('link'); text-decoration: underline; diff --git a/scss/element/_grid.scss b/scss/element/_grid.scss new file mode 100644 index 0000000..7d86efc --- /dev/null +++ b/scss/element/_grid.scss @@ -0,0 +1,56 @@ +@use 'sass:map'; +@use '../function' as *; +@use '../config' as *; + +// Variables from configuration map +$container-max-width: config('container-max-width', $grid, false); +$grid-columns: config('grid-columns', $grid, false); +$gutter: config('gutter-width', $grid, false); +$breakpoints: config('grid-breakpoints', $grid, false); +$container-widths: config('container-widths', $grid, false); + +// Container +.container { + max-width: $container-max-width; + margin: 0 auto; + padding: $gutter; +} + +// Row +.row { + display: flex; + flex-wrap: wrap; + margin-left: -$gutter; + margin-right: -$gutter; +} + +// Column Mixin for Flexbox Grid +@mixin col($columns) { + flex: 0 0 percentage($columns / $grid-columns); + max-width: percentage($columns / $grid-columns); + padding: $gutter; + box-sizing: border-box; + text-align: center; +} + +// Define column classes (e.g., col-1, col-2, ..., col-12) +@for $i from 1 through $grid-columns { + .col-#{$i} { + @include col($i); + } +} + +// Responsive Adjustments +@each $breakpoint, $width in $breakpoints { + @media (min-width: $width) { + .container { + max-width: map.get($container-widths, $breakpoint); + } + + @for $i from 1 through $grid-columns { + .col-#{$breakpoint}-#{$i} { + @include col($i); + } + } + } +} diff --git a/scss/element/_index.scss b/scss/element/_index.scss index 03d1f7d..3f81d79 100755 --- a/scss/element/_index.scss +++ b/scss/element/_index.scss @@ -1,9 +1,10 @@ @forward 'root'; @forward 'accessibility'; -@forward 'emoji'; +@forward 'grid'; @forward 'default'; @forward 'divider'; @forward 'media'; @forward 'table'; @forward 'typography'; @forward 'utilities'; +@forward 'emoji'; diff --git a/scss/element/_typography.scss b/scss/element/_typography.scss index d4482d2..b4b5cb9 100755 --- a/scss/element/_typography.scss +++ b/scss/element/_typography.scss @@ -144,6 +144,13 @@ padding: config('inline-padding', $typography); } + pre > code { + display: block; + margin-block-start: spacer('s'); + margin-block-end: spacer('s'); + background-color: color('code-background'); + } + strong { color: color('strong'); } @@ -151,4 +158,11 @@ .lead { font-size: config('font-size-lead', $typography); } + + .copy { + user-select: all; + -moz-user-select: all; + -webkit-user-select: all; + cursor: copy; + } } diff --git a/scss/filters/_blur.scss b/scss/filters/_blur.scss deleted file mode 100644 index 3238408..0000000 --- a/scss/filters/_blur.scss +++ /dev/null @@ -1,17 +0,0 @@ -$blur-breakpoints: '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'; - -@mixin blur { - @each $breakpoint in $blur-breakpoints { - &.blur-#{$breakpoint} { - filter: blur(#{$breakpoint}px); - } - } -} - -/// Applies a blur effect to the image. A larger value will create more blur. -/// @name .filter.blur -/// @group filters -/// @since 2.0.0 -.filter { - @include blur; -} diff --git a/scss/filters/_brightness.scss b/scss/filters/_brightness.scss deleted file mode 100644 index eb108f5..0000000 --- a/scss/filters/_brightness.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use 'sass:string'; - -$brightness-breakpoints: 0, 10, 25, 40, 50, 60, 75, 110, 125, 150, 175, 200; - -@mixin brightness { - @each $breakpoint in $brightness-breakpoints { - &.brightness-#{$breakpoint} { - filter: string.unquote('brightness(#{$breakpoint}%)'); - } - } -} - -/// The Brightness filter provides advanced options for adjusting brightness. -/// @name .filter.brightness -/// @group filters -/// @since 2.0.0 -.filter { - @include brightness; -} diff --git a/scss/filters/_chessboard.scss b/scss/filters/_chessboard.scss index 44e5c75..eb32b43 100644 --- a/scss/filters/_chessboard.scss +++ b/scss/filters/_chessboard.scss @@ -3,21 +3,23 @@ /// @group filters /// @since 2.0.0 .filter { - &.chessboard { - background-position: 0 0, 30px 30px; - background-size: 20px 20px; - z-index: 1; + &.chessboard { + background-color: #fff; + background-position: 0 0, 30px 30px; + background-size: 20px 20px; + background-image: linear-gradient(45deg, #f6f6f6 25%, transparent 0, transparent 75%, #f6f6f6 0, #f6f6f6), + linear-gradient(45deg, #f6f6f6 25%, transparent 0, transparent 75%, #f6f6f6 0, #f6f6f6); - &.is-light { - background-color: #fff; - background-image: linear-gradient(45deg, #f6f6f6 25%, transparent 0, transparent 75%, #f6f6f6 0, #f6f6f6), - linear-gradient(45deg, #f6f6f6 25%, transparent 0, transparent 75%, #f6f6f6 0, #f6f6f6); - } + &.is-light { + background-color: #fff; + background-image: linear-gradient(45deg, #f6f6f6 25%, transparent 0, transparent 75%, #f6f6f6 0, #f6f6f6), + linear-gradient(45deg, #f6f6f6 25%, transparent 0, transparent 75%, #f6f6f6 0, #f6f6f6); + } - &.is-dark { - background-color: transparent; - background-image: linear-gradient(45deg, #2e3033 25%, transparent 0, transparent 75%, #2e3033 0, #2e3033), - linear-gradient(45deg, #2e3033 25%, transparent 0, transparent 75%, #2e3033 0, #2e3033); - } - } + &.is-dark { + background-color: transparent; + background-image: linear-gradient(45deg, #2e3033 25%, transparent 0, transparent 75%, #2e3033 0, #2e3033), + linear-gradient(45deg, #2e3033 25%, transparent 0, transparent 75%, #2e3033 0, #2e3033); + } + } } diff --git a/scss/filters/_contrast.scss b/scss/filters/_contrast.scss deleted file mode 100644 index 4b1ea11..0000000 --- a/scss/filters/_contrast.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use 'sass:string'; - -$contrast-breakpoints: 0, 10, 25, 40, 50, 60, 75, 110, 125, 150, 175, 200; - -@mixin contrast { - @each $breakpoint in $contrast-breakpoints { - &.contrast-#{$breakpoint} { - filter: string.unquote('contrast(#{$breakpoint}%)'); - } - } -} - -/// Contrast filter adjusts the contrast of an image. -/// @name .filter.contrast -/// @group filters -/// @since 2.0.0 -.filter { - @include contrast; -} diff --git a/scss/filters/_grayscale.scss b/scss/filters/_grayscale.scss deleted file mode 100644 index 6ce8c6c..0000000 --- a/scss/filters/_grayscale.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use 'sass:string'; - -$grayscale-breakpoints: 0, 10, 25, 40, 50, 60, 75, 100; - -@mixin grayscale { - @each $breakpoint in $grayscale-breakpoints { - &.grayscale-#{$breakpoint} { - filter: string.unquote('grayscale(#{$breakpoint}%)'); - } - } -} - -/// Converts the image to grayscale. -/// @name .filter.grayscale -/// @group filters -/// @since 2.0.0 -.filter { - @include grayscale; - - &.grayscale { - filter: string.unquote('grayscale(100%)'); - } -} diff --git a/scss/filters/_hue-rotate.scss b/scss/filters/_hue-rotate.scss deleted file mode 100644 index 4a92dfc..0000000 --- a/scss/filters/_hue-rotate.scss +++ /dev/null @@ -1,17 +0,0 @@ -$hue-rotate-breakpoints: 0, 30, 45, 60, 90, 120, 135, 150, 180, 210, 225, 240, 270, 300, 315, 330; - -@mixin hue-rotate { - @each $breakpoint in $hue-rotate-breakpoints { - &.hue-rotate-#{$breakpoint} { - filter: hue-rotate(#{$breakpoint}deg); - } - } -} - -/// Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. -/// @name .filter.hue-rotate -/// @group filters -/// @since 2.0.0 -.filter { - @include hue-rotate; -} diff --git a/scss/filters/_index.scss b/scss/filters/_index.scss index 45b3ca0..2e12101 100755 --- a/scss/filters/_index.scss +++ b/scss/filters/_index.scss @@ -1,20 +1,11 @@ @forward '1977'; @forward 'aden'; @forward 'amaro'; -@forward 'blur'; @forward 'brannan'; -@forward 'brightness'; @forward 'brooklyn'; @forward 'chessboard'; @forward 'clarendon'; -@forward 'contrast'; @forward 'earlybird'; @forward 'gingham'; -@forward 'grayscale'; @forward 'hudson'; -@forward 'hue-rotate'; @forward 'inkwell'; -@forward 'invert'; -@forward 'opacity'; -@forward 'saturate'; -@forward 'sepia'; diff --git a/scss/filters/_invert.scss b/scss/filters/_invert.scss deleted file mode 100644 index f35d8b3..0000000 --- a/scss/filters/_invert.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use 'sass:string'; - -$invert-breakpoints: 0, 10, 25, 40, 50, 60, 75, 100; - -@mixin invert { - @each $breakpoint in $invert-breakpoints { - &.invert-#{$breakpoint} { - filter: string.unquote('invert(#{$breakpoint}%)'); - } - } -} - -/// Inverts the samples in the image. 0% (0) is default and represents the original image. 100% (100) will make the image completely inverted. -/// @name .filter.invert -/// @group filters -/// @since 2.0.0 -.filter { - @include invert; -} diff --git a/scss/filters/_opacity.scss b/scss/filters/_opacity.scss deleted file mode 100644 index 674ad5b..0000000 --- a/scss/filters/_opacity.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use 'sass:string'; - -$opacity-breakpoints: 0, 10, 25, 40, 50, 60, 75, 100; - -@mixin opacity { - @each $breakpoint in $opacity-breakpoints { - &.opacity-#{$breakpoint} { - filter: string.unquote('opacity(#{$breakpoint}%)'); - } - } -} - -/// Sets the opacity level for the image. The opacity-level describes the transparency-level, where: 0% (0) is completely transparent. 100% (100) is default and represents the original image (no transparency). -/// @name .filter.opacity -/// @group filters -/// @since 2.0.0 -.filter { - @include opacity; -} diff --git a/scss/filters/_saturate.scss b/scss/filters/_saturate.scss deleted file mode 100644 index 205e6c9..0000000 --- a/scss/filters/_saturate.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use 'sass:string'; - -$saturate-breakpoints: 0, 10, 25, 40, 50, 60, 75, 110, 125, 150, 175, 200, 300, 400, 500; - -@mixin saturate { - @each $breakpoint in $saturate-breakpoints { - &.saturate-#{$breakpoint} { - filter: string.unquote('saturate(#{$breakpoint}%)'); - } - } -} - -/// Saturates the image. 0% (0) will make the image completely un-saturated. 100% (100) is default and represents the original image. Values over 100% provides super-saturated results. -/// @name .filter.saturate -/// @group filters -/// @since 2.0.0 -.filter { - @include saturate; -} diff --git a/scss/filters/_sepia.scss b/scss/filters/_sepia.scss deleted file mode 100644 index 0888a02..0000000 --- a/scss/filters/_sepia.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use 'sass:string'; - -$sepia-breakpoints: 0, 10, 25, 40, 50, 60, 75, 100; - -@mixin sepia { - @each $breakpoint in $sepia-breakpoints { - &.sepia-#{$breakpoint} { - filter: string.unquote('sepia(#{$breakpoint}%)'); - } - } -} - -/// Converts the image to sepia. 0% (0) is default and represents the original image. 100% (100) will make the image completely sepia. -/// @name .filter.sepia -/// @group filters -/// @since 2.0.0 -.filter { - @include sepia; -} diff --git a/scss/form/_check.scss b/scss/form/_check.scss index ecdf169..8a76724 100755 --- a/scss/form/_check.scss +++ b/scss/form/_check.scss @@ -62,6 +62,7 @@ transition-duration: config('duration', $transition); transition-property: border, box-shadow; transition-timing-function: config('timing-function', $transition); + cursor: pointer; &[type='radio'] { border-radius: 50%; @@ -119,6 +120,7 @@ #{$label} { font-weight: config('font-weight', $form-check); line-height: config('line-height', $form-check); + cursor: pointer; } } } diff --git a/scss/form/_control.scss b/scss/form/_control.scss index 174d5c9..0411cf0 100755 --- a/scss/form/_control.scss +++ b/scss/form/_control.scss @@ -55,6 +55,7 @@ block-size: config('block-size', $form-control-color); inline-size: config('inline-size', $form-control-color); padding: config('padding', $form-control-color); + cursor: pointer; &::-webkit-color-swatch-wrapper { padding: 0; @@ -180,6 +181,7 @@ @if ($has-select) { select#{$selector} { + cursor: context-menu; &:not([multiple]):not([size]) { @include field-icon(config('select', $form-icon, false), color('select-foreground', 'form', true)); background-position: center right config('icon-right-offset', $form-select, false); diff --git a/scss/form/_label.scss b/scss/form/_label.scss index 4f1053c..f11704b 100755 --- a/scss/form/_label.scss +++ b/scss/form/_label.scss @@ -12,5 +12,6 @@ line-height: map.get($typography, 'line-height-md'); text-align: map.get($form-label, 'text-align'); text-transform: map.get($form-label, 'text-transform'); + cursor: pointer; } } diff --git a/scss/form/_range.scss b/scss/form/_range.scss index bd37c0f..bc45cd9 100755 --- a/scss/form/_range.scss +++ b/scss/form/_range.scss @@ -7,6 +7,7 @@ @include generate-variables($form-range); appearance: none; margin-block-start: calc(#{config('thumb-block-size', $form-range)} / 2 - #{config('track-block-size', $form-range)} / 2); + cursor: col-resize; &:focus-visible { outline: none; diff --git a/scss/form/_switch.scss b/scss/form/_switch.scss index 355e65b..864a968 100755 --- a/scss/form/_switch.scss +++ b/scss/form/_switch.scss @@ -14,6 +14,7 @@ align-items: config('vertical-alignment', $form-switch); display: inline-flex; gap: spacer('xs'); + cursor: pointer; &--block { inline-size: 100%; @@ -70,6 +71,7 @@ transition-duration: config('duration', $transition); transition-property: background-position, border, box-shadow; transition-timing-function: config('timing-function', $transition); + cursor: pointer; &:focus-visible { @include focus-ring( diff --git a/scss/function/_config.scss b/scss/function/_config.scss index f915bd7..432cec8 100755 --- a/scss/function/_config.scss +++ b/scss/function/_config.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use 'sass:string'; +@use 'sass:meta'; @use 'setting' as *; @use '../config' as *; @@ -19,14 +20,12 @@ @error 'The #{$key} key name doesn\'t exist under #{$map} at the specified map.'; } - @if map.get($map, $key) == null { - @return null; - } - - @if not $custom-property { + // Return the value directly if not using custom properties + @if not $custom-property or (meta.type-of(map.get($map, $key)) == 'number' or meta.type-of(map.get($map, $key)) == 'map') { @return map.get($map, $key); } + // Return as a CSS variable if it's a custom property request @if map.get($settings, 'css-custom-properties') { @return var(--#{$internal-prefix}#{$key}); } diff --git a/scss/plugin/_normalize.scss b/scss/plugin/_normalize.scss index c221dc0..19c2452 100755 --- a/scss/plugin/_normalize.scss +++ b/scss/plugin/_normalize.scss @@ -1,5 +1,4 @@ @mixin generate-normalize { - /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ @@ -107,7 +106,7 @@ kbd, samp { font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ + font-size: .85em; /* 2 */ } /** @@ -189,17 +188,6 @@ text-transform: none; } - /** - * Correct the inability to style clickable types in iOS and Safari. - */ - - button, - [type="button"], - [type="reset"], - [type="submit"] { - -webkit-appearance: button; - } - /** * Remove the inner border and padding in Firefox. */ @@ -283,34 +271,6 @@ block-size: auto; } - /** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - - [type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ - } - - /** - * Remove the inner padding in Chrome and Safari on macOS. - */ - - [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; - } - - /** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - - ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ - } - /* Interactive ========================================================================== */ @@ -328,6 +288,7 @@ summary { display: list-item; + cursor: pointer; } /* Misc