<div class="sociallinks">
    <ul class="sociallinks-list">
        <li class="sociallinks-item sociallinks-item-youtube" title="Youtube">
            <a class="sociallinks-link sociallinks-link-youtube" href="#" rel="noopener" target="_blank">
                <span class="sociallinks-link-icon bootstrappackageicon bootstrappackageicon-youtube"></span>
                <span class="sociallinks-link-label">Youtube</span>
            </a>
        </li>
    </ul>
</div>
{% if channels %}
<div class="sociallinks">
    <ul class="sociallinks-list">
        {% for channelKey, channelOptions in channels %}
            {% if channelOptions.url %}
                <li class="sociallinks-item sociallinks-item-{{ channelKey }}" title="{{ channelOptions.label }}">
                    <a class="sociallinks-link sociallinks-link-{{ channelKey }}" href="{{ channelOptions.url|default('#') }}" rel="noopener" target="_blank">
                        <span class="sociallinks-link-icon bootstrappackageicon bootstrappackageicon-{{ channelKey }}"></span>
                        <span class="sociallinks-link-label">{{ channelOptions.label }}</span>
                    </a>
                </li>
            {% endif %}
        {% endfor %}
    </ul>
</div>
{% endif %}
{
  "siteTitle": "Fractal",
  "headerVariant": "bootstrap-default",
  "footerVariant": "bootstrap-default",
  "settings": {
    "logo": {
      "width": null,
      "height": null,
      "linktitle": null
    }
  },
  "logo": {
    "normal": {
      "url": null,
      "holder": {
        "width": 150,
        "height": 75,
        "theme": "vine",
        "text": "Logo"
      }
    },
    "inverted": {
      "url": null,
      "holder": {
        "width": 150,
        "height": 75,
        "theme": "lava",
        "text": "Logo"
      }
    }
  },
  "theme": {
    "navigation": {
      "style": "default",
      "type": null
    },
    "meta": {
      "enable": null
    },
    "language": {
      "enable": null
    },
    "copyright": {
      "enable": null
    },
    "socialmedia": {
      "enable": null
    }
  },
  "header": {
    "mainnavigation": [
      {
        "type": "menu-main",
        "context": {
          "menu": [
            {
              "title": "Home",
              "link": "#",
              "target": null,
              "active": true,
              "current": true
            },
            {
              "link": "#",
              "title": "Customizings"
            },
            {
              "link": "#",
              "title": "Features"
            },
            {
              "link": "#",
              "title": "Pages",
              "children": [
                {
                  "link": "#",
                  "title": "Default"
                },
                {
                  "link": "#",
                  "title": "2 Columns"
                },
                {
                  "link": "#",
                  "title": "2 Columns 25/75"
                },
                {
                  "link": "#",
                  "title": "2 Columns 50/50"
                },
                {
                  "link": "#",
                  "title": "2 Columns, Offset Right"
                },
                {
                  "link": "#",
                  "title": "3 Columns"
                },
                {
                  "link": "#",
                  "title": "Simple"
                },
                {
                  "link": "#",
                  "title": "Subnavigation, Left"
                },
                {
                  "link": "#",
                  "title": "Subnavigation, Left and 2 Columns"
                },
                {
                  "link": "#",
                  "title": "Subnavigation, Right"
                },
                {
                  "link": "#",
                  "title": "Subnavigation, Right and 2 Columns"
                },
                {
                  "link": "#",
                  "title": "Feature"
                },
                {
                  "link": "#",
                  "title": "Startpage"
                }
              ]
            },
            {
              "link": "#",
              "title": "Content Examples",
              "children": [
                {
                  "link": "#",
                  "title": "Text",
                  "children": [
                    {
                      "link": "#",
                      "title": "Rich Text"
                    },
                    {
                      "link": "#",
                      "title": "Headers"
                    },
                    {
                      "link": "#",
                      "title": "Bullet List"
                    },
                    {
                      "link": "#",
                      "title": "Text with Teaser"
                    },
                    {
                      "link": "#",
                      "title": "Text and Icon"
                    },
                    {
                      "link": "#",
                      "title": "Text in Columns"
                    },
                    {
                      "link": "#",
                      "title": "List Group"
                    },
                    {
                      "link": "#",
                      "title": "Panel"
                    },
                    {
                      "link": "#",
                      "title": "Table"
                    },
                    {
                      "link": "#",
                      "title": "Quote"
                    }
                  ]
                },
                {
                  "link": "#",
                  "title": "Media",
                  "children": [
                    {
                      "link": "#",
                      "title": "Audio"
                    },
                    {
                      "link": "#",
                      "title": "Card Group"
                    },
                    {
                      "link": "#",
                      "title": "Icon Group"
                    },
                    {
                      "link": "#",
                      "title": "Gallery"
                    },
                    {
                      "link": "#",
                      "title": "Text and Images"
                    },
                    {
                      "link": "#",
                      "title": "Text and Media"
                    },
                    {
                      "link": "#",
                      "title": "File downloads"
                    },
                    {
                      "link": "#",
                      "title": "Images"
                    },
                    {
                      "link": "#",
                      "title": "Media"
                    },
                    {
                      "link": "#",
                      "title": "External Media"
                    }
                  ]
                },
                {
                  "link": "#",
                  "title": "Interactive",
                  "children": [
                    {
                      "link": "#",
                      "title": "Accordion"
                    },
                    {
                      "link": "#",
                      "title": "Carousel"
                    },
                    {
                      "link": "#",
                      "title": "Tab"
                    },
                    {
                      "link": "#",
                      "title": "Timeline"
                    }
                  ]
                },
                {
                  "link": "#",
                  "title": "Form elements",
                  "children": [
                    {
                      "link": "#",
                      "title": "Forms"
                    },
                    {
                      "link": "#",
                      "title": "Login"
                    },
                    {
                      "link": "#",
                      "title": "Search"
                    }
                  ]
                },
                {
                  "link": "#",
                  "title": "Menu's",
                  "children": [
                    {
                      "link": "#",
                      "title": "Abstract"
                    },
                    {
                      "link": "#",
                      "title": "Cards",
                      "children": [
                        {
                          "link": "#",
                          "title": "Page 1"
                        },
                        {
                          "link": "#",
                          "title": "Page 2"
                        },
                        {
                          "link": "#",
                          "title": "Page 3"
                        },
                        {
                          "link": "#",
                          "title": "Page 4"
                        },
                        {
                          "link": "#",
                          "title": "Page 5"
                        },
                        {
                          "link": "#",
                          "title": "Page 6"
                        }
                      ]
                    },
                    {
                      "link": "#",
                      "title": "Categorized"
                    },
                    {
                      "link": "#",
                      "title": "Pages"
                    },
                    {
                      "link": "#",
                      "title": "Recently Updated"
                    },
                    {
                      "link": "#",
                      "title": "Related Pages"
                    },
                    {
                      "link": "#",
                      "title": "Sections"
                    },
                    {
                      "link": "#",
                      "title": "Sitemap"
                    },
                    {
                      "link": "#",
                      "title": "Thumbnails",
                      "children": [
                        {
                          "link": "#",
                          "title": "Page 1"
                        },
                        {
                          "link": "#",
                          "title": "Page 2"
                        },
                        {
                          "link": "#",
                          "title": "Page 3"
                        },
                        {
                          "link": "#",
                          "title": "Page 4"
                        },
                        {
                          "link": "#",
                          "title": "Page 5"
                        },
                        {
                          "link": "#",
                          "title": "Page 6"
                        }
                      ]
                    }
                  ]
                },
                {
                  "link": "#",
                  "title": "Special elements",
                  "children": [
                    {
                      "link": "#",
                      "title": "Insert records"
                    },
                    {
                      "link": "#",
                      "title": "HTML"
                    },
                    {
                      "link": "#",
                      "title": "Divider"
                    }
                  ]
                },
                {
                  "link": "#",
                  "title": "And more...",
                  "children": [
                    {
                      "link": "#",
                      "title": "Frames"
                    },
                    {
                      "link": "#",
                      "title": "Images with links"
                    },
                    {
                      "link": "#",
                      "title": "Languages and characters"
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    ]
  },
  "breadcrumb": [
    {
      "title": "Startpage"
    },
    {
      "title": "Subpage"
    },
    {
      "title": "Current Page"
    }
  ],
  "border": [
    {
      "type": "text",
      "context": {
        "bodytext": "Border"
      }
    }
  ],
  "footer_content": {
    "left": [
      {
        "type": "text",
        "context": {
          "bodytext": "Footer: Left"
        }
      }
    ],
    "center": [
      {
        "type": "text",
        "context": {
          "bodytext": "Footer: Center"
        }
      }
    ],
    "right": [
      {
        "type": "text",
        "context": {
          "bodytext": "Footer: Right"
        }
      }
    ],
    "newsletter": [
      {
        "type": "forms",
        "context": {
          "background_color_class": "dark",
          "frame_class": "section footer-section footer-section-newsletter",
          "form": {
            "submit": {
              "label": "Submit"
            },
            "fieldsets": [
              {
                "label": "Newsletter",
                "elements": [
                  {
                    "type": "input",
                    "context": {
                      "label": "Email",
                      "placeholder": "Please enter your email",
                      "required": true
                    }
                  }
                ]
              }
            ]
          }
        }
      }
    ]
  },
  "footer": {
    "meta": [
      {
        "type": "menu-meta",
        "context": {
          "menu": [
            {
              "title": "Imprint"
            },
            {
              "title": "Privacy"
            }
          ]
        }
      }
    ],
    "language": [
      {
        "type": "menu-language",
        "context": {
          "menu": [
            {
              "title": "English",
              "active": true
            },
            {
              "title": "German"
            },
            {
              "title": "French (not available)",
              "available": false
            }
          ]
        }
      }
    ],
    "copyright": [
      {
        "type": "text",
        "context": {
          "space_inner_before_class": "none",
          "space_inner_after_class": "none",
          "bodytext": "© copyright Project {{ \"now\"|date(\"Y\") }}"
        }
      }
    ],
    "sociallinks": {
      "channels": {
        "facebook": {
          "label": "Facebook",
          "url": "#"
        },
        "instagram": {
          "label": "Instagram",
          "url": "#"
        },
        "youtube": {
          "label": "Youtube",
          "url": "#"
        }
      }
    }
  },
  "channels": {
    "youtube": {
      "label": "Youtube",
      "url": "#"
    }
  }
}
  • Content:
    .sociallinks-link .bootstrappackageicon {
      display: inline-block;
    
      &-facebook {
        @extend .svg-social-facebook-26x26;
      }
    
      &-instagram {
        @extend .svg-social-instagram-26x26;
      }
    
      &-linkedin {
        @extend .svg-social-linkedin-26x26;
      }
    
      &-twitter {
        @extend .svg-social-twitter-26x26;
      }
    
      &-xing {
        @extend .svg-social-xing-26x26;
      }
    
      &-youtube {
        @extend .svg-download-youtube-26x26;
      }
    }
    
    /* Footer social links */
    .footer-sociallinks .sociallinks-link {
      filter: invert(100%) hue-rotate(93deg) brightness(103%) contrast(103%);
      height: 30px;
      width: unset;
    
      .sociallinks-link-label {
        font-size: 0;
      }
    }
    
    /* Content social links */
    .frame-type-social_links {
        .sociallinks-item {
          @include Rift-Regular;
          border: $border-width solid $border-color;
          /*box-shadow: $box-shadow;*/
          padding: 15px 30px;
          margin: 0 0 15px 0;
          text-transform: uppercase;
          font-size: $h5-font-size;
    
          .sociallinks-link {
            display: block;
          }
    
          .sociallinks-link-label {
            margin-left: 1rem;
          }
        }
    }
  • URL: /components/raw/page-component-sociallinks/_sociallinks.scss
  • Filesystem Path: ../template/components/04-site/component/sociallinks/_sociallinks.scss
  • Size: 1.1 KB

No notes defined.