Skip to content

Commit

Permalink
container queries (#211)
Browse files Browse the repository at this point in the history
- adds container queries that work in a similar way to media queries
- container queries support the use of an optional name parameter
sikhote authored Nov 1, 2024
1 parent aa1462a commit a480eca
Showing 18 changed files with 1,405 additions and 5 deletions.
112 changes: 112 additions & 0 deletions dist/docsite/json/platform-tokens.json
Original file line number Diff line number Diff line change
@@ -11044,6 +11044,118 @@
}
}
],
"container-query": [
{
"$value": "Container content rendered at extra small breakpoint only with optional name",
"category": "container-query",
"name": "cdr-xs-cq-only",
"attributes": {
"option": false,
"deprecated": false,
"category": "container-query"
}
},
{
"$value": "Container content rendered at extra small breakpoint and above with optional name",
"category": "container-query",
"name": "cdr-xs-cq-up",
"attributes": {
"option": false,
"deprecated": false,
"category": "container-query"
}
},
{
"$value": "Container content rendered at small breakpoint only with optional name",
"category": "container-query",
"name": "cdr-sm-cq-only",
"attributes": {
"option": false,
"deprecated": false,
"category": "container-query"
}
},
{
"$value": "Container content rendered at small breakpoint and above with optional name",
"category": "container-query",
"name": "cdr-sm-cq-up",
"attributes": {
"option": false,
"deprecated": false,
"category": "container-query"
}
},
{
"$value": "Container content rendered below small breakpoint with optional name",
"category": "container-query",
"name": "cdr-sm-cq-down",
"attributes": {
"option": false,
"deprecated": false,
"category": "container-query"
}
},
{
"$value": "Container content rendered at medium breakpoint only with optional name",
"category": "container-query",
"name": "cdr-md-cq-only",
"attributes": {
"option": false,
"deprecated": false,
"category": "container-query"
}
},
{
"$value": "Container content rendered at medium breakpoint and above with optional name",
"category": "container-query",
"name": "cdr-md-cq-up",
"attributes": {
"option": false,
"deprecated": false,
"category": "container-query"
}
},
{
"$value": "Container content rendered below medium breakpoint with optional name",
"category": "container-query",
"name": "cdr-md-cq-down",
"attributes": {
"option": false,
"deprecated": false,
"category": "container-query"
}
},
{
"$value": "Container content rendered at large breakpoint only with optional name",
"category": "container-query",
"name": "cdr-lg-cq-only",
"attributes": {
"option": false,
"deprecated": false,
"category": "container-query"
}
},
{
"$value": "Container content rendered at large breakpoint and above with optional name",
"category": "container-query",
"name": "cdr-lg-cq-up",
"attributes": {
"option": false,
"deprecated": false,
"category": "container-query"
}
},
{
"$value": "Container content rendered below large breakpoint with optional name",
"category": "container-query",
"name": "cdr-lg-cq-down",
"attributes": {
"option": false,
"deprecated": false,
"category": "container-query"
}
}
],
"colors": [],
"misc": [
{
161 changes: 161 additions & 0 deletions dist/docsite/less/cdr-tokens.less
Original file line number Diff line number Diff line change
@@ -1628,6 +1628,142 @@
@cdr-knockout-color-icon-inverse-default: #d5cfc3;
@cdr-knockout-color-icon-background-note: #c4b03b;

// XS
.cdr-xs-cq-up(@name: '', @rules) {
@container @name (min-width: @cdr-breakpoint-xs) {
@rules();
}

@supports not (contain: inline-size) {
@media (min-width: @cdr-breakpoint-xs) {
@rules();
}
}
}

.cdr-xs-cq-only(@name: '', @rules) {
@container @name (min-width: @cdr-breakpoint-xs) and (max-width: calc(@cdr-breakpoint-sm - 1px)) {
@rules();
}

@supports not (contain: inline-size) {
@media (min-width: @cdr-breakpoint-xs) and (max-width: calc(@cdr-breakpoint-sm - 1px)) {
@rules();
}
}
}

// SM
.cdr-sm-cq-down(@name: '', @rules) {
@container @name (max-width: calc(@cdr-breakpoint-sm - 1px)) {
@rules();
}

@supports not (contain: inline-size) {
@media (max-width: calc(@cdr-breakpoint-sm - 1px)) {
@rules();
}
}
}

.cdr-sm-cq-up(@name: '', @rules) {
@container @name (min-width: @cdr-breakpoint-sm) {
@rules();
}

@supports not (contain: inline-size) {
@media (min-width: @cdr-breakpoint-sm) {
@rules();
}
}
}

.cdr-sm-cq-only(@name: '', @rules) {
@container @name (min-width: @cdr-breakpoint-sm) and (max-width: calc(@cdr-breakpoint-md - 1px)) {
@rules();
}

@supports not (contain: inline-size) {
@media (min-width: @cdr-breakpoint-sm) and (max-width: calc(@cdr-breakpoint-md - 1px)) {
@rules();
}
}
}

// MD
.cdr-md-cq-down(@name: '', @rules) {
@container @name (max-width: calc(@cdr-breakpoint-md - 1px)) {
@rules();
}

@supports not (contain: inline-size) {
@media (max-width: calc(@cdr-breakpoint-md - 1px)) {
@rules();
}
}
}

.cdr-md-cq-up(@name: '', @rules) {
@container @name (min-width: @cdr-breakpoint-md) {
@rules();
}

@supports not (contain: inline-size) {
@media (min-width: @cdr-breakpoint-md) {
@rules();
}
}
}

.cdr-md-cq-only(@name: '', @rules) {
@container @name (min-width: @cdr-breakpoint-md) and (max-width: calc(@cdr-breakpoint-lg - 1px)) {
@rules();
}

@supports not (contain: inline-size) {
@media (min-width: @cdr-breakpoint-md) and (max-width: calc(@cdr-breakpoint-lg - 1px)) {
@rules();
}
}
}

// LG
.cdr-lg-cq-down(@name: '', @rules) {
@container @name (max-width: calc(@cdr-breakpoint-lg - 1px)) {
@rules();
}

@supports not (contain: inline-size) {
@media (max-width: calc(@cdr-breakpoint-lg - 1px)) {
@rules();
}
}
}

.cdr-lg-cq-up(@name: '', @rules) {
@container @name (min-width: @cdr-breakpoint-lg) {
@rules();
}

@supports not (contain: inline-size) {
@media (min-width: @cdr-breakpoint-lg) {
@rules();
}
}
}

.cdr-lg-cq-only(@name: '', @rules) {
@container @name (min-width: @cdr-breakpoint-lg) {
@rules();
}

@supports not (contain: inline-size) {
@media (min-width: @cdr-breakpoint-lg) {
@rules();
}
}
}

.cdr-display-sr-only() {
position: absolute;
width: 1px;
@@ -1749,3 +1885,28 @@
@rules();
}
}

// DEPRECATED summer 2024
.cdr-xs-mq(@rules) {
@media (min-width: @cdr-breakpoint-xs) {
@rules();
}
}

.cdr-sm-mq(@rules) {
@media (min-width: @cdr-breakpoint-sm) {
@rules();
}
}

.cdr-md-mq(@rules) {
@media (min-width: @cdr-breakpoint-md) {
@rules();
}
}

.cdr-lg-mq(@rules) {
@media (min-width: @cdr-breakpoint-lg) {
@rules();
}
}
Loading

0 comments on commit a480eca

Please sign in to comment.