stylesheets/_iasd-widgets.scss in iasd-bootstrap-sass-1.5.0 vs stylesheets/_iasd-widgets.scss in iasd-bootstrap-sass-1.6.0

- old
+ new

@@ -82,13 +82,16 @@ left: 0 !important; } } } } - +.iasd-widget-apps-btn { + text-transform: initial; + margin: 7px 0; +} .iasd-widget{ - margin-bottom: 50px; + margin-bottom: 50px; a{ color: $text-color !important; &:hover, &:focus{ h2{ color: $theme-main-color; @@ -1295,11 +1298,23 @@ } /* ************** */ /* Slider widgets */ /* ************** */ +.highlights { + .owl-carousel { + &.header { + .slider-item { + a.iasd-app-card { + border: #FFF !important; + } + } + } + } +} + .iasd-widget-slider{ &.highlights { .owl-carousel { &.header { .slider-item { @@ -2476,9 +2491,462 @@ } .iasd-widget-thumbnail { margin-top: 35px; } + +/* ***************** */ +/* Apps Widget */ +/* ***************** */ + + +.iasd-widget-slider { + .iasd-apps { + .owl-wrapper-outer { + background: none !important; + } + .owl-controls { + .owl-buttons { + & > div{ + @include opacity(1); + position: relative; + bottom: 0; + background: none; + padding: 0; + margin: 20px 30px 0 30px; + height: 17px; + width: 10px; + z-index: 10; + &:after{ + background: rgba($gray-darker, 0.15); + display: block; + font-family: FontAwesome; + font-size: 18px; + height: 40px; + line-height: 40px; + position: absolute; + text-align: center; + } + } + .owl-prev { + &:after { + content: ""; + position: absolute; + display: block; + width: 10px; + height: 17px; + background: image-url( 'widgets/slider_apps_prev.png' ) no-repeat; + } + } + .owl-next { + &:after { + content: ""; + position: absolute; + display: block; + width: 10px; + height: 17px; + background: image-url( 'widgets/slider_apps_next.png' ) no-repeat; + } + } + } + } + } + > figure { + figcaption { + background: $theme-main-color; //IE8 Fallback :( + background: rgba($theme-main-color, .9); + top: 10px !important; + height: 20px !important; + left: 0 !important; + margin: 0; + max-width: 90%; + overflow: visible; + padding: 0; + position: absolute; + span { + @include text-overflow(); + color: $body-bg; + display: inline-block; + font-family: $alt-font-family-sans-serif; + font-size: 10px; + font-weight: 500; + line-height: 12px; + padding: 4px 5px; + text-transform: uppercase; + width: 100%; + } + &:after { + border: { + color: transparent transparent transparent $theme-main-color; //IE8 Fallback :( + color: transparent transparent transparent rgba($theme-main-color, .9); + style: solid; + width: 10px 0 10px 7px; + } + content: ''; + height: 0px; + position: absolute; + right: -7px; + top: 0; + width: 0px; + } + } + } +} + + +@media (max-width: $screen-xs) { + .iasd-widget-slider { + .slider-item { + padding: 5px; + } + .iasd-apps { + h1 { + @include main-title; + @include text-overflow(); + margin: 0 0 20px 0 !important; + } + .iasd-app-card { + padding: 5px; + width: 100%; + h3 { + &:hover, &:focus { + border-bottom: 0; + } + } + figure, h3, .iasd-app-dev { + width: 100%; + } + ul { + padding: 0 !important; + } + .iasd-app-card-inner { + padding: 5px; + } + } + } + } +} + +// WIDGET DE DESTAQUES DOS APPS + +.iasd-widget-slider { + .iasd-apps-widget-highlights { + .owl-carousel { + .owl-wrapper-outer { + background: none; + > .iasd-app-card { + border: none; + } + } + } + } +} + +.iasd-apps-widget-highlights { + padding-top: 40px; + .app-highlights-title { + width: 20%; + padding-right: 10px; + float: left; + h1 { + width: auto; + margin: 0; + padding-top: 30px; + border-top: solid 1px rgba(251, 246, 240, 0.5); // Alterado por WDR + border-bottom: 0; + box-shadow: none; + font-size: 25px; + font-weight: 300; + font-family: $alt-font-family-sans-serif; + text-transform: uppercase; + color: $body-bg; + } + p { + margin-bottom: 5px 0 25px 0; + font-size: 15px !important; + font-weight: 400 !important; + color: $body-bg; + } + } + .iasd-highlight-apps-carousel { + float: right; + width: 80%; + margin-top: 0; + border: none; + .owl-wrapper-outer { + background: none !important; + a.iasd-app-card { + border: transparent; //***WDR + } + } + .owl-controls { + .owl-buttons { + > div { + @include opacity(1); + position: relative; + background: none; + padding: 0; + margin: 20px 30px 0 30px; + height: 17px; + width: 10px; + z-index: 10; + &:after{ + background: none; + display: block; + font-family: FontAwesome; + font-size: 18px; + height: 40px; + line-height: 40px; + position: absolute; + text-align: center; + } + } + .owl-prev { + &:after { + content: "\f104"; //Alterado por WDR + font-family: FontAwesome; + font-size: 30px; + color: white; + top: 0px; + position: absolute; + display: block; + width: 10px; + height: 17px; + } + } + .owl-next { + &:after { + content: "\f105"; + font-family: FontAwesome; + font-size: 30px; + color: white; + top: 0px; + position: absolute; + display: block; + width: 10px; + height: 17px; + } + } + } + } + } + +} + +a.see-all-apps { + display: block; + padding: 5px 8px; + border: solid 1px $alt-text-color; + border-radius: 3px; + line-height: 11px; + font-size: 11px; + text-align: center; + text-transform: none; + font-family: Lato; + font-weight: 400; + background: $alt-link-color; + color: $body-bg !important; + &.see-all-apps-highlights { + float: left ; + background: none; // havia uma borda acima que foi eliminada para o outline do botão voltar a funcionar WDR + } +} + +@media (max-width: $screen-md) { + .iasd-apps-widget-highlights { + .app-highlights-title { + width: 25%; + } + .iasd-highlight-apps-carousel { + width: 75%; + } + } +} + +@media (min-width: $screen-xs) and (max-width: $screen-xs-max) { + .iasd-apps-widget-highlights { + .block-grid-item { + padding: 10px; + } + .slider-item { + padding: 0 10px; + } + .iasd-app-card { + width: auto; + padding: 10px; + figure, h3, span { + width: 100%; + } + .iasd-app-card-inner { + padding: 0 5px; + } + } + .app-highlights-title { + width: 100%; + h1 { + margin-bottom: 40px; + } + } + .iasd-highlight-apps-carousel { + width: 100%; + } + } + a.see-all-apps { + &.xs-landscape { + &.hidden-xs { + display: block !important; + } + &.visible-xs { + display: none !important; + } + } + &.see-all-apps-highlights { + margin-bottom: 30px; + &.xs-landscape { + &.hidden-xs { + display: block !important; + } + &.visible-xs { + display: none !important; + } + } + } + } +} + +@media (max-width: $screen-xs) { + .iasd-apps-widget-highlights { + .block-grid-item, .slider-item { + .iasd-app-card { + width: auto; + padding: 5px; + figure, h3, span { + width: 100%; + } + .iasd-app-card-inner { + padding: 0 5px; + } + } + } + .block-grid-item { + padding: 10px; + } + .slider-item { + padding: 0 5px; + } + .app-highlights-title { + width: 100%; + h1 { + margin-bottom: 40px; + } + p { + display: none; + } + } + .iasd-highlight-apps-carousel { + width: 100%; + } + } + + a.see-all-apps { + &.see-all-apps-highlights { + float: none; + border: solid 1px $body-bg; + background: none; + } + } +} + +// WIDGET SOBRE O AUTOR + +.iasd-widget-about-author { + .iasd-contact-info { + margin-top: 30px; + p { + display: inline-block; + margin-top: 15px !important; + } + .iasd-author-info { + display: inline-block; + + .iasd-author-info { + margin-top: 30px; + } + } + .contact-info-title { + height: 80px + } + } +} + +.iasd-apps-portal { + .iasd-widget{ + margin-bottom: 40px; // Alterado de 50px para 40px WD + a{ + color: white; + } + } + .slider-item { + a.iasd-app-card { + h3 { + font-size: 14px !important; + line-height: 17px !important; + margin: 0 0 10px 0 !important; // Alterado de 10px por WDR + font-weight: 900 !important; + width: 140px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: $theme-main-color; // alterado WDR. + } + &:hover { + border: solid 1px $border-base !important; + } + .iasd-tag { + background: $theme-main-color; //IE8 Fallback :( + background: rgba($theme-main-color, .9); + height: 20px !important; + left: 0 !important; + margin: 0; + max-width: 90%; + overflow: visible; + padding: 0; + position: absolute; + width: 70px; + margin-top: 10px; + z-index: 10 !important; + span { + @include text-overflow(); + color: $body-bg; + display: inline-block; + font-family: $alt-font-family-sans-serif; + font-size: 10px; + font-weight: 500; + line-height: 12px; + padding: 5px 5px; + text-transform: uppercase; + width: 100%; + } + &:after { + border: { + color: transparent transparent transparent $theme-main-color; //IE8 Fallback :( + color: transparent transparent transparent rgba($theme-main-color, .9); + style: solid; + width: 10px 0 10px 7px; + } + content: ''; + height: 0px; + position: absolute; + right: -7px; + top: 0; + width: 0px; + } + } + } +} +} + + +