Code mystérieux (sans balise)
Voilà, si vous êtes inscrit sur le site codepen, vous pouvez découvrir des codes qui sont partagés, c'est d'ailleurs la raison pour laquelle je poste ce message. Je viens de découvrir un code intéressant, mais c'est la première fois que je vois un code pareil dans la partie "html".
Connaissez-vous cette manière de coder, c'est à dire sans balise !?
Voici un aperçu
Je ne vais pas vous demander de m'expliquer le code évidemment, mais seulement de me guider dans mes recherches s'il vous plaît !
Voici le
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
|
.container
.console
.console-head
.console-title Console
.console-actions
.console-action.console-action-min
span.fa.fa-caret-down
.console-action.console-action-max
span.fa.fa-arrows-alt
.console-action.console-action-close
span.fa.fa-close
.console-body
.console-text user@PC:~$
span.console-input _ |
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
|
//Colors
$color-body:#647a94;
$color-window:#bbb;
$color-title:#222;
$color-action-min:#eeee73;
$color-action-max:#bee07e;
$color-action-close:#e08d8d;
$color-background:#222;
$color-text:#ddd;
//Sizes
$height-window:24px;
$height-border:4px;
$height-titlebar:$height-window - $height-border;
//End Variables
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: $color-body;
height: 100vh;
}
.container {
display: flex;
align-items: center;
justify-content: space-around;
height: 100%;
}
.console {
max-width: 720px;
min-width: 460px;
width: 50vw;
max-height: 540px;
min-height: 320px;
height: 50vh;
border: $height-border solid $color-window;
font-family: 'Source Code Pro', monospace;
.console-head {
height: $height-window;
background-color: $color-window;
display: flex;
justify-content: space-between;
border-bottom: $height-border solid $color-window;
.console-title {
font-weight: 600;
color: $color-title;
}
.console-actions {
display: flex;
justify-content: space-around;
.console-action {
margin-left: $height-border;
display: block;
width: $height-titlebar;
height: $height-titlebar;
color: $color-title;
text-align: center;
font-size: 0.9em;
.fa {
line-height: $height-titlebar;
}
&.console-action-min {
background-color: $color-action-min;
}
&.console-action-max {
background-color: $color-action-max;
}
&.console-action-close {
background-color: $color-action-close;
}
}
}
}
.console-body {
height:calc(100% - #{$height-window});
background-color: $color-background;
.console-text {
padding: 4px;
color: $color-text;
.console-input {
animation: 1.5s blink infinite;
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
51% {
opacity: 0;
}
100% {
opacity: 0;
}
}
}
}
}
} |
Bonne soirée !