.widget { margin-bottom: 20px; overflow: hidden; ul { margin: 0 } li { border-bottom:1px solid black(0.1); list-style: none; margin: 0 0 10px; padding: 0 0 10px; li { border-bottom: none; margin-bottom: 0; margin-top: 10px; } } .children { border-top: 1px solid black(0.1); padding-left: 20px; margin-top: 10px; li { border-bottom: 1px solid black(0.1); &:last-child { border-bottom: 0; padding-bottom: 0 } } } .menu li { display: block; float: none } } .widget-title { font-family: $font__widget-title; font-size: 24px; font-weight: 700; margin-bottom: 20px; text-transform: capitalize; } .sidebar-widget { background-color: #fff; border-top: 4px solid #2A2D33; outline: 1px solid #F5F5F5; list-style: none; margin-bottom: 45px; padding: 20px; position: relative; a { color:#2A2D33; &:hover { color: $color__primary; } } li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0 } } /*-----------------------------------------------------------------------------------*/ /* 10. Widgets /*-----------------------------------------------------------------------------------*/ /*---[ Recent Posts ]---*/ .recent-posts-widget { clear:both; padding:0 } .category-posts, .recent-posts, .random-posts, .popular-posts { margin: 0; padding: 0; li { list-style: none; overflow: hidden; } } /*---[ Search Form ]---*/ .searchform { fieldset { float: left; color: #888; width: 85%; } } .s { background: #fff; border: 0; color: #60656f; float: left; font-size: 14px; height: 55px; outline: 0; padding: 10px 0 9px; text-indent: 15px; width: 100%; } .search-button { background: #fff; border: 0; color: #6B6F79; cursor: pointer; display: block; float: left; font-family: 'Lato', sans-serif; font-size: 16px; height: 55px; min-width: 13px; text-transform: capitalize; width: 15%; &:hover { background: #000 } } .sidebar-widget.widget_search { background: #f5f5f5; border: 0; } header { .searchform { background: #fff; float: right; width: 100%; i { position: absolute; top: 18px; right: 10px; z-index: 10; } fieldset { border: 0; margin: 0; } .s { background: #222121; border-bottom: 2px solid white(0.2); color: #b8b8b8; float: left; padding: 8px 30px 8px 0; text-align: right; width: 0; height: 54px; opacity: 0; position: absolute; right: 54px; z-index: 99; @include transition(all,0.45s,ease-in-out); } } .search-button { background-color: transparent; color: #41433F; position: relative; width: 54px; height: 54px; z-index: 999; &:hover { background-color: transparent; } } } .header-search:hover .s, .header-search .s:focus { opacity: 1; width: 230px } /*---[ Tags ]---*/ .sidebar .tagcloud { overflow:hidden } .tagcloud a { background: black(0.08); border: 0; color: #64676A !important; display: block; float: left; font-size: 12px !important; margin: 0 4px 4px 0; padding: 5px 12px 5px 12px; position: relative; text-transform: capitalize; &:hover { background: #3a3a3a; color: #fff !important } } .footer .tagcloud a { background: #fff; } /*---[ Social Widget ]---*/ .social-widget { li { border: 0; float: left; font-size: 14px; list-style-type: none; margin-bottom: 4px; margin-left: 2px; margin-right: 2px; padding: 0 } } .social-widget ul li span { color: #fff; float: left; font-size: 16px; width: 40px; padding: 12px 0; text-align: center; @include transition(); } .social-widget .facebook span { background:#3b5999 } .social-widget .twitter span { background:#00aced } .social-widget .gplus span { background:#ff4444 } .social-widget .rss span { background:#ff8800 } .social-widget .pinterest span { background:#cc2127 } .social-widget .linkedin span { background:#017eb4 } .social-widget .flickr span { background:#fe0084 } .social-widget .instagram span { background:#854e3a } .social-widget .youtube span { background:#cc181e } .social-widget .tumblr span { background:#274057 } .social-widget .dribble span { background:#ea4c89 } .social-widget .git span { background:#333333 } .social-widget .xing span { background:#015960 } /*---[ 125x125 Ads ]---*/ .ad-125-widget { clear: both; margin: 0; overflow: hidden; padding: 0; ul, li { border:0; list-style:none; margin:0; } li { padding: 0; width: 42% } .adleft { float: left; margin: 0 5% 10px 0; } .adright { float: right; margin: 0 0 10px; } } /*---[ 300x250 Ads ]---*/ .ad-300-widget { clear: both; margin: 0 auto; max-width: 300px; width: 100%; } /*---[ Tabs ]---*/ .tabs-widget { margin-bottom: 0; .tabs { list-style: none; margin: 0 0 15px; overflow: hidden; } } .tabs { li { border: 0; float: left; font-family: 'PlayfairDisplay',sans-serif; margin: 0 20px 0 0; padding: 0; position: relative; } a { border-bottom: 3px solid #e0e0e0; color: #bebebe; display: block; font-size: 20px; font-weight: 700; line-height: 26px; padding: 8px 5px; text-transform: capitalize } .active a { border-color: $color__primary; color: #333 } } .tabs-content { ul { margin: 0; padding: 0 } li { margin: 0 0 10px; overflow: hidden; padding: 0 0 14px; &:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0 } } } .tab-content { display: none } /*---[ Popular Posts ]---*/ .widgetthumb { float: left; margin: 4px 10px 0 0; width: 100% } .popular-posts { display: block } .thumbnail { float: left; margin-right: 10px; position: relative; max-width: 27.5%; width: 65px } .thumbnail-big { float: none; margin: 0 0 10px; max-width: 100%; width: 100% } .widget .info { overflow: hidden } .widgettitle { display: block; font-family: 'Playfair Display', sans-serif; font-size: 18px; font-weight: 700; line-height: 26px; margin-bottom: 6px } .footer .info { overflow: hidden } .side-meta, .r-meta { color: $color__widget-meta; display: block; font-size: 14px; } .side-meta a { color: inherit } .side-meta .post-author, .side-meta .post-comments, .side-meta .post-cats, .side-meta time { margin-right: 10px } .widget_popular_widget, .widget_cat_posts_widget, .widget_random_widget, .widget_tabs_widget, .widget_recent-posts-widget { } /*---[ Author Widget ]---*/ .sidebar{ .widget_author_info_widget{ border-top: 4px solid #F6CC4C; } } .author-info-widget { .author-avatar { margin-bottom: 15px; img { width: 100%; } } h4 { margin-bottom: 5px; text-transform: capitalize; } .author-description { margin-bottom: 15px } .author-social{ span{ font-size: 16px; color: #4F5461; margin-right: 10px } } } /*---[ Flickr Widget ]---*/ .flickr_badge_image { display: inline; margin: 0; img { float: left; margin: 0 0 6px; padding: 0 3px } } /*---[ Calendar Widget ]---*/ .widget [id="wp-calendar"] { background: #f3f3f3; text-transform: capitalize; width: 100%; caption, th, td { text-align: center } th { background: #f3f3f3; padding: 10px 0; } td { background: #fafafa; padding: 5px 0; } caption { background: $color__primary; color: #fff; font-size: 14px; padding: 10px 0; } tfoot { a { font-weight: 700; } tr td { padding-left: 10px; text-align: left; } } td[id="today"], td[id="today"] a { color:#fff } } /*---[ Subscribe Widget ]---*/ .widget_subscription_widget { color: $color__primary; padding: 20px; } .subscribe-widget { h3 { margin-bottom: 15px } p { text-transform: capitalize; color: #2A2D33; } input { background-color: #fff; border: none; padding: 15px; float: left; width: 86%; } .submit-button { background: #2A2D33; border: none; cursor: pointer; float: left; color: #fff; padding: 10px 15px; font-size: 22px; width: 14% } }