@import 'base';
/***** SDK Downloader Mixins *****/ @mixin iconBackground($collapse_image, $expand_image, $size: contain, $padding: 16px, $width: 16px, $height: 16px) {
position: relative; padding-left: $padding; &::before { display: inline-block; width: $width; height: $height; content: ' '; position: absolute; left: 0; background: $expand_image; background-size: $size; } &.collapsed::before { background: $collapse_image; background-size: $size; }
}
/***** SDK Downloader Variables ******/
/* Font Colors */ $color: #555; $link: #0066c0; $link_state: e37825;
/* Font Size */ $title_size: 21px; $header_size: 16px; $font_size: 12px; $alternate_font_size: 13px;
/* Font Weight */ $header_weight: 500; $font_weight: 400;
/* Background Colors*/ $odd: f0f0f0; $even: fff;
/* Background Images (Base64 Images) */ $download_image: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUJERDRCQTg0MEIwMTFFNkEzRUVEMUI3QkU5MUM1MzYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJERDRCQTk0MEIwMTFFNkEzRUVEMUI3QkU5MUM1MzYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxQ0ZGMDQzMzQwOTIxMUU2QTNFRUQxQjdCRTkxQzUzNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxQ0ZGMDQzNDQwOTIxMUU2QTNFRUQxQjdCRTkxQzUzNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmvidY0AAAEOSURBVHja7NdBDoIwEAVQxhBP4M6tiRs9g8ZEjwJn0sMoLHXLNVx5gTpAYoLQ0ikdLHEmaUmAJg9oyi8opaKQCyYLBAD9qCQre+qTQXTZay/qHLMo8BKgAAUoQAEGXs7/Ykhz0kB13oF84rDSTJqv8FDGliWz4YntgFOgoMetJONGVjiMYYXW0ZsH+ZAfnCkP2gVW/8gGbjjQL7KF8wP0g+zE+QMOQ76wHRH3oOxJXDdNG+xv2BYE3Alxd+qmyQ1YI7fYXy2QvTgeoB3SCscHNCOtcbzAbiQJxw9sIudU3DjAGrmugB3rnHfg5BO1AE1ADKs/wWBobZ2LTfeP/bJk0/SXwJg6J2SZ+aq3AAMAIqC9+q5PmlEAAAAASUVORK5CYII=”) no-repeat;
$download_image_state: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJERDRCQUQ0MEIwMTFFNkEzRUVEMUI3QkU5MUM1MzYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUJERDRCQUM0MEIwMTFFNkEzRUVEMUI3QkU5MUM1MzYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QkRENEJBODQwQjAxMUU2QTNFRUQxQjdCRTkxQzUzNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QkRENEJBOTQwQjAxMUU2QTNFRUQxQjdCRTkxQzUzNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnOxhjsAAADySURBVHja7Ng/CsIwFAbwPhFP4Shu3sBBHETwRJ7As+laF8VRJzt5gfgCGRxim5e8hIjfg29pafk1/ykZY5qai34WeN/Ph56Vfhn13Zwert7ro6byAhBAAAEEEEAA6wXO7KHGnVp8kda39zw5ixjgjbPiPDI2UMdZc9rYLs6JHMSFjsEcyCCcZJJoIoNx0lmsgRThYpaZFOSLs5PgYtdBi9y61pDgNpxTqYX67LqqE+COpXeSNgCZhNPY6vqQyTitvdiHVMFpHhY+kWo4W2PF3cEil5yJdCkpBbR1wXkQQMUxWPrPJqGL/xJI+MufWG8BBgCLWFVQ3BWeSQAAAABJRU5ErkJggg==') no-repeat;
$chevron_collapse_image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAYAAAAffCjxAAAAeklEQVRIie2SwQ2AIBAEKcFSLIUHw5sSLMkOpBPpRDvQDyQEIWpiTIw3z9vbuc8pJQgPoLXugAno72QHAA9swFIWgNDKaqIeWGsFwMW5yP4li884p4IxZiiOLCmz1uqrkrElAZxI3pTEZV+TxCxckmRX11KSZ6cS4aPslTEX0mijHCUAAAAASUVORK5CYII=') no-repeat;
$chevron_expand_image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAgCAYAAAD9oDOIAAAAqElEQVRIie3SMRHDMAwF0EAohEAIFA/+Oo+BEAhlUAiFEggtg0IoBGfJEPtknaR49L/TpPtv+tM0MtI/IYQHgD3GuDm7HwBr8SCiJ4B83sq2ZTADyCmluX5+LXANsh0LrAItsAnUwC5Qgs3gpfAW4B8HAlgA/InoVaDVpCSYBbWTasFNUDupAiaiYAI1sAvUwC5Qgm+BAswuoBfsBxvwfbCCl27gyIgtB+TQFwLk4Ed9AAAAAElFTkSuQmCC') no-repeat;
$triangle_collapse_image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAAXNSR0IArs4c6QAAAJZJREFUSA211E0KgCAQhmG1LlS4DexmdjNrLV2pPxKK0nTmazbunheEGdE1rTNaG/HDyA1fTnesKmWd9w7VueLBhEXecFgkhbMjOTg5UoIXRyh4doSDf0YQeDSCxB+RP/AjIqUaVMgB333D+2n2tgajt9uEwKO3iINH0fAbFPwTpeDZaAlejObgZDSFs9E3HIZecTga8BUTcHBS5w76bgAAAABJRU5ErkJggg==) no-repeat;
$triangle_expand_image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAAXNSR0IArs4c6QAAAOdJREFUSA210FkOwjAMRdG0XREVvwxL69Ko+IctwY2UKIOdgQZLqBnslyOmy2l9GGNu39/o2udlmbfRqeSRO7H4g35/vl/32b3Cd1S5f8PKCR2ot2oyrZyFe431kQpzvJzAAXqvJs/L2YSvsu+tdD6SE3ZAH6nJiuQcpK9z1lLSXCYn6Ad9piYnk3MoKTjXSusX5YR06EU1GaKcC03DXVilPlVOQINeVTOvyrksqVrui3ICCvqimtminAZNr50z46oqp1HQV9XMVeU0pcp0T49UTXIGA32TmpkmOY1O676cDa3ret56Aj8PxUFWWLS/FgAAAABJRU5ErkJggg==) no-repeat;
/* Border Colors */ $border-odd: $odd;
/***** SDK Downloader Styles ******/
/* General Styles */ .sdk-downloader-wrapper {
.title { margin-bottom: 20px; h5 { font-weight: 500; } p { font-size: 14px; padding: 10px; } } ul { li { list-style: none; font-size: $font-size; font-weight: $font-weight; color: $color; } } .downloads-container { & > li { padding: 14px; border: 1px solid $border-odd; &.sdk-details { &:nth-child(2n) { background-color: $even; } &:nth-child(2n + 1) { background-color: $odd; } [id^="sdk_notes"] { padding: 20px 20px 30px 20px !important; } } } a { color: $link; text-decoration: none; &:hover, &:active { color: $link_state; } } } .sdk-container { margin: 0; padding-left: 0; li{ &:first-child { padding-left: 0; } &.name { font-size: $header_size; font-weight: $header_weight; padding-left: 0; & > a.download-icon { background: $download_image; background-size: 24px; &:hover, &:active { background: $download_image_state; background-size: 24px; } & > span { display: inline-block; margin-left: 26px; } } .minor-description { font-size: 12px; color: $color; text-decoration: none; cursor: default; pointer-events: none; } } &.notes-container { & > a { @include iconBackground($chevron_collapse_image, $chevron_expand_image); } } } } .sdk { & > a { font-size: 13px; font-weight: 400; line-height: 23px; @include iconBackground($triangle_collapse_image, $triangle_expand_image, 8px, 20px, 8px, 8px); &::before { top: 3px; } } & > ul { margin-left: 20px; } span { margin-left: 20px; font-size: $alternate_font_size; } } .notes { p { font-size: $alternate_font_size; font-weight: $font_weight; margin: 0; } h3 { padding: 5px 0; margin: 0; } & > ul { margin-left: 35px; } li { list-style: disc; font-size: $alternate_font_size; font-weight: $font-weight; line-height: 19px; } h6 { font-size: $alternate_font_size; font-weight: bold; } } .sdk-description { margin: 0px 15px 0px 15px; p { line-height: 18px; font-size: 13px; font-weight: 400; font-family: Arial, Helvetica, sans-serif; } li { list-style: disc; } } .sdk-footer { p { font-size: 13px; } }
}
/* Media Queries */ @media (max-width: ($desktop - 1)) {
.sdk-downloader-wrapper { .downloads-container { margin: 0; .updated-on { margin-top: 10px; margin-left: 25px; } } .sdk-footer { p { margin-top: 15px; } } }
}
@media (max-width: ($tablet-portrait - 1)) {
.hidden-xs { display: none !important; } .sdk-downloader-wrapper { .title { margin-bottom: 20px; h5 { font-size: 18px; font-weight: 700 !important; } } }
}