File "ep-image-accordion.scss"

Full path: /home/kosmetik/public_html/wp-content/plugins/elements-plus/assets/sass/ep-image-accordion.scss
File size: 2.75 B
MIME-type: text/plain
Charset: utf-8

Download   Open   Edit   Advanced Editor   Back

.ep-accordion-container {
  width:100%;
  max-width:100%;
  overflow:hidden;
	
	@media screen and (max-width: 767px) {
		height:auto !important;
	}

  ul {
    width:100%;
    display:flex;
    margin:0;
		padding:0;
		list-style: none;

		@media screen and (max-width: 767px) {
			flex-direction: column;
		}

    li {
			flex-grow: 1;
      position: relative;
      width:16.666%;
      background-repeat:no-repeat;
      background-position:center center;

			transition:all 500ms ease;
			
			&.active {
				width: 100%;
	
				span {        
					* {
						opacity:1;
						-webkit-transform:translateX(0);
						transform:translateX(0);
					}
					
					.ep-accordion-content {
						a {
							display: inline-block;
						}
					}
				}
			}

			@media screen and (max-width: 767px) {
				display: block;
				width:100%;
			}

      div {
        display:block;
        overflow:hidden;
				width:100%;
				height: 100%;

        span {
					display:table;
					height: 100%;
          width:100%;

          position:relative;
          z-index:3;
          vertical-align:bottom;
          padding:15px 20px;
          box-sizing:border-box;
          text-decoration:none;
          
          transition:all 200ms ease;

          * {
            opacity:0;
            margin:0;
            width:100%;
            position:relative;
            z-index:5;
            overflow:hidden;
            transform:translateX(-100%);
            -webkit-transition:all 400ms ease;
            transition:all 400ms ease;

					}
					
					.ep-accordion-content {
						padding: 10px;
						display: table-cell;
						vertical-align: bottom;

						a {
							display: none;
						}
					}

        }

      }

    }

    &:hover li,
    &:focus-within li {
			width:8%;
		}
    
    li:focus {
      outline: none;
    }

    &:hover li:hover,
    li:focus,
    &:focus-within li:focus {
			width:60%;
			
			@media screen and (max-width: 767px) {
				width:100%;
			}

      span {        
        * {
          opacity:1;
          -webkit-transform:translateX(0);
          transform:translateX(0);
				}
				
				.ep-accordion-content {
					a {
						display: inline-block;
					}
				}
      
      }

    }
    
    &:hover li {
			width: 8%;

			@media screen and (max-width: 767px) {
				width:100%;
			}
      
      span * { opacity: 0 !important; }
    }
    
    &:hover li:hover {
			width:60%;
			
			@media screen and (max-width: 767px) {
				width:100%;
			}

      span {
        
        * {
          opacity:1 !important;
          -webkit-transform:translateX(0);
          transform:translateX(0);
				}
				
				.ep-accordion-content {
					a {
						display: inline-block;
					}
				}
      }
		}

		&:hover, &:focus {
			li {
				span {
					background: transparent;
				}
			}
		}
  }
}