feat: Adapt new hippie-style structure
Sass deprecations removed.
This commit is contained in:
parent
d9f7ae1ff9
commit
c1fea8064e
11 changed files with 166 additions and 147 deletions
|
|
@ -1,5 +1,7 @@
|
|||
@use "sass:color";
|
||||
|
||||
@use "../../hippie-style/hippie";
|
||||
|
||||
.demo__intro {
|
||||
@extend .sec_main_center;
|
||||
@extend .sec_main_status;
|
||||
|
|
@ -9,7 +11,7 @@
|
|||
@extend .sec_main_status;
|
||||
position: relative;
|
||||
min-height: 50vh;
|
||||
border-color: $foxtrot_color;
|
||||
border-color: hippie.basic_color(foxtrot);
|
||||
|
||||
h1:first-of-type {
|
||||
margin-top: 0;
|
||||
|
|
@ -24,7 +26,7 @@
|
|||
}
|
||||
|
||||
.demo__header {
|
||||
padding: $space_double;
|
||||
padding: hippie.$space_double;
|
||||
|
||||
nav {
|
||||
|
||||
|
|
@ -35,19 +37,19 @@
|
|||
}
|
||||
|
||||
.header_fancy {
|
||||
background-color: color.adjust($bravo_color, $alpha: -0.4);
|
||||
background-color: color.adjust(hippie.basic_color(bravo), $alpha: -0.4);
|
||||
|
||||
nav {
|
||||
|
||||
a {
|
||||
background-color: color.adjust($alpha_color, $alpha: -0.4);
|
||||
color: $alpha_color;
|
||||
background-color: color.adjust(hippie.basic_color(alpha), $alpha: -0.4);
|
||||
color: hippie.basic_color(alpha);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($color_brightest, 0.2);
|
||||
color: $color_brightest;
|
||||
background-color: rgba(hippie.$color_brightest, 0.2);
|
||||
color: hippie.$color_brightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -58,7 +60,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: color.adjust($charlie_color, $alpha: -0.4);
|
||||
background-color: color.adjust(hippie.basic_color(charlie), $alpha: -0.4);
|
||||
|
||||
nav {
|
||||
|
||||
|
|
@ -67,8 +69,8 @@
|
|||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: rgba($color_brightest, 0.2);
|
||||
color: $color_brightest;
|
||||
background-color: rgba(hippie.$color_brightest, 0.2);
|
||||
color: hippie.$color_brightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -77,20 +79,20 @@
|
|||
.demo__footer {
|
||||
width: 100%;
|
||||
// height: 128px;
|
||||
padding: $space_double 0;
|
||||
background-color: $color_dark;
|
||||
color: $color_bright;
|
||||
padding: hippie.$space_double 0;
|
||||
background-color: hippie.$color_dark;
|
||||
color: hippie.$color_bright;
|
||||
|
||||
nav {
|
||||
|
||||
a {
|
||||
color: $color_brightest;
|
||||
color: hippie.$color_brightest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo__sprite_down {
|
||||
@include sprite($down);
|
||||
@include hippie.sprite(hippie.$down);
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
// background-image: url(../art/sprites.png);
|
||||
|
|
@ -98,7 +100,7 @@
|
|||
}
|
||||
|
||||
.demo__sprite_up {
|
||||
@include sprite($up);
|
||||
@include hippie.sprite(hippie.$up);
|
||||
// width: 32px;
|
||||
// height: 64px;
|
||||
// background-image: url(../art/sprites.png);
|
||||
|
|
@ -106,7 +108,7 @@
|
|||
}
|
||||
|
||||
.demo__sprite_meta {
|
||||
@include sprite($meta);
|
||||
@include hippie.sprite(hippie.$meta);
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
// background-image: url(../art/sprites.png);
|
||||
|
|
@ -122,7 +124,7 @@
|
|||
min-width: 128px;
|
||||
min-height: 128px;
|
||||
border-radius: 50%;
|
||||
background-color: $delta_color;
|
||||
background-color: hippie.basic_color(delta);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -131,123 +133,123 @@
|
|||
}
|
||||
|
||||
.demo__credits {
|
||||
margin: $space_small 0 $space_basic 0;
|
||||
margin: hippie.$space_small 0 hippie.$space_basic 0;
|
||||
}
|
||||
|
||||
.demo__queries > p {
|
||||
padding: $padding_basic;
|
||||
padding: hippie.$padding_basic;
|
||||
}
|
||||
|
||||
.query_phoneUp {
|
||||
@include forPhoneUp {
|
||||
background-color: rgba($color_text_basic, 0.2)
|
||||
@include hippie.forPhoneUp {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2)
|
||||
}
|
||||
;
|
||||
}
|
||||
|
||||
.query_phoneOnly {
|
||||
@include forPhoneOnly {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
@include hippie.forPhoneOnly {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.query_tabletPortaitOnly {
|
||||
@include forTabletPortraitOnly {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
.query_tabletPortraitOnly {
|
||||
@include hippie.forTabletPortraitOnly {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.query_tabletPortraitUp {
|
||||
@include forTabletPortraitUp {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
@include hippie.forTabletPortraitUp {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.query_tabletLandscapeOnly {
|
||||
@include forTabletLandscapeOnly {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
@include hippie.forTabletLandscapeOnly {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.query_tabletLandscapeUp {
|
||||
@include forTabletLandscapeUp {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
@include hippie.forTabletLandscapeUp {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.query_desktopOnly {
|
||||
@include forDesktopOnly {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
@include hippie.forDesktopOnly {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.query_desktopUp {
|
||||
@include forDesktopUp {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
@include hippie.forDesktopUp {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.query_bigDesktopUp {
|
||||
@include forBigDesktopUp {
|
||||
background-color: rgba($color_text_basic, 0.2);
|
||||
@include hippie.forBigDesktopUp {
|
||||
background-color: rgba(hippie.$color_text_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.demo__query_example {
|
||||
@include goingLarge($screen_tiny) {
|
||||
background-color: $alpha_color;
|
||||
@include hippie.goingLarge(hippie.$screen_tiny) {
|
||||
background-color: hippie.basic_color(alpha);
|
||||
}
|
||||
@include goingLarge($screen_small) {
|
||||
background-color: $bravo_color;
|
||||
@include hippie.goingLarge(hippie.$screen_small) {
|
||||
background-color: hippie.basic_color(bravo);
|
||||
}
|
||||
@include goingLarge($screen_medium) {
|
||||
background-color: $charlie_color;
|
||||
@include hippie.goingLarge(hippie.$screen_medium) {
|
||||
background-color: hippie.basic_color(charlie);
|
||||
}
|
||||
@include goingLarge($screen_large) {
|
||||
background-color: $delta_color;
|
||||
@include hippie.goingLarge(hippie.$screen_large) {
|
||||
background-color: hippie.basic_color(delta);
|
||||
}
|
||||
@include goingLarge($screen_huge) {
|
||||
background-color: $echo_color;
|
||||
@include hippie.goingLarge(hippie.$screen_huge) {
|
||||
background-color: hippie.basic_color(echo);
|
||||
}
|
||||
@include goingLarge($screen_gigantic) {
|
||||
background-color: $foxtrot_color;
|
||||
@include hippie.goingLarge(hippie.$screen_gigantic) {
|
||||
background-color: hippie.basic_color(foxtrot);
|
||||
}
|
||||
margin-bottom: $space_small;
|
||||
padding: $space_small;
|
||||
margin-bottom: hippie.$space_small;
|
||||
padding: hippie.$space_small;
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
@extend code;
|
||||
@include goingLarge($screen_tiny) {
|
||||
@include hippie.goingLarge(hippie.$screen_tiny) {
|
||||
& {
|
||||
content: '768px';
|
||||
}
|
||||
}
|
||||
@include goingLarge($screen_small) {
|
||||
@include hippie.goingLarge(hippie.$screen_small) {
|
||||
& {
|
||||
content: '1024px';
|
||||
}
|
||||
}
|
||||
@include goingLarge($screen_medium) {
|
||||
@include hippie.goingLarge(hippie.$screen_medium) {
|
||||
& {
|
||||
content: '1280px';
|
||||
}
|
||||
}
|
||||
@include goingLarge($screen_huge) {
|
||||
@include hippie.goingLarge(hippie.$screen_huge) {
|
||||
& {
|
||||
content: '1680px';
|
||||
}
|
||||
}
|
||||
@include goingLarge($screen_gigantic) {
|
||||
@include hippie.goingLarge(hippie.$screen_gigantic) {
|
||||
& {
|
||||
content: '1920px';
|
||||
}
|
||||
}
|
||||
content: '< 768px';
|
||||
padding: $padding_basic;
|
||||
border-radius: $radius_basic;
|
||||
color: $color_brightest;
|
||||
background-color: rgba($color_front_basic, 0.2);
|
||||
padding: hippie.$padding_basic;
|
||||
border-radius: hippie.$radius_basic;
|
||||
color: hippie.$color_brightest;
|
||||
background-color: rgba(hippie.$color_front_basic, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -261,11 +263,11 @@
|
|||
}
|
||||
|
||||
.demo__td_pr {
|
||||
padding-right: $space_double;
|
||||
padding-right: hippie.$space_double;
|
||||
}
|
||||
|
||||
.demo__td_pl {
|
||||
padding-left: $space_double;
|
||||
padding-left: hippie.$space_double;
|
||||
}
|
||||
|
||||
// Index
|
||||
|
|
@ -283,6 +285,6 @@
|
|||
|
||||
ul {
|
||||
padding: 1em 5em;
|
||||
background-color: $color_darker;
|
||||
background-color: hippie.$color_darker;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue