Skip to content

Commit

Permalink
container queries
Browse files Browse the repository at this point in the history
  • Loading branch information
@sikhote
sikhote committed Oct 29, 2024
1 parent 28112c8 commit 7cd305e
Show file tree
Hide file tree
Showing 14 changed files with 1,238 additions and 2 deletions.
112 changes: 112 additions & 0 deletions dist/docsite/json/platform-tokens.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10326,6 +10326,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": [
{
Expand Down
136 changes: 136 additions & 0 deletions dist/docsite/less/cdr-tokens.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1558,6 +1558,142 @@
@cdr-knockout-color-icon-inverse-default: #dcd6cb;
@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;
Expand Down
Loading

0 comments on commit 7cd305e

Please sign in to comment.