@imiobe/plonetheme-smartweb-base 0.0.3 → 0.0.4

package/src/scss/sections/_se-file.scss

@@ -0,0 +1,175 @@
+.sectionfiles .section-title {
+    display: flex;
+    color: #fff;
+}
+.sectionfiles {
+    @include section-padding-top;
+    @include section-padding-bottom;
+    .section-title {
+        h2 {
+            color: #fff;
+        }
+    }
+    .body-section,
+    .section-title {
+        @if $enable-light-color-section-files {
+            h2,
+            span,
+            p {
+                color: #fff;
+            }
+        }
+    }
+    @if $enable-full-width-section-files {
+        &:after {
+            @include full-width;
+            background: $section-file-background-color;
+        }
+    }
+    background: $section-file-background-color;
+    position: relative;
+    .section_files_list {
+        @include ul-rm-padding;
+    }
+    li {
+        list-style: none;
+    }
+    .section_files_link {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .section_files_image {
+            width: 36px;
+            height: 44px;
+            margin-left: 1rem;
+            @include media-breakpoint-up(md) {
+                width: 160px;
+                height: 121px;
+                margin-left: 0;
+            }
+            position: relative;
+            img {
+                @include fit-cover;
+            }
+        }
+        .section_files_text {
+            .section_files_item_description {
+                margin: 0;
+            }
+        }
+    }
+}
+
+// for bal
+.sectionfiles {
+    .section-container.section-files {
+        @include media-breakpoint-up(lg) {
+            display: flex;
+            gap: 6.8181%;
+            flex-wrap: wrap;
+        }
+        .body-section {
+            margin-bottom: 0;
+            max-width: max-content;
+            @include media-breakpoint-up(lg) {
+                max-width: inherit;
+            }
+        }
+    }
+    .section-title {
+        display: flex;
+        &::before {
+            // content: url(../svg/files.svg);
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 1.5rem;
+        }
+    }
+    li {
+        margin: 1.25rem 0;
+        @include last-item-no-margin-bottom;
+        @include first-item-no-margin-top;
+    }
+    .section_files_link {
+        border: solid 1px rgba(255, 255, 255, 0.25);
+        border-radius: 10px 10px 10px 0px;
+        text-decoration: none;
+        &:hover,
+        &:focus {
+            background: rgba(255, 255, 255, 0.09);
+            border: solid 1px rgba(255, 255, 255, 0);
+            &:after {
+                // background: url(../svg/download-arrow-blue.svg) no-repeat center #fff;
+            }
+        }
+        &:after {
+            content: "";
+            width: 30px;
+            height: 30px;
+            border: 1px solid #FFFFFF;
+            border-radius: 30px;
+            // background: url(../svg/download-arrow.svg) no-repeat center;
+            margin-right: 1rem;
+            background-size: 35%;
+            flex-shrink: 0;
+            @include media-breakpoint-up(lg) {
+                width: 60px;
+                height: 60px;
+                background-size: initial;
+                margin-right: 2.5rem;
+                flex-shrink: 0;
+            }
+        }
+        .section_files_image {
+            border-radius: 10px 10px 10px 0px;
+            flex-shrink: 0;
+            // background: url(../svg/files.svg) no-repeat center $primary; 
+            @include media-breakpoint-up(md) {
+                border: 1px solid #FFFFFF;
+            }
+            img {
+                border-radius: 10px 10px 10px 0px;
+                display: none;
+                @include media-breakpoint-up(md) {
+                    display: block;
+                }
+            }
+        }
+        &[href$=".pdf"] {
+            .section_files_image {
+                // background: url(../svg/pdf-file-icon.svg) no-repeat center $primary; 
+            }
+        }
+        &[href$=".jpg"],
+        &[href$=".jpeg"],
+        &[href$=".png"],
+        &[href$=".svg"] {
+            .section_files_image {
+                // background: url(../svg/image-file-icon.svg) no-repeat center $primary; 
+            }
+        }
+        &[href$=".mp4"],
+        &[href$=".webm"],
+        &[href$=".avi"] {
+            .section_files_image {
+                // background: url(../svg/video-file-icon.svg) no-repeat center $primary; 
+            }
+        }
+        .section_files_text {
+            font-weight: bold;
+            font-size: 18px;
+            margin: 1rem .5rem;
+            max-width: 300px;
+            margin: 1rem 1.5rem;
+            word-wrap: anywhere;
+            @include media-breakpoint-up(lg) {
+                margin: 1rem 2.5rem;
+            }
+        }
+    }
+}
+
+
+.header-section {
+    flex: 100%;
+}

package/src/scss/sections/_se-gallery.scss

@@ -0,0 +1,4 @@
+/* galerie photo */
+.section-gallery {
+    padding-bottom: 2rem;
+}

package/src/scss/sections/_se-link.scss

@@ -0,0 +1,154 @@
+.sectionlinks {
+    @include section-padding-top;
+    @include section-padding-bottom;
+    @if $enable-light-color-section-link {
+        h2,
+        span,
+        p {
+            color: #fff;
+        }
+    }
+    @if $enable-full-width-section-link {
+        // &:after{
+        //     @include full-width;
+        //     background:$section-link-background-color;
+        // }
+    }
+    background: $section-link-background-color;
+    position: relative;
+    .section_files_list {
+        @include ul-rm-padding;
+    }
+    li {
+        list-style: none;
+        .section_files_link {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .section_files_image {
+                width: 36px;
+                height: 44px;
+                margin-left: 1rem;
+                @include media-breakpoint-up(md) {
+                    width: 160px;
+                    height: 121px;
+                    margin-left: 0;
+                }
+                position: relative;
+                img {
+                    @include fit-cover;
+                }
+            }
+            .section_files_text {
+                .section_files_item_description {
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
+
+// for bal
+.sectionfiles {
+    .section-container.section_links {
+        @include media-breakpoint-up(lg) {
+            display: flex;
+            gap: 6.8181%;
+        }
+        .section_files_list {
+            margin-bottom: 0;
+            max-width: max-content;
+            @include media-breakpoint-up(lg) {
+                max-width: inherit;
+            }
+        }
+    }
+    .section-title {
+        &::before {
+            // content: url(../svg/files.svg);
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 1.5rem;
+        }
+    }
+    li {
+        margin: 1.25rem 0;
+        @include last-item-no-margin-bottom;
+        @include first-item-no-margin-top;
+    }
+    .section_files_link {
+        border: solid 1px rgba(255, 255, 255, 0.25);
+        border-radius: 10px 10px 10px 0px;
+        text-decoration: none;
+        &:hover,
+        &:focus {
+            background: rgba(255, 255, 255, 0.09);
+            border: solid 1px rgba(255, 255, 255, 0);
+            &:after {
+                // background: url(../svg/download-arrow-blue.svg) no-repeat center #fff;
+            }
+        }
+        &:after {
+            content: "";
+            width: 30px;
+            height: 30px;
+            border: 1px solid #FFFFFF;
+            border-radius: 30px;
+            // background: url(../svg/download-arrow.svg) no-repeat center;
+            margin-right: 1rem;
+            background-size: 35%;
+            @include media-breakpoint-up(lg) {
+                width: 60px;
+                height: 60px;
+                background-size: initial;
+                margin-right: 2.5rem;
+                flex-shrink: 0;
+            }
+        }
+        .section_files_image {
+            border-radius: 10px 10px 10px 0px;
+            flex-shrink: 0;
+            // background: url(../svg/files.svg) no-repeat center $primary; 
+            @include media-breakpoint-up(md) {
+                border: 1px solid #FFFFFF;
+            }
+            img {
+                border-radius: 10px 10px 10px 0px;
+                display: none;
+                @include media-breakpoint-up(md) {
+                    display: block;
+                }
+            }
+        }
+        &[href$=".pdf"] {
+            .section_files_image {
+                // background: url(../svg/pdf-file-icon.svg) no-repeat center $primary; 
+            }
+        }
+        &[href$=".jpg"],
+        &[href$=".jpeg"],
+        &[href$=".png"],
+        &[href$=".svg"] {
+            .section_files_image {
+                // background: url(../svg/image-file-icon.svg) no-repeat center $primary; 
+            }
+        }
+        &[href$=".mp4"],
+        &[href$=".webm"],
+        &[href$=".avi"] {
+            .section_files_image {
+                // background: url(../svg/video-file-icon.svg) no-repeat center $primary; 
+            }
+        }
+        .section_files_text {
+            font-weight: bold;
+            font-size: 18px;
+            margin: 1rem .5rem;
+            max-width: 300px;
+            margin: 1rem 1.5rem;
+            @include media-breakpoint-up(lg) {
+                margin: 1rem 2.5rem;
+            }
+        }
+    }
+}

package/src/scss/sections/_se-linked-content.scss

@@ -0,0 +1,4 @@
+.sectionselections{
+    @include section-padding-top;
+    @include section-padding-bottom;
+}

package/src/scss/sections/_se-plan.scss

@@ -0,0 +1,3 @@
+div#body-section-localisation {
+    padding-bottom: 2rem;
+}

package/src/scss/sections/_se-textes.scss

@@ -0,0 +1,235 @@
+.mce-content-body {
+  mark {
+    display: block;
+    padding: 20px 45px 20px 26px;
+    border: solid 4px $primary;
+    background-color: $primary;
+    border-radius: 5px;
+    border-bottom-left-radius: 0;
+    color: #fff;
+    font-weight: 500;
+  }
+
+  li {
+    position: relative;
+    display: table;
+    padding-left: 1rem;
+    margin: 0.25rem 0;
+    list-style: none;
+
+    // &::before{
+    //     content: $list-style-custom;
+    //     top: -2px;
+    //     left: 0;
+    //     position: absolute;
+    // }
+  }
+}
+
+.sectiontext {
+  font-size: $font-size-texte;
+
+  mark {
+    display: inline-block;
+    padding: $mark-padding;
+    border: $mark-border;
+    background-color: $mark-background-color;
+    border-radius: $mark-radius;
+    color: $mark-color;
+    font-weight: $mark-weight;
+  }
+
+  p {
+    padding-bottom: 1rem;
+    margin-bottom: 0;
+  }
+
+  h2 {
+    margin-top: $section-text-h2-margin-top;
+    margin-bottom: $section-text-h2-margin-bottom;
+  }
+
+  h3 {
+    margin-top: $section-text-h3-margin-top;
+    margin-bottom: $section-text-h3-margin-bottom;
+    font-weight: 500;
+  }
+
+  li {
+    position: relative;
+    display: table;
+    padding-left: 1rem;
+    margin: 0.25rem 0;
+    list-style: none;
+
+    &::before {
+      position: absolute;
+      top: -2px;
+      left: 0;
+      content: $list-style-custom;
+    }
+  }
+
+  .section-text {
+    .body-section {
+      a {
+        color: $section-text-link-color;
+        font-weight: 500;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      &.figure-left {
+        figure {
+          display: block;
+          max-width: 100%;
+          @include media-breakpoint-up(md) {
+            max-width: 45%;
+            margin-right: 2.5rem;
+            float: left;
+          }
+
+          img {
+            width: 100%;
+          }
+        }
+      }
+
+      &.figure-right {
+        figure {
+          display: block;
+          max-width: 100%;
+          @include media-breakpoint-up(md) {
+            max-width: 45%;
+            margin-left: 2.5rem;
+            float: right;
+          }
+
+          img {
+            width: 100%;
+          }
+        }
+
+        flex-direction: row-reverse;
+      }
+
+      &.figure-top {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        figure {
+          margin-top: 3rem;
+        }
+
+        .text {
+          h2:first-child {
+            margin-top: 0;
+          }
+        }
+      }
+
+      &.figure-bottom {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+      }
+
+      figure {
+        display: table;
+
+        img {
+          display: block;
+        }
+
+        figcaption {
+          // display: table-caption;
+          caption-side: bottom;
+          font-size: $font-size-sm;
+        }
+      }
+
+      .text {
+        max-width: $section-text-max-width;
+        margin: 0 auto;
+      }
+    }
+  }
+}
+
+div:not(.sectiontext) {
+  &+.sectiontext {
+    // @include section-padding-top;
+    h2 {
+      margin-top: 10px !important;
+      @include media-breakpoint-up(md) {
+        margin-top: 50px !important;
+      }
+    }
+
+    .figure-top {
+      figure {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+// quote
+blockquote {
+  margin: 0 0 1rem 2rem;
+  font-style: italic;
+  font-weight: 600;
+}
+
+blockquote::before {
+  position: relative;
+  top: 9px;
+  height: 10px;
+  margin-right: 0.25rem;
+  content: '"';
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 0;
+}
+
+blockquote::after {
+  position: relative;
+  top: 8px;
+  height: 10px;
+  content: '"';
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 0;
+}
+
+strong {
+  font-weight: bold;
+}
+
+// A supp quand la class container de la section de text est retiré du buildout
+.container.section-container.section-text {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.r-content-text {
+  li {
+    position: relative;
+    display: table;
+    padding-left: 1rem;
+    margin: 0.25rem 0;
+    list-style: none;
+
+    &::before {
+      position: absolute;
+
+      // content: $list-style-custom;
+      top: -2px;
+      left: 0;
+    }
+  }
+}