ode-csslib 1.0.0-dev-produit.202209220950

package/scss/_crisscross-tablette.scss

@@ -0,0 +1,472 @@
+
+@media screen and (max-width: $wide-screen){
+	body{
+		.row-tablette:after{
+			clear:both;
+			content: " ";
+			display: block;
+			width: 100%;
+		}
+
+		.cell-tablette{
+			box-sizing: border-box;
+			float: left;
+			display: block;
+			position: relative;
+		}
+
+		.right-magnet-tablette{
+			float: right !important;
+		}
+
+		.bottom-magnet-tablette{
+			position: absolute;
+			bottom: 0;
+		}
+
+		.fixed-block-tablette{
+			box-sizing: content-box;
+			position: relative;
+			height: 0px;
+
+			.right-magnet.cell.absolute{
+				right: 0 !important;
+				left: auto;
+			}
+			.cell.fluid{
+				position: relative;
+				height: 100%;
+			}
+			.bottom-magnet.cell{
+				bottom: 0;
+				position: absolute;
+			}
+		}
+
+		.height-one-tablette{
+			@include fixed-block;
+			@include grid-cell-height(1);
+		}
+
+		.height-one-plus-half-tablette{
+			@include fixed-block;
+			@include grid-cell-height(1.5);
+		}
+
+		.left-one-tablette{
+			@include grid-cell-left(1);
+		}
+
+		.height-two-tablette{
+			@include fixed-block;
+			@include grid-cell-height(2);
+		}
+
+		.left-two-tablette{
+			@include grid-cell-left(2);
+		}
+
+		.height-three-tablette{
+			@include fixed-block;
+			@include grid-cell-height(3);
+		}
+
+		.left-three-tablette{
+			@include grid-cell-left(3);
+		}
+
+		.height-four-tablette{
+			@include fixed-block;
+			@include grid-cell-height(4);
+		}
+
+		.left-four-tablette{
+			@include grid-cell-left(4);
+		}
+
+		.height-five-tablette{
+			@include fixed-block;
+			@include grid-cell-height(5);
+		}
+
+		.left-five-tablette{
+			@include grid-cell-left(5);
+		}
+
+		.height-six-tablette{
+			@include fixed-block;
+			@include grid-cell-height(6);
+		}
+
+		.left-six-tablette{
+			@include fixed-block;
+			@include grid-cell-left(6);
+		}
+
+		.height-seven-tablette{
+			@include fixed-block;
+			@include grid-cell-height(7);
+		}
+
+		.left-seven-tablette{
+			@include grid-cell-left(7);
+		}
+
+		.height-eight-tablette{
+			@include fixed-block;
+			@include grid-cell-height(8);
+		}
+
+		.left-eight-tablette{
+			@include grid-cell-left(8);
+		}
+
+		.height-nine-tablette{
+			@include fixed-block;
+			@include grid-cell-height(9);
+		}
+
+		.left-nine-tablette{
+			@include grid-cell-left(9);
+		}
+
+		.height-ten-tablette{
+			@include fixed-block;
+			@include grid-cell-height(10);
+		}
+
+		.left-ten-tablette{
+			@include grid-cell-left(10);
+		}
+
+		.height-eleven-tablette{
+			@include fixed-block;
+			@include grid-cell-height(11);
+		}
+
+		.left-eleven-tablette{
+			@include grid-cell-left(11);
+		}
+
+		.height-twelve-tablette{
+			@include fixed-block;
+			@include grid-cell-height(12);
+		}
+
+		.left-twelve-tablette{
+			@include grid-cell-left(12);
+		}
+
+		.zero-tablette{
+			display: none !important;
+		}
+
+		.one-tablette{
+			@include grid-cell-width(1);
+		}
+
+		.two-tablette{
+			@include grid-cell-width(2);
+		}
+
+		.three-tablette{
+			@include grid-cell-width(3);
+		}
+
+		.four-tablette{
+			@include grid-cell-width(4);
+		}
+
+		.five-tablette{
+			@include grid-cell-width(5);
+		}
+
+		.six-tablette{
+			@include grid-cell-width(6);
+		}
+
+		.seven-tablette{
+			@include grid-cell-width(7);
+		}
+
+		.eight-tablette{
+			@include grid-cell-width(8);
+		}
+
+		.nine-tablette{
+			@include grid-cell-width(9);
+		}
+
+		.ten-tablette{
+			@include grid-cell-width(10);
+		}
+
+		.eleven-tablette{
+			@include grid-cell-width(11);
+		}
+
+		.twelve-tablette{
+			@include grid-cell-width(12);
+		}
+
+		.rigid-grid{
+			> .one-tablette{
+				@include grid-cell-width(12);
+			}
+
+			> .two-tablette{
+				@include grid-cell-width(2);
+			}
+
+			> .three-tablette{
+				@include grid-cell-width(3);
+			}
+
+			> .four-tablette{
+				@include grid-cell-width(4);
+			}
+
+			> .five-tablette{
+				@include grid-cell-width(5);
+			}
+
+			> .six-tablette{
+				@include grid-cell-width(6);
+			}
+
+			> .seven-tablette{
+				@include grid-cell-width(7);
+			}
+
+			> .eight-tablette{
+				@include grid-cell-width(8);
+			}
+
+			> .nine-tablette{
+				@include grid-cell-width(9);
+			}
+
+			> .ten-tablette{
+				@include grid-cell-width(10);
+			}
+
+			> .eleven-tablette{
+				@include grid-cell-width(11);
+			}
+
+			> .twelve-tablette{
+				@include grid-cell-width(12);
+			}
+
+			> .height-one-tablette{
+				@include grid-cell-height(1);
+			}
+
+			> .height-two-tablette{
+				@include grid-cell-height(2);
+			}
+
+			> .height-three-tablette{
+				@include grid-cell-height(3);
+			}
+
+			> .height-four-tablette{
+				@include grid-cell-height(4);
+			}
+
+			> .height-five-tablette{
+				@include grid-cell-height(5);
+			}
+
+			> .height-six-tablette{
+				@include grid-cell-height(6);
+			}
+
+			> .height-seven-tablette{
+				@include grid-cell-height(7);
+			}
+
+			> .height-eight-tablette{
+				@include grid-cell-height(8);
+			}
+
+			> .height-nine-tablette{
+				@include grid-cell-height(9);
+			}
+
+			> .height-ten-tablette{
+				@include grid-cell-height(10);
+			}
+
+			> .height-eleven-tablette{
+				@include grid-cell-height(11);
+			}
+
+			> .height-twelve-tablette{
+				@include grid-cell-height(12);
+			}
+		}
+
+		nav.vertical{
+			padding-right: 0;
+			margin: 0;
+		}
+	}
+}
+
+@media screen and (min-width: $fat-tablette + 1) and (max-width: $wide-screen) {
+	body{
+		.one-tablette-wide{
+			@include grid-cell-width(1);
+		}
+
+		.two-tablette-wide{
+			@include grid-cell-width(2);
+		}
+
+		.three-tablette-wide{
+			@include grid-cell-width(3);
+		}
+
+		.four-tablette-wide{
+			@include grid-cell-width(4);
+		}
+
+		.five-tablette-wide{
+			@include grid-cell-width(5);
+		}
+
+		.six-tablette-wide{
+			@include grid-cell-width(6);
+		}
+
+		.seven-tablette-wide{
+			@include grid-cell-width(7);
+		}
+
+		.eight-tablette-wide{
+			@include grid-cell-width(8);
+		}
+
+		.nine-tablette-wide{
+			@include grid-cell-width(9);
+		}
+
+		.ten-tablette-wide{
+			@include grid-cell-width(10);
+		}
+
+		.eleven-tablette-wide{
+			@include grid-cell-width(11);
+		}
+
+		.twelve-tablette-wide{
+			@include grid-cell-width(12);
+		}
+
+		.rigid-grid{
+			> .one-tablette-wide{
+				@include grid-cell-width(12);
+			}
+
+			> .two-tablette-wide{
+				@include grid-cell-width(2);
+			}
+
+			> .three-tablette-wide{
+				@include grid-cell-width(3);
+			}
+
+			> .four-tablette-wide{
+				@include grid-cell-width(4);
+			}
+
+			> .five-tablette-wide{
+				@include grid-cell-width(5);
+			}
+
+			> .six-tablette-wide{
+				@include grid-cell-width(6);
+			}
+
+			> .seven-tablette-wide{
+				@include grid-cell-width(7);
+			}
+
+			> .eight-tablette-wide{
+				@include grid-cell-width(8);
+			}
+
+			> .nine-tablette-wide{
+				@include grid-cell-width(9);
+			}
+
+			> .ten-tablette-wide{
+				@include grid-cell-width(10);
+			}
+
+			> .eleven-tablette-wide{
+				@include grid-cell-width(11);
+			}
+
+			> .twelve-tablette-wide{
+				@include grid-cell-width(12);
+			}
+
+			> .height-one-tablette-wide{
+				@include grid-cell-height(1);
+			}
+
+			> .height-two-tablette-wide{
+				@include grid-cell-height(2);
+			}
+
+			> .height-three-tablette-wide{
+				@include grid-cell-height(3);
+			}
+
+			> .height-four-tablette-wide{
+				@include grid-cell-height(4);
+			}
+
+			> .height-five-tablette-wide{
+				@include grid-cell-height(5);
+			}
+
+			> .height-six-tablette-wide{
+				@include grid-cell-height(6);
+			}
+
+			> .height-seven-tablette-wide{
+				@include grid-cell-height(7);
+			}
+
+			> .height-eight-tablette-wide{
+				@include grid-cell-height(8);
+			}
+
+			> .height-nine-tablette-wide{
+				@include grid-cell-height(9);
+			}
+
+			> .height-ten-tablette-wide{
+				@include grid-cell-height(10);
+			}
+
+			> .height-eleven-tablette-wide{
+				@include grid-cell-height(11);
+			}
+
+			> .height-twelve-tablette-wide{
+				@include grid-cell-height(12);
+			}
+
+			> .margin-wide-one, > .margin-wide-two, > .margin-wide-three, > .margin-wide-four,
+			> .margin-wide-five, > .margin-wide-six, > .margin-wide-seven, > .margin-wide-eight,
+			> .margin-wide-nine, > .margin-wide-ten, > .margin-wide-eleven, > .margin-wide-twelve
+			{
+				margin: 0;
+			}
+		}
+	}
+}