b0y-101 Mini Shell


Current Path : E:/www2/kidsbangna/wp-content/themes/newspaper-x/assets/sass/site/secondary/
File Upload :
Current File : E:/www2/kidsbangna/wp-content/themes/newspaper-x/assets/sass/site/secondary/_widgets.scss

.newspaper-x-blog-sidebar {
  /**
  * Search Widget is a little different, does not have border
  */
  .widget_search {
    .widget-title {
      display: none;
    }
    h3{
        text-transform: uppercase;
        font-size: 20px;
        margin-bottom: 20px;
        color: $color_text-color;
    }
    margin-bottom: 30px;
  }

  select {
    padding: 10px;
  }

  // Add margin bottom
  .widget_newspaper_x_banner, .widget_text {
    margin-bottom: 30px;
    overflow: hidden;
    select {
      width: 100%;
    }
  }
  /**
  * Select all widgets except for the search box
  */
  .widget:not(.widget_search):not(.widget_newspaper_x_banner):not(.widget_text) {
    /**
    * add the border + paddings
    */
    @extend .widget-bordered;
    margin: 0 0 30px;
    /**
    * Style the header by adding background
    */
    > h3 {
      @extend .widget-title-styled;
    }
    /**
    * Reset the margins for UL / OL
    */
    > ul, > ol {
      margin: 0;
      padding: 0px 0px 30px 0px;
      list-style-type: none;
    }
    /* Make sure select elements fit in widgets. */
    select {
      max-width: 100%;
      option {
        max-width: 233px;
      }
    }
    &.widget_nav_menu {
      > div {
        > ul {
          margin: 0;
          padding: 0px 18px 30px 18px;
          li > ul {
            margin-left: 0;
          }
        }
      }
    }
    /**
    * Style the widget meta
    */
    &.widget_meta{
    	ul{
    		li{
		    	font-size: 15px;
		    	font-family: $font__main;
		    	a{
		    		color: #8c9597;;
		    		&:hover, &:focus {
		    			color:$color_contrast-hover;
		    		}
		    	}
    		}
    	}
    }
    /**
    * Style the widget rss
    */
    &.widget_rss{
    	ul{
    		li{
		    	font-size: 15px;
		    	color: $color_text-color;
		    	margin-bottom: 50px;
		    	font-family: $font__main;
		    	a{
		    		color: $color_text-color;
		    		font-size: 18px;
		    		font-weight: 700;
		    		&:hover, &:focus {
		    			color:$color_contrast-hover;
		    		}
		    	}
		    	.rss-date{
		    		color: #bfbfbf;
		    		font-size: 12px;
		    		display:block
		    	}
		    	.rssSummary{
		    		color:#8b8d91;
		    		margin-top: 10px;
		    	}
		    	cite{
		    		font-style: initial;
		    	}
    		}
    	}
    }
    /**
    * Style the recent comments
    */
    &.widget_recent_comments{
    	ul{
    		li{
		    	margin-bottom: 15px;
		    	font-size: 15px;
		    	color: #8b8d91;
		    	font-family: $font__main;
		    	a{
		    		color: $color_main-accent;
		    		&:hover, &:focus {
		    			color:$color_contrast-hover;
		    		}
		    	}
    		}
    	}
    }
    /**
    * Style the recent posts
    */
    &.widget_recent_entries{
    	ul{
    		li{
		    	margin-bottom: 15px;
		    	font-family: $font__main;
		    	a{
		    		font-size: 15px;
		    		color: #8b8d91;
		    		&:hover, &:focus {
		    			color:$color_contrast-hover;
		    		}
		    	}

		    	span{
		    		display:block;
		    		color: #bfbfbf;
		    		font-size: 12px;
		    	}
    		}
    	}
    }
    /**
    * Style the tag cloud
    */
    &.widget_tag_cloud {
    	font-family: $font__main;
      .tagcloud {
        padding: 0px 0px 30px 0px;
        h3{
        	font-size:20px;
        }
        a{
          white-space: nowrap !important;
	      	padding: 4px 9px 4px 9px;
	      	margin: -2px 5px;
	      	border: 1px solid #7c95b1;
	      	line-height: 45px;
	      	font-size: 15px !important;
	      	&:hover, &:focus {
	        	background: $color_main-accent;
	        	color: #fff;
	        	border: 1px solid $color_main-accent;
	    	}
    	}
      }
    }
    /**
    * Style the categories and archive widgets
    */
    &.widget_categories, &.widget_archive {
      /**
      * Dropdown categories/archives
      */
      > select {
        width: 100%;
        display: block;
        margin: 0 auto;
        margin-bottom: 30px;
        padding: 10px;
      }

      > ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        font-size: 15px;
        color: $color__text-main;
        > li {
          padding-bottom: 10px;
          margin-bottom: 10px;
          border-bottom: 1px dotted #e1e1e1;
          &:last-of-type {
            border-bottom: none;
            margin-bottom: 20px;
          }
          &:hover,
          &:focus {
            a, .newspaper-x-cat-count{
              text-decoration: none;
              color: $color_contrast-hover;
            }
          }
          a {
            color: #8b8d91;;
            &:hover,
            &:focus {
              text-decoration: none;
              color: $color_brand-newspaper-x;
            }
          }

          .newspaper-x-cat-count {
            float: right;
            color: #8b8d91;
            font-family: $font__main;
            font-size: 15px;
            &:before{
             content: "(";
            }
            &:after{
             content: ")";
            }
          }
        }
      }
      .children {
        list-style-type: none;
        margin-left: 0;
        padding-left: 25px;
        > li {
          margin-top: 10px;
          padding-top: 10px;
          border-top: 1px dotted #e1e1e1;
        }
      }
    }
    &.widget_nav_menu {
      > div {
        ul {
          list-style-type: none;
        }
        > ul {
          padding: 0px;
          .sub-menu {
            padding-left: 10px;
          }
        }
      }
    }
    /**
    * Calendar restyling. The title will always be hidden.
    */
    &.widget_calendar {
      padding: 0px;
      position: relative;
      .widget-title, h3 {
        display: none;
      }
      #wp-calendar {
        font-family: $font__main;
        width: 100%;
        font-size: 14px;
        font-weight: 300;
        border-collapse: separate;
        border-spacing: 4px;
        margin-left: 1px;
        > caption {
          border: 1px solid #e1e1e1;
          color: #001c28;
          font-famiy: $font__main;
          text-align: center;
          font-size: 20px;
          font-weight: 700;
          padding-bottom: 22px;
          padding-top: 22px;
          min-height: 55px;
          position: relative;
          margin-bottom: 20px;
        }
        th{
        	text-align: center;
        	color:$color_text-color;
        }
        .pad{
        	display:none;
        }
        td {
        	color: #8b8d91;
        	margin-bottom:10px;
    			text-align:center;
    			border:1px solid #e1e1e1;
    			padding: 9px 5px;
          &#today{
          	color:#fff;
          	background: $color_main-accent;
          	a{
          		color:#fff;

          	}
          	&:hover, &:focus {
	              background: $color_contrast-hover;
	        }
          }
          &:hover, &:focus {
          		color:#fff;
	            background: $color_contrast-hover;
	            a{
	            	color:#fff;
	            }
	      }
          a {
            color: $color_brand-newspaper-x;
            text-decoration: none;
            &:hover, &:focus {
              text-decoration: none;
              color:#fff;
            }
          }
        }
        #prev {
          border: none;
          position: absolute;
          top: -2px;
          left: 5%;
          width: 35px;
          height: 55px;
          background-color: transparent;
          color: #FFF;
          &:before {
            content: '\f104';
            display: block;
            font-size: 14px;
            line-height: 55px;
            text-align: center;
            position: relative;
            color: $color__text-title;
            font-family: 'FontAwesome';
          }
          > a {
            top: 20px;
            position: absolute;
            color: transparent;
          }
        }
        #next {
          border: none;
          position: absolute;
          top: -2px;
          right: 5%;
          width: 35px;
          height: 55px;
          background-color: transparent;
          color: #FFF;
          &:before {
            content: '\f105';
            display: block;
            font-size: 14px;
            line-height: 55px;
            text-align: center;
            position: relative;
            color: $color__text-title;
            font-family: 'FontAwesome';
          }
          > a {
            top: 20px;
            position: absolute;
            color: transparent;

          }
        }
        thead {
          border: none;
          color: $color_text-color !important;
        }
      }
    }
  }
}

.newspaper-x-content, .newspaper-x-after-content-sidebar {
  .widget-title {
    @extend .section-title;
  }
}

.widget-bordered {
  position: relative;
}

.widget-title-styled {
  color: $color__text-title;
  padding: 18px 0px;
  display: block;
  text-transform: uppercase;
  font-famiy: $font__main;
  font-size: 20px;
  font-weight: 700;
  margin-top: 5px;
  margin-bottom: 10px;
  position: relative;
}

.site-footer {
  p {
    color: #a9afb5;
    font-family: $font__main;
  }
  .newspaper-x-contact-p {
    strong {
      color: $font__main;
    }
    margin-bottom: 0;
  }

  .newspaper-x-contact-logo {
    margin-top: 20px;
  }
  .widget_recent_entries{
    ul{
      margin: 0px;
      padding: 0px;
      li{
        list-style:none;
        margin-bottom:20px;
        a{
          color: #a9afb5;
          &:hover, &:focus {
		    	color:$color_contrast-hover;
		    }
        }
        .post-date{
          display: block;
          color: #455263;
          font-size: 12px;
        }
      }
    }
  }
  .widget {
    font-size: 15px;
    font-family: $font__main;
    color: #a9afb5;
    position: relative;
    padding: 15px;
    z-index: 1;


    h3 {
      font-family: $font__main;
      font-size: 20px;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 25px;
      color: #FFF;
    }

    &.widget_newspaper_x_recent {
      .newspaper-x-recent-post-widget {
        height: 65px;
        margin-left: 0;
        margin-right: 0;
        .newspaper-x-title {
          h3 {
            margin-bottom: 15px;
          }
        }

        .newspaper-x-post-content {
          width: 225px;
          @media (max-width: 1199px) {
            width: 187px;
          }
        }
      }
    }

    &.widget_categories {
      padding-right: 0px;
      position: relative;
      > ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        font-size: 15px;
        color: $color__text-title;
        > li {
          padding-bottom: 5px;
          margin-bottom: 5px;
          border-bottom: 1px dotted transparentize(#e1e1e1, 0.9);
          &:last-of-type {
            border-bottom: none;
          }
          &:hover,
			&:focus-within {
				a, .newspaper-x-cat-count{
				text-decoration: none;
				color: $color_contrast-hover;
				}
			}
          a {
            color: #a9afb5;
            font-family: $font__main;
            font-weight: 400;
          }

          .newspaper-x-cat-count {
            float: right;
            color: #2c3745;
            font-family: $font__main;
            font-size: 12px;
            &:before{
             content: "(";
            }
            &:after{
             content: ")";
            }
          }
        }
      }
      .children {
        list-style-type: none;
        margin-left: 0;
        padding-left: 25px;
        > li {
          margin-top: 10px;
          padding-top: 10px;
          border-top: 1px dotted transparentize(#e1e1e1, 0.9);
        }
      }
    }
    /**
    * Style the recent comments
    */
    &.widget_recent_comments{
    	ul{
    		padding:0px;
    		li{
    			list-style: none;
		    	margin-bottom: 15px;
		    	font-size: 15px;
		    	color: #a9afb5;
		    	font-family: $font__main;
		    	a{
		    		color: #fff;
		    		&:hover, &:focus {
		    			color:$color_contrast-hover;
		    		}
		    	}
    		}
    	}
    }
    /**
    * Style the meta
    */
     &.widget_meta{
    	ul{
    		padding:0px;
    		li{
    			list-style: none;
		    	font-size: 15px;
		    	font-family: $font__main;
		    	a{
		    		color: #a9afb5;;
		    		&:hover, &:focus {
		    			color:$color_contrast-hover;
		    		}
		    	}
    		}
    	}
    }
     /**
    * Style the footer search
    */
    &.widget_search{
    	padding-right: 0px;
    	#searchform{
    		border-color: #001b30;
    		.search-submit{
    			color: #002135;
    		}
    		label{
    			input[type="search"]{
    			    width:100%;
    			    background:none;
    			    color:#fff;
				}
			    ::-moz-placeholder {
                	opacity: 1;
                	color:#fff;
 				}
 				::-webkit-input-placeholder {
 					opacity: 1;
 					color:#fff;
 				}
    		}
    		&:hover,
    		&:focus{
    			border-color: #053052;
    		}
    	}
    }
    /**
    * Calendar restyling. The title will always be hidden.
    */
    &.widget_calendar {
      padding: 0px;
      position: relative;
      .widget-title, h3 {
        display: none;
      }
      #wp-calendar {
        color: $font__main;
        width:100%;
    		font-size:14px;
    		font-weight:300;
    		border-collapse:separate;
    		border-spacing:4px;
    		margin-left:1px;
        > caption {
          border: 1px solid #002438;
          color: #a9afb5;
          font-famiy: $font__main;
          text-align: center;
          font-size: 20px;
          font-weight: 700;
          padding-bottom: 22px;
          padding-top: 22px;
          min-height: 55px;
          position: relative;
          margin-bottom: 20px;
        }
        th{
        	text-align: center;
        	color:#a9afb5;
        }
        .pad{
        	display:none;
        }
        td {
        	color: #a9afb5;
          margin-bottom:10px;
    			text-align:center;
    			border:1px solid #002438;
    			padding: 9px 5px;
         	&#today{
	          	color:#fff;
	          	background: $color_main-accent;
	          	border-color: $color_main-accent;
	          	a{
	          		color:#fff;

	          	}
	          	&:hover, &:focus {
		              background: $color_contrast-hover;
		              border-color: $color_contrast-hover;
		        }
	        }
          	&:hover, &:focus {
          		color:#fff;
	            background: $color_contrast-hover;
	            border-color: $color_contrast-hover;
	            a{
	            	color:#fff;
	            }
	      }
          a {
            color: $color_brand-newspaper-x;
            text-decoration: none;
            &:hover, &:focus {
              text-decoration: none;
              color:#fff;
            }
          }
        }
        #prev {
          border: none;
          position: absolute;
          top: -3px;
          left: 5%;
          width: 35px;
          height: 55px;
          background-color: transparent;
          color: #FFF;
          &:before {
            content: '\f104';
            display: block;
            font-size: 14px;
            line-height: 55px;
            text-align: center;
            position: relative;
            color: #a9afb5;
            font-family: 'FontAwesome';
          }
          > a {
            top: 20px;
            position: absolute;
            color: transparent;
          }
        }
        #next {
          border: none;
          position: absolute;
          top: -3px;
          right: 5%;
          width: 35px;
          height: 55px;
          background-color: transparent;
          color: #FFF;
          &:before {
            content: '\f105';
            display: block;
            font-size: 14px;
            line-height: 55px;
            text-align: center;
            position: relative;
            color: #a9afb5;
            font-family: 'FontAwesome';
          }
          > a {
            top: 20px;
            position: absolute;
            color: transparent;

          }
        }
        thead {
          border: none;
          color: $color_text-color !important;
        }
      }
    }
    /**
    * Style the tag cloud
    */
    &.widget_tag_cloud {
    	font-family: $font__main;
      .tagcloud {
        h3{
        	font-size:20px;
        }
        a{
        	color:#a9afb5;
	      	padding: 4px 9px 4px 9px;
	      	margin: -2px 5px;
	      	border: 1px solid #001c31;
	      	line-height: 45px;
          white-space: nowrap !important;
	      	font-size: 15px !important;
	      	&:hover, &:focus {
	        	background: $color_main-accent;
	        	color: #fff;
	        	border: 1px solid $color_main-accent;
	    	}
    	}
      }
    }
    /**
    * Style the widget rss
    */
    &.widget_rss{
    	ul{
    		padding:0px;
    		li{
    			list-style:none;
		    	font-size: 15px;
		    	color: #f1f1f1;
		    	margin-bottom: 50px;
		    	font-family: $font__main;
		    	a{
		    		color: #f1f1f1;
		    		font-size: 18px;
		    		font-weight: 700;
		    		&:hover, &:focus {
		    			color:$color_contrast-hover;
		    		}
		    	}
		    	.rss-date{
		    		color: #a9afb5;
		    		font-size: 12px;
		    		display:block
		    	}
		    	.rssSummary{
		    		color:#a9afb5;
		    		margin-top: 10px;
		    	}
		    	cite{
		    		font-style: initial;
		    		color: #f1f1f1;
		    	}
    		}
    	}
    }
    &.widget_archive {
      padding-right: 0px;
      position: relative;
      > ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        font-size: 15px;
        color: $color__text-title;
        > li {
          padding-bottom: 5px;
          margin-bottom: 5px;
          border-bottom: 1px dotted transparentize(#e1e1e1, 0.9);
          &:last-of-type {
            border-bottom: none;
          }
          &:hover,
            &:focus {
              a, .newspaper-x-cat-count{
                text-decoration: none;
                color: $color_contrast-hover;
              }
            }
          a {
            color: #a9afb5;
            font-family: $font__main;
            font-weight: 400;
          }

          .newspaper-x-cat-count {
            float: right;
            color: #2c3745;
            font-family: $font__main;
            font-size: 12px;
            &:before{
             content: "(";
            }
            &:after{
             content: ")";
            }
          }
        }
      }
      .children {
        list-style-type: none;
        margin-left: 0;
        padding-left: 25px;
        > li {
          margin-top: 10px;
          padding-top: 10px;
          border-top: 1px dashed #e1e1e1;
        }
      }
    }
  }
  .contact-widget{
    div{
      margin-bottom:12px;
      span{
        font-size:15px;
        color:#fff;
        font-weight:700;
      }
      a{
        color:#a9afb5;
        font-size:15px;
        font-family: $font__main;
        &:hover, &:focus {
          color:$color_contrast-hover;
        }
      }
    }
    #social-contact{
      padding-left:0px;
      margin-top:25px;
        li{
	        display:inline;
	      a{
            &:before {
            content: '\f408';
            display: inline-block;
            font-family: 'FontAwesome';
            font-size: 11px;
            -webkit-font-smoothing: antialiased;
            padding: 2px 11px 2px 12px;
            margin-right: 7px;
            border-radius:20px;
            margin-bottom: 10px;
          }
          span{
            display:none;
          }
          /* Add the social links depending on the link href */
            &[href*="wordpress.org"]::before,
            &[href*="wordpress.com"]::before {
              content: '\f19a';
              background: #21759b;
              padding: 2px 9px 2px 11px;
            }
            &[href*="facebook.com"]::before {
              content: '\f09a';
              background: #3b5998;
            }
            &[href*="twitter.com"]::before {
              content: '\f099';
              background: #38a4f0;
              padding: 2px 9px 2px 10px;
              margin-right: 7px;
            }
            &[href*="dribbble.com"]::before {
              content: '\f17d';
              background: #ea4c89;
              padding: 2px 10px 2px 10px;
            }
            &[href*="plus.google.com"]::before {
              content: '\f0d5';
              background: #ed3521;
              padding: 2px 9px 2px 7px;
              margin-right: 7px;
            }
            &[href*="pinterest.com"]::before {
              content: '\f231';
              background: #c8232c;
            }
            &[href*="github.com"]::before {
              content: '\f09b';
              background: #171515;
            }
            &[href*="tumblr.com"]::before {
              content: '\f173';
              background: #36465d;
              padding: 2px 11px 2px 12px;
              margin-right: 5px;
            }
            &[href*="youtube.com"]::before {
              content: '\f167';
              background: #d10027;
              padding: 2px 11px 2px 11px;
            }
            &[href*="flickr.com"]::before {
              content: '\f16e';
              background: #ff0084;
              padding: 2px 11px 2px 11px;
            }
            &[href*="vimeo.com"]::before {
              content: '\f27d';
              background: #1AB7EA;
              padding: 2px 10px 2px 9px;
            }
            &[href*="instagram.com"]::before {
              content: '\f16d';
              background: #3f729b;
              padding: 2px 10px 2px 11px;
            }
            &[href*="codepen.io"]::before {
              content: '\f1cb';
              background: #000;
              padding: 2px 9px 2px 10px;
            }
            &[href*="linkedin.com"]::before {
              content: '\f0e1';
              background: #0e76a8;
              padding: 2px 9px 2px 11px;
            }

            color: #fff;
            &:hover, &:focus {
            	color:#fff;
              opacity: 0.9;
            }
          }
      }
    }
  }
}

Copyright © 2019 by b0y-101