diff --git a/Safa- Levi/Day2/css/base.css b/Safa- Levi/Day2/css/base.css new file mode 100644 index 0000000..81322fd --- /dev/null +++ b/Safa- Levi/Day2/css/base.css @@ -0,0 +1,34 @@ + + +/*Base Styles*/ + +* { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box;} + +body { + font-size: 1em; + line-height: 1; +} + +button { + background-color: MediumOrchid; + font-size: 1.25em; + color: white; +} + +img { + display: block; + width: 100%; +} + +a { + text-decoration: none; + color: MediumOrchid; +} + +a:hover, +a:visited { + color: #8a2aa2; +} diff --git a/Safa- Levi/Day2/css/fonts/icomoon.eot b/Safa- Levi/Day2/css/fonts/icomoon.eot new file mode 100755 index 0000000..6a06b4d Binary files /dev/null and b/Safa- Levi/Day2/css/fonts/icomoon.eot differ diff --git a/Safa- Levi/Day2/css/fonts/icomoon.svg b/Safa- Levi/Day2/css/fonts/icomoon.svg new file mode 100755 index 0000000..1681814 --- /dev/null +++ b/Safa- Levi/Day2/css/fonts/icomoon.svg @@ -0,0 +1,11 @@ + + + +Generated by IcoMoon + + + + + + + diff --git a/Safa- Levi/Day2/css/fonts/icomoon.ttf b/Safa- Levi/Day2/css/fonts/icomoon.ttf new file mode 100755 index 0000000..900e495 Binary files /dev/null and b/Safa- Levi/Day2/css/fonts/icomoon.ttf differ diff --git a/Safa- Levi/Day2/css/fonts/icomoon.woff b/Safa- Levi/Day2/css/fonts/icomoon.woff new file mode 100755 index 0000000..78c6d68 Binary files /dev/null and b/Safa- Levi/Day2/css/fonts/icomoon.woff differ diff --git a/Safa- Levi/Day2/css/layout.css b/Safa- Levi/Day2/css/layout.css new file mode 100644 index 0000000..49ace5c --- /dev/null +++ b/Safa- Levi/Day2/css/layout.css @@ -0,0 +1,75 @@ +/*Flex*/ + +.main-nav { + padding: 1.5% 0; + display: -webkit-flex; + -webkit-flex-direction: row; + -webkit-flex-wrap: wrap; + -webkit-justify-content: space-around; + -webkit-align-items: baseline; + -webkit-align-content: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + align-items: baseline; + align-content: center; +} + +.main-nav__item { + padding: 1% 1.5%; + -webkit-flex: 0, 1, auto; + -webkit-align-self: auto; + flex: 0, 1, auto; + align-self: auto; +} + +/*Responsive Grid - Dividers*/ + +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +.col { + display: block; + float:left; + margin: 1% 0 1% 0%; +} + +.col:first-child { + margin-left: 0; +} + +/*Spans - Progressive Enhancement Version*/ + +.span_3_of_3, +.span_2_of_3, +.span_1_of_3, +.span_4_of_4, +.span_3_of_4, +.span_2_of_4, +.span_1_of_4 { + width: 100%; +} + +/* clearing */ + +.clearfix:before, +.clearfix:after { + content: '\0020'; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; +} + +.clearfix:after { + clear: both; +} + +.clearfix { + zoom: 1; +} diff --git a/Safa- Levi/Day2/css/module.css b/Safa- Levi/Day2/css/module.css new file mode 100644 index 0000000..ab83483 --- /dev/null +++ b/Safa- Levi/Day2/css/module.css @@ -0,0 +1,188 @@ +.headline-subhead { + text-align: center; + padding-bottom: 1.5em; + text-transform: uppercase; + font-size: 1.25em; + color: gray; +} + +/* nav */ + +.main-nav__item a { + text-align: center; + padding: 0.2em; + color: white; + font-size: 1.5em; + border-radius: .3em; +} + +.main-nav__item a:hover { + background-color: MediumOrchid; +} + +/* hero */ + +.hero { + color: white; + text-align: center; + padding: 5% 0; + margin-bottom: 4.5em; +} + +.hero__title { + font-size: 5em; +} + +.hero__text { + font-size: 1em; + line-height: 1.5em; + max-width: 38em; + margin: auto; +} + +/* feature */ + +.feature { + text-align: center; + display: block; + padding-bottom: 4.5em; +} + +.feature__box { + padding: 3%; + color: white; + display: inline-block; + font-size: 1em; +} + +.feature__box h1 { + font-size: 1.3em; + font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; + font-weight: bold; + color: MediumOrchid; +} + +.feature__box h2 { + margin: 0.4em auto; +} + +/* form section */ + +.field-with-button{ + text-align: center; + display: block; + cursor: pointer; +} + +.input-field { + margin-top: 1.25em; + font-size: 1.25em; + padding: .125em; +} + +.search-button{ + font-size: 1em; +} + +/* profile section */ + +.profile { + color: gray; + padding-bottom: 1.5em; +} + +.profile figcaption { + margin-top: .1875em; + line-height: 1.5em; + font-weight: bold; +} + +.profile img { + margin: 0 auto; + max-width: 12.5em; +} + +/*footer*/ + +.citation { + padding: 1.5em 0 4em 0; + text-align: center; + font-size: 0.8em; +} + +.citation p:first-of-type { + padding-top: 0.8em; +} + +/*Vector Images*/ + +.vectorImage { + margin: 0.6em 0 -0.6em 0; +} + +.windowIconRear, +.windowIconFront, +.arrowIcon-1, +.arrowIcon-2 { + fill: white; +} + +.bellIconOutline, +.windowIconFront:hover, +.arrowIcon-1:hover { + fill: MediumOrchid; +} + +.arrowIcon-2:hover { + fill: MediumSeaGreen; +} + +.bellIconFill { + fill: LemonChiffon; +} + +.windowIconRear:hover, +.bellIconFill:hover { + fill: SkyBlue; +} + +/*Images*/ + +.profGreen { + content: url('../img/professor_green_1x.jpg'); +} + +.profDavis { + content: url('../img/professor_davis_1x.jpg'); +} + +.profSmith { + content: url('../img/professor_smith_1x.jpg'); +} + +.profKeller { + content: url('../img/professor_keller_1x.jpg'); +} + +/* Color */ + +.color1 { + background-color: SkyBlue; +} + +.color2 { + background-color: LemonChiffon; + color: gray; +} + +.color3 { + background-color: MediumSeaGreen; +} + +.color4 { + background-color: whitesmoke; +} + +.color5 { + background-color: MediumOrchid; +} diff --git a/Safa- Levi/Day2/css/state.css b/Safa- Levi/Day2/css/state.css new file mode 100644 index 0000000..8a18efa --- /dev/null +++ b/Safa- Levi/Day2/css/state.css @@ -0,0 +1,55 @@ +/*Responsive Grid Media Queries*/ + +@media (min-width: 480px) { + .col { + margin: 1% 0.5% 1% 0.5%; + } + + .span_3_of_3 { + width: 100%; + } + + .span_2_of_3 { + width: 66.13%; + } + + .span_1_of_3 { + width: 32.26%; + } + + .span_4_of_4 { + width: 100%; + } + + .span_3_of_4 { + width: 74.6%; + } + + .span_2_of_4 { + width: 49.2%; + } + + .span_1_of_4 { + width: 23.8%; + } +} + +/*Retina Images*/ + +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + .profGreen { + content: url('../img/professor_green_2x.jpg'); + } + + .profDavis { + content: url('../img/professor_davis_2x.jpg'); + } + + .profSmith { + content: url('../img/professor_smith_2x.jpg'); + } + + .profKeller { + content: url('../img/professor_keller_2x.jpg'); + } +} diff --git a/Safa- Levi/Day2/css/typography.css b/Safa- Levi/Day2/css/typography.css new file mode 100644 index 0000000..2f47318 --- /dev/null +++ b/Safa- Levi/Day2/css/typography.css @@ -0,0 +1,29 @@ +@font-face { + font-family: 'icomoon'; + src:url('fonts/icomoon.eot?8fdye'); + src:url('fonts/icomoon.eot?#iefix8fdye') format('embedded-opentype'), + url('fonts/icomoon.woff?8fdye') format('woff'), + url('fonts/icomoon.ttf?8fdye') format('truetype'), + url('fonts/icomoon.svg?8fdye#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + font-family: 'icomoon'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + +} + +.icon-search:before { + content: "\e600"; +} diff --git a/Safa- Levi/Day2/img/professor_davis_1x.jpg b/Safa- Levi/Day2/img/professor_davis_1x.jpg new file mode 100755 index 0000000..1d0d99b Binary files /dev/null and b/Safa- Levi/Day2/img/professor_davis_1x.jpg differ diff --git a/Safa- Levi/Day2/img/professor_davis_2x.jpg b/Safa- Levi/Day2/img/professor_davis_2x.jpg new file mode 100755 index 0000000..41ed796 Binary files /dev/null and b/Safa- Levi/Day2/img/professor_davis_2x.jpg differ diff --git a/Safa- Levi/Day2/img/professor_green_1x.jpg b/Safa- Levi/Day2/img/professor_green_1x.jpg new file mode 100755 index 0000000..5085d09 Binary files /dev/null and b/Safa- Levi/Day2/img/professor_green_1x.jpg differ diff --git a/Safa- Levi/Day2/img/professor_green_2x.jpg b/Safa- Levi/Day2/img/professor_green_2x.jpg new file mode 100755 index 0000000..6126686 Binary files /dev/null and b/Safa- Levi/Day2/img/professor_green_2x.jpg differ diff --git a/Safa- Levi/Day2/img/professor_keller_1x.jpg b/Safa- Levi/Day2/img/professor_keller_1x.jpg new file mode 100755 index 0000000..b4db016 Binary files /dev/null and b/Safa- Levi/Day2/img/professor_keller_1x.jpg differ diff --git a/Safa- Levi/Day2/img/professor_keller_2x.jpg b/Safa- Levi/Day2/img/professor_keller_2x.jpg new file mode 100755 index 0000000..03fe989 Binary files /dev/null and b/Safa- Levi/Day2/img/professor_keller_2x.jpg differ diff --git a/Safa- Levi/Day2/img/professor_smith_1x.jpg b/Safa- Levi/Day2/img/professor_smith_1x.jpg new file mode 100755 index 0000000..f9c531c Binary files /dev/null and b/Safa- Levi/Day2/img/professor_smith_1x.jpg differ diff --git a/Safa- Levi/Day2/img/professor_smith_2x.jpg b/Safa- Levi/Day2/img/professor_smith_2x.jpg new file mode 100755 index 0000000..b9d646c Binary files /dev/null and b/Safa- Levi/Day2/img/professor_smith_2x.jpg differ diff --git a/Safa- Levi/Day2/scss/_global.scss b/Safa- Levi/Day2/scss/_global.scss new file mode 100644 index 0000000..5637739 --- /dev/null +++ b/Safa- Levi/Day2/scss/_global.scss @@ -0,0 +1,39 @@ +// IMPORTS +@import "variables"; + +/*Base Styles*/ + +* { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +body { + font-size: 1em; + line-height: 1; +} + +button { + background-color: $primary-color; + font-size: 1.25em; + color: white; +} + +img { + display: block; + width: 100%; +} + +a { + text-decoration: none; + color: $primary-color; + &:hover, &:visited { + color: #8a2aa2; + } +} + +// a:hover, +// a:visited { +// color: #8a2aa2; +// } diff --git a/Safa- Levi/Day2/scss/_layout.scss b/Safa- Levi/Day2/scss/_layout.scss new file mode 100644 index 0000000..4ea918a --- /dev/null +++ b/Safa- Levi/Day2/scss/_layout.scss @@ -0,0 +1,80 @@ +// IMPORTS +@import "variables"; +@import "mixins"; +@import "bourbon/bourbon"; + +/*Flex*/ + +.main-nav { + padding: 1.5% 0; + display: -webkit-flex; + -webkit-flex-direction: row; + -webkit-flex-wrap: wrap; + -webkit-justify-content: space-around; + -webkit-align-items: baseline; + -webkit-align-content: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + align-items: baseline; + align-content: center; +} + +.main-nav__item { + padding: 1% 1.5%; + -webkit-flex: 0, 1, auto; + -webkit-align-self: auto; + flex: 0, 1, auto; + align-self: auto; +} + +/*Responsive Grid - Dividers*/ + +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +.col { + display: block; + float:left; + margin: 1% 0 1% 0%; +} + +.col:first-child { + margin-left: 0; +} + +/*Spans - Progressive Enhancement Version*/ + +.span_3_of_3, +.span_2_of_3, +.span_1_of_3, +.span_4_of_4, +.span_3_of_4, +.span_2_of_4, +.span_1_of_4 { + width: 100%; +} + +/* clearing */ + +.clearfix:before, +.clearfix:after { + content: '\0020'; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; +} + +.clearfix:after { + clear: both; +} + +.clearfix { + zoom: 1; +} diff --git a/Safa- Levi/Day2/scss/_mixins.scss b/Safa- Levi/Day2/scss/_mixins.scss new file mode 100644 index 0000000..fa7a487 --- /dev/null +++ b/Safa- Levi/Day2/scss/_mixins.scss @@ -0,0 +1,7 @@ +// MEDIA QUERY MIXINS + +@mixin mobile { + @media (min-width: 480px) { + @content; + } +} diff --git a/Safa- Levi/Day2/scss/_module.scss b/Safa- Levi/Day2/scss/_module.scss new file mode 100644 index 0000000..2983cf9 --- /dev/null +++ b/Safa- Levi/Day2/scss/_module.scss @@ -0,0 +1,206 @@ +// IMPORTS +@import "variables"; +@import "bourbon/bourbon"; + + + + +.headline-subhead { + text-align: center; + padding-bottom: 1.5em; + text-transform: uppercase; + font-size: 1.25em; + color: gray; +} + +/* nav */ + +.main-nav__item { + a { + text-align: center; + padding: 0.2em; + color: white; + font-size: 1.5em; + border-radius: .3em; + &:hover { + background-color: $primary-color; + } + } +} + +/* hero */ + +.hero { + color: white; + text-align: center; + padding: 5% 0; + margin-bottom: 4.5em; +} + +.hero__title { + font-size: 5em; +} + +.hero__text { + font-size: 1em; + line-height: 1.5em; + max-width: 38em; + margin: auto; +} + +/* feature */ + +.feature { + text-align: center; + display: block; + padding-bottom: 4.5em; +} + +.feature__box { + padding: 3%; + color: white; + display: inline-block; + font-size: 1em; +} + +.feature__box { + h1 { + font-size: 1.3em; + font-family: $Lucida; + font-weight: bold; + color: $primary-color; + } +} + +.feature__box { + h2 { + margin: 0.4em auto; + } +} + +/* form section */ + +.field-with-button{ + text-align: center; + display: block; + cursor: pointer; +} + +.input-field { + margin-top: 1.25em; + font-size: 1.25em; + padding: .125em; +} + +.search-button{ + font-size: 1em; +} + +/* profile section */ + +.profile { + color: gray; + padding-bottom: 1.5em; +} + +.profile { + figcaption { + margin-top: .1875em; + line-height: 1.5em; + font-weight: bold; + } +} + +.profile { + img { + margin: 0 auto; + max-width: 12.5em; + } +} + +/*footer*/ + +.citation { + padding: 1.5em 0 4em 0; + text-align: center; + font-size: 0.8em; +} + +.citation { + p:first-of-type { + padding-top: 0.8em; + } +} + +/*Vector Images*/ + +.vectorImage { + margin: 0.6em 0 -0.6em 0; +} + +.windowIconRear, +.windowIconFront, +.arrowIcon-1, +.arrowIcon-2 { + fill: white; +} + +.bellIconOutline, +.windowIconFront:hover, +.arrowIcon-1:hover { + fill: $primary-color; +} + +.arrowIcon-2:hover { + fill: $secondary-color; +} + +.bellIconFill { + fill: LemonChiffon; +} + +.windowIconRear:hover, +.bellIconFill:hover { + fill: SkyBlue; +} + +/*Images*/ + +.profGreen { + content: url('../img/professor_green_1x.jpg'); +} + +.profDavis { + content: url('../img/professor_davis_1x.jpg'); +} + +.profSmith { + content: url('../img/professor_smith_1x.jpg'); +} + +.profKeller { + content: url('../img/professor_keller_1x.jpg'); +} + +/* Color */ + +.color1 { + background-color: SkyBlue; +} + +.color2 { + background-color: LemonChiffon; + color: gray; +} + +.color3 { + background-color: $secondary-color; +} + +.color4 { + background-color: whitesmoke; +} + +.color5 { + background-color: $primary-color; +} diff --git a/Safa- Levi/Day2/scss/_reset.scss b/Safa- Levi/Day2/scss/_reset.scss new file mode 100644 index 0000000..385bd73 --- /dev/null +++ b/Safa- Levi/Day2/scss/_reset.scss @@ -0,0 +1,50 @@ +/* Meyer's Reset +http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/Safa- Levi/Day2/scss/_state.scss b/Safa- Levi/Day2/scss/_state.scss new file mode 100644 index 0000000..ae41265 --- /dev/null +++ b/Safa- Levi/Day2/scss/_state.scss @@ -0,0 +1,77 @@ +// IMPORTS +@import "variables"; +@import "mixins"; +@import "bourbon/bourbon"; + + +/*Responsive Grid Media Queries*/ + +// @media (min-width: 480px) { + .col { + @include mobile { + margin: 1% 0.5% 1% 0.5%; + } + } + + .span_3_of_3, .span_4_of_4 { + @include mobile { + width: 100%; + } + } + + .span_2_of_3 { + @include mobile { + width: 66.13%; + } + } + + .span_1_of_3 { + @include mobile { + width: 32.26%; + } + } + + // .span_4_of_4 { + // @include mobile { + // width: 100%; + // } + // } + + .span_3_of_4 { + @include mobile { + width: 74.6%; + } + } + + .span_2_of_4 { + @include mobile { + width: 49.2%; + } + } + + .span_1_of_4 { + @include mobile { + width: 23.8%; + } + } +// } + +/*Retina Images*/ + +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + .profGreen { + content: url('../img/professor_green_2x.jpg'); + } + + .profDavis { + content: url('../img/professor_davis_2x.jpg'); + } + + .profSmith { + content: url('../img/professor_smith_2x.jpg'); + } + + .profKeller { + content: url('../img/professor_keller_2x.jpg'); + } +} diff --git a/Safa- Levi/Day2/scss/_typography.scss b/Safa- Levi/Day2/scss/_typography.scss new file mode 100644 index 0000000..f695c29 --- /dev/null +++ b/Safa- Levi/Day2/scss/_typography.scss @@ -0,0 +1,35 @@ +// IMPORTS +@import "variables"; +@import "mixins"; +@import "bourbon/bourbon"; + + +@font-face { + font-family: 'icomoon'; + src:url('fonts/icomoon.eot?8fdye'); + src:url('fonts/icomoon.eot?#iefix8fdye') format('embedded-opentype'), + url('fonts/icomoon.woff?8fdye') format('woff'), + url('fonts/icomoon.ttf?8fdye') format('truetype'), + url('fonts/icomoon.svg?8fdye#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + font-family: 'icomoon'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + +} + +.icon-search:before { + content: "\e600"; +} diff --git a/Safa- Levi/Day2/scss/_variables.scss b/Safa- Levi/Day2/scss/_variables.scss new file mode 100644 index 0000000..9c09171 --- /dev/null +++ b/Safa- Levi/Day2/scss/_variables.scss @@ -0,0 +1,7 @@ +// COLOR VARIABLES + +$primary-color: MediumOrchid; +$secondary-color: MediumSeaGreen; + +// Font-families +$Lucida: "Lucida Sans Unicode", "Lucida Grande", sans-serif; diff --git a/Safa- Levi/Day2/scss/application.css b/Safa- Levi/Day2/scss/application.css new file mode 100644 index 0000000..6c25f81 --- /dev/null +++ b/Safa- Levi/Day2/scss/application.css @@ -0,0 +1,342 @@ +/* Meyer's Reset +http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; } + +ol, ul { + list-style: none; } + +blockquote, q { + quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +@font-face { + font-family: 'icomoon'; + src: url("fonts/icomoon.eot?8fdye"); + src: url("fonts/icomoon.eot?#iefix8fdye") format("embedded-opentype"), url("fonts/icomoon.woff?8fdye") format("woff"), url("fonts/icomoon.ttf?8fdye") format("truetype"), url("fonts/icomoon.svg?8fdye#icomoon") format("svg"); + font-weight: normal; + font-style: normal; } +[class^="icon-"], [class*=" icon-"] { + font-family: 'icomoon'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + +.icon-search:before { + content: "\e600"; } + +/*Base Styles*/ +* { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +body { + font-size: 1em; + line-height: 1; } + +button { + background-color: mediumorchid; + font-size: 1.25em; + color: white; } + +img { + display: block; + width: 100%; } + +a { + text-decoration: none; + color: mediumorchid; } + a:hover, a:visited { + color: #8a2aa2; } + +/*Flex*/ +.main-nav { + padding: 1.5% 0; + display: -webkit-flex; + -webkit-flex-direction: row; + -webkit-flex-wrap: wrap; + -webkit-justify-content: space-around; + -webkit-align-items: baseline; + -webkit-align-content: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + align-items: baseline; + align-content: center; } + +.main-nav__item { + padding: 1% 1.5%; + -webkit-flex: 0, 1, auto; + -webkit-align-self: auto; + flex: 0, 1, auto; + align-self: auto; } + +/*Responsive Grid - Dividers*/ +.section { + clear: both; + padding: 0px; + margin: 0px; } + +.col { + display: block; + float: left; + margin: 1% 0 1% 0%; } + +.col:first-child { + margin-left: 0; } + +/*Spans - Progressive Enhancement Version*/ +.span_3_of_3, +.span_2_of_3, +.span_1_of_3, +.span_4_of_4, +.span_3_of_4, +.span_2_of_4, +.span_1_of_4 { + width: 100%; } + +/* clearing */ +.clearfix:before, +.clearfix:after { + content: '\0020'; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; } + +.clearfix:after { + clear: both; } + +.clearfix { + zoom: 1; } + +.headline-subhead { + text-align: center; + padding-bottom: 1.5em; + text-transform: uppercase; + font-size: 1.25em; + color: gray; } + +/* nav */ +.main-nav__item a { + text-align: center; + padding: 0.2em; + color: white; + font-size: 1.5em; + border-radius: .3em; } + .main-nav__item a:hover { + background-color: mediumorchid; } + +/* hero */ +.hero { + color: white; + text-align: center; + padding: 5% 0; + margin-bottom: 4.5em; } + +.hero__title { + font-size: 5em; } + +.hero__text { + font-size: 1em; + line-height: 1.5em; + max-width: 38em; + margin: auto; } + +/* feature */ +.feature { + text-align: center; + display: block; + padding-bottom: 4.5em; } + +.feature__box { + padding: 3%; + color: white; + display: inline-block; + font-size: 1em; } + +.feature__box h1 { + font-size: 1.3em; + font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; + font-weight: bold; + color: mediumorchid; } + +.feature__box h2 { + margin: 0.4em auto; } + +/* form section */ +.field-with-button { + text-align: center; + display: block; + cursor: pointer; } + +.input-field { + margin-top: 1.25em; + font-size: 1.25em; + padding: .125em; } + +.search-button { + font-size: 1em; } + +/* profile section */ +.profile { + color: gray; + padding-bottom: 1.5em; } + +.profile figcaption { + margin-top: .1875em; + line-height: 1.5em; + font-weight: bold; } + +.profile img { + margin: 0 auto; + max-width: 12.5em; } + +/*footer*/ +.citation { + padding: 1.5em 0 4em 0; + text-align: center; + font-size: 0.8em; } + +.citation p:first-of-type { + padding-top: 0.8em; } + +/*Vector Images*/ +.vectorImage { + margin: 0.6em 0 -0.6em 0; } + +.windowIconRear, +.windowIconFront, +.arrowIcon-1, +.arrowIcon-2 { + fill: white; } + +.bellIconOutline, +.windowIconFront:hover, +.arrowIcon-1:hover { + fill: mediumorchid; } + +.arrowIcon-2:hover { + fill: mediumseagreen; } + +.bellIconFill { + fill: LemonChiffon; } + +.windowIconRear:hover, +.bellIconFill:hover { + fill: SkyBlue; } + +/*Images*/ +.profGreen { + content: url("../img/professor_green_1x.jpg"); } + +.profDavis { + content: url("../img/professor_davis_1x.jpg"); } + +.profSmith { + content: url("../img/professor_smith_1x.jpg"); } + +.profKeller { + content: url("../img/professor_keller_1x.jpg"); } + +/* Color */ +.color1 { + background-color: SkyBlue; } + +.color2 { + background-color: LemonChiffon; + color: gray; } + +.color3 { + background-color: mediumseagreen; } + +.color4 { + background-color: whitesmoke; } + +.color5 { + background-color: mediumorchid; } + +/*Responsive Grid Media Queries*/ +@media (min-width: 480px) { + .col { + margin: 1% 0.5% 1% 0.5%; } } + +@media (min-width: 480px) { + .span_3_of_3, .span_4_of_4 { + width: 100%; } } + +@media (min-width: 480px) { + .span_2_of_3 { + width: 66.13%; } } + +@media (min-width: 480px) { + .span_1_of_3 { + width: 32.26%; } } + +@media (min-width: 480px) { + .span_3_of_4 { + width: 74.6%; } } + +@media (min-width: 480px) { + .span_2_of_4 { + width: 49.2%; } } + +@media (min-width: 480px) { + .span_1_of_4 { + width: 23.8%; } } + +/*Retina Images*/ +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + .profGreen { + content: url("../img/professor_green_2x.jpg"); } + + .profDavis { + content: url("../img/professor_davis_2x.jpg"); } + + .profSmith { + content: url("../img/professor_smith_2x.jpg"); } + + .profKeller { + content: url("../img/professor_keller_2x.jpg"); } } diff --git a/Safa- Levi/Day2/scss/application.css.map b/Safa- Levi/Day2/scss/application.css.map new file mode 100644 index 0000000..45e4bd8 --- /dev/null +++ b/Safa- Levi/Day2/scss/application.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": ";;;;;AAKA;;;;;;;;;;;;wBAYyB;EACvB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,SAAS,EAAE,IAAI;EACf,IAAI,EAAE,OAAO;EACb,cAAc,EAAE,QAAQ;;;AAI1B;0CAC2C;EACzC,OAAO,EAAE,KAAK;;AAGhB,MAAO;EACL,UAAU,EAAE,IAAI;;AAGlB,aAAc;EACZ,MAAM,EAAE,IAAI;;AAGd;iBACkB;EAChB,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,IAAI;;AAGf,KAAM;EACJ,eAAe,EAAE,QAAQ;EACzB,cAAc,EAAE,CAAC;;AChDnB,UASC;EARC,WAAW,EAAE,SAAS;EACtB,GAAG,EAAC,8BAA8B;EAClC,GAAG,EAAC,yNAAgE;EAIpE,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;AAGpB,mCAAoC;EAClC,WAAW,EAAE,SAAS;EACtB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,YAAY,EAAE,MAAM;EACpB,cAAc,EAAE,IAAI;EACpB,WAAW,EAAE,CAAC;;EAGd,sBAAsB,EAAE,WAAW;EACnC,uBAAuB,EAAE,SAAS;;AAIpC,mBAAoB;EAClB,OAAO,EAAE,OAAO;;;ACxBlB,CAAE;EACA,eAAe,EAAE,UAAU;EAC3B,kBAAkB,EAAE,UAAU;EAC9B,UAAU,EAAE,UAAU;;AAExB,IAAK;EACH,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,CAAC;;AAGhB,MAAO;EACL,gBAAgB,EAAE,YAAY;EAC9B,SAAS,EAAE,MAAM;EACjB,KAAK,EAAE,KAAK;;AAGd,GAAI;EACF,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,IAAI;;AAGb,CAAE;EACA,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,YAAY;EACnB,iBAAkB;IAChB,KAAK,EAAE,OAAO;;;AC1BlB,SAAU;EACR,OAAO,EAAE,MAAM;EACf,OAAO,EAAE,YAAY;EACrB,sBAAsB,EAAE,GAAG;EAC3B,iBAAiB,EAAE,IAAI;EACvB,uBAAuB,EAAE,YAAY;EACrC,mBAAmB,EAAE,QAAQ;EAC7B,qBAAqB,EAAE,MAAM;EAC7B,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,GAAG;EACnB,SAAS,EAAE,IAAI;EACf,eAAe,EAAE,YAAY;EAC7B,WAAW,EAAE,QAAQ;EACrB,aAAa,EAAE,MAAM;;AAGvB,eAAgB;EACd,OAAO,EAAE,OAAO;EAChB,YAAY,EAAE,UAAU;EACxB,kBAAkB,EAAE,IAAI;EACxB,IAAI,EAAE,UAAU;EAChB,UAAU,EAAE,IAAI;;;AAKlB,QAAS;EACP,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;;AAGb,IAAK;EACH,OAAO,EAAE,KAAK;EACd,KAAK,EAAC,IAAI;EACV,MAAM,EAAE,UAAU;;AAGpB,gBAAiB;EACf,WAAW,EAAE,CAAC;;;AAKhB;;;;;;YAMa;EACX,KAAK,EAAE,IAAI;;;AAKb;eACgB;EACd,OAAO,EAAE,OAAO;EAChB,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,MAAM;EAChB,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;;AAGX,eAAgB;EACd,KAAK,EAAE,IAAI;;AAGb,SAAU;EACR,IAAI,EAAE,CAAC;;ACzET,iBAAkB;EAChB,UAAU,EAAE,MAAM;EAClB,cAAc,EAAE,KAAK;EACrB,cAAc,EAAE,SAAS;EACzB,SAAS,EAAE,MAAM;EACjB,KAAK,EAAE,IAAI;;;AAKb,iBAAkB;EAChB,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,KAAK;EAChB,aAAa,EAAE,IAAI;;AAGrB,uBAAwB;EACtB,gBAAgB,EAAE,YAAY;;;AAKhC,KAAM;EACJ,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,KAAK;;AAGtB,YAAa;EACX,SAAS,EAAE,GAAG;;AAGhB,WAAY;EACV,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,IAAI;;;AAKd,QAAS;EACP,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,KAAK;EACd,cAAc,EAAE,KAAK;;AAGvB,aAAc;EACZ,OAAO,EAAE,EAAE;EACX,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,YAAY;EACrB,SAAS,EAAE,GAAG;;AAGhB,gBAAiB;EACf,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,kDAAkD;EAC/D,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,YAAY;;AAGrB,gBAAiB;EACf,MAAM,EAAE,UAAU;;;AAKpB,kBAAkB;EAChB,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,OAAO;;AAGjB,YAAa;EACX,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,MAAM;EACjB,OAAO,EAAE,MAAM;;AAGjB,cAAc;EACZ,SAAS,EAAE,GAAG;;;AAKhB,QAAS;EACP,KAAK,EAAE,IAAI;EACX,cAAc,EAAE,KAAK;;AAGvB,mBAAoB;EAClB,UAAU,EAAE,OAAO;EACnB,WAAW,EAAE,KAAK;EAClB,WAAW,EAAE,IAAI;;AAGnB,YAAa;EACX,MAAM,EAAE,MAAM;EACd,SAAS,EAAE,MAAM;;;AAKnB,SAAU;EACR,OAAO,EAAE,aAAa;EACtB,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,KAAK;;AAGlB,yBAA0B;EACxB,WAAW,EAAE,KAAK;;;AAKpB,YAAa;EACX,MAAM,EAAE,gBAAgB;;AAG1B;;;YAGa;EACX,IAAI,EAAE,KAAK;;AAGb;;kBAEmB;EACjB,IAAI,EAAE,YAAY;;AAGpB,kBAAmB;EACjB,IAAI,EAAE,cAAc;;AAGtB,aAAc;EACZ,IAAI,EAAE,YAAY;;AAGpB;mBACoB;EAClB,IAAI,EAAE,OAAO;;;AAKf,UAAW;EACT,OAAO,EAAE,oCAAoC;;AAG/C,UAAW;EACT,OAAO,EAAE,oCAAoC;;AAG/C,UAAW;EACT,OAAO,EAAE,oCAAoC;;AAG/C,WAAY;EACV,OAAO,EAAE,qCAAqC;;;AAKhD,OAAQ;EACN,gBAAgB,EAAE,OAAO;;AAG3B,OAAQ;EACN,gBAAgB,EAAE,YAAY;EAC9B,KAAK,EAAE,IAAI;;AAGb,OAAQ;EACN,gBAAgB,EAAE,cAAc;;AAGlC,OAAQ;EACN,gBAAgB,EAAE,UAAU;;AAG9B,OAAQ;EACN,gBAAgB,EAAE,YAAY;;;ACxL9B,yBAA0B;EAM1B,IAAK;IAED,MAAM,EAAE,eAAe;;AAR3B,yBAA0B;EAY1B,0BAA4B;IAExB,KAAK,EAAE,IAAI;;AAdf,yBAA0B;EAkB1B,YAAa;IAET,KAAK,EAAE,MAAM;;AApBjB,yBAA0B;EAwB1B,YAAa;IAET,KAAK,EAAE,MAAM;;AA1BjB,yBAA0B;EAoC1B,YAAa;IAET,KAAK,EAAE,KAAK;;AAtChB,yBAA0B;EA0C1B,YAAa;IAET,KAAK,EAAE,KAAK;;AA5ChB,yBAA0B;EAgD1B,YAAa;IAET,KAAK,EAAE,KAAK;;;AAOlB,oEAAqE;EACnE,UAAW;IACT,OAAO,EAAE,oCAAoC;;EAG/C,UAAW;IACT,OAAO,EAAE,oCAAoC;;EAG/C,UAAW;IACT,OAAO,EAAE,oCAAoC;;EAG/C,WAAY;IACV,OAAO,EAAE,qCAAqC", +"sources": ["_reset.scss","_typography.scss","_base.scss","_layout.scss","_module.scss","_state.scss"], +"names": [], +"file": "application.css" +} \ No newline at end of file diff --git a/Safa- Levi/Day2/scss/application.scss b/Safa- Levi/Day2/scss/application.scss new file mode 100644 index 0000000..add8095 --- /dev/null +++ b/Safa- Levi/Day2/scss/application.scss @@ -0,0 +1,20 @@ + +// Meyer's reset +@import "reset"; + +// Fonts and icons +@import "typography"; + +// Base element styles +@import "global"; + +// Grid and nav layout +@import "layout"; + +// Modules +@import "module"; + +// Media queries +@import "state"; + + diff --git a/Safa- Levi/Day2/scss/bourbon/_bourbon-deprecated-upcoming.scss b/Safa- Levi/Day2/scss/bourbon/_bourbon-deprecated-upcoming.scss new file mode 100644 index 0000000..f946b3b --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/_bourbon-deprecated-upcoming.scss @@ -0,0 +1,8 @@ +//************************************************************************// +// These mixins/functions are deprecated +// They will be removed in the next MAJOR version release +//************************************************************************// +@mixin inline-block { + display: inline-block; + @warn "inline-block mixin is deprecated and will be removed in the next major version release"; +} diff --git a/Safa- Levi/Day2/scss/bourbon/_bourbon.scss b/Safa- Levi/Day2/scss/bourbon/_bourbon.scss new file mode 100644 index 0000000..eea6e21 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/_bourbon.scss @@ -0,0 +1,79 @@ +// Settings +@import "settings/prefixer"; +@import "settings/px-to-em"; +@import "settings/asset-pipeline"; + +// Custom Helpers +@import "helpers/convert-units"; +@import "helpers/gradient-positions-parser"; +@import "helpers/is-num"; +@import "helpers/linear-angle-parser"; +@import "helpers/linear-gradient-parser"; +@import "helpers/linear-positions-parser"; +@import "helpers/linear-side-corner-parser"; +@import "helpers/radial-arg-parser"; +@import "helpers/radial-positions-parser"; +@import "helpers/radial-gradient-parser"; +@import "helpers/render-gradients"; +@import "helpers/shape-size-stripper"; +@import "helpers/str-to-num"; + +// Custom Functions +@import "functions/assign"; +@import "functions/color-lightness"; +@import "functions/flex-grid"; +@import "functions/golden-ratio"; +@import "functions/grid-width"; +@import "functions/modular-scale"; +@import "functions/px-to-em"; +@import "functions/px-to-rem"; +@import "functions/strip-units"; +@import "functions/tint-shade"; +@import "functions/transition-property-name"; +@import "functions/unpack"; + +// CSS3 Mixins +@import "css3/animation"; +@import "css3/appearance"; +@import "css3/backface-visibility"; +@import "css3/background"; +@import "css3/background-image"; +@import "css3/border-image"; +@import "css3/border-radius"; +@import "css3/box-sizing"; +@import "css3/calc"; +@import "css3/columns"; +@import "css3/filter"; +@import "css3/flex-box"; +@import "css3/font-face"; +@import "css3/font-feature-settings"; +@import "css3/hyphens"; +@import "css3/hidpi-media-query"; +@import "css3/image-rendering"; +@import "css3/keyframes"; +@import "css3/linear-gradient"; +@import "css3/perspective"; +@import "css3/radial-gradient"; +@import "css3/transform"; +@import "css3/transition"; +@import "css3/user-select"; +@import "css3/placeholder"; + +// Addons & other mixins +@import "addons/button"; +@import "addons/clearfix"; +@import "addons/directional-values"; +@import "addons/ellipsis"; +@import "addons/font-family"; +@import "addons/hide-text"; +@import "addons/html5-input-types"; +@import "addons/position"; +@import "addons/prefixer"; +@import "addons/retina-image"; +@import "addons/size"; +@import "addons/timing-functions"; +@import "addons/triangle"; +@import "addons/word-wrap"; + +// Soon to be deprecated Mixins +@import "bourbon-deprecated-upcoming"; diff --git a/Safa- Levi/Day2/scss/bourbon/addons/_button.scss b/Safa- Levi/Day2/scss/bourbon/addons/_button.scss new file mode 100644 index 0000000..14a89e4 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/addons/_button.scss @@ -0,0 +1,374 @@ +@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) { + + @if type-of($style) == string and type-of($base-color) == color { + @include buttonstyle($style, $base-color, $text-size, $padding); + } + + @if type-of($style) == string and type-of($base-color) == number { + $padding: $text-size; + $text-size: $base-color; + $base-color: #4294f0; + + @if $padding == inherit { + $padding: 7px 18px; + } + + @include buttonstyle($style, $base-color, $text-size, $padding); + } + + @if type-of($style) == color and type-of($base-color) == color { + $base-color: $style; + $style: simple; + @include buttonstyle($style, $base-color, $text-size, $padding); + } + + @if type-of($style) == color and type-of($base-color) == number { + $padding: $text-size; + $text-size: $base-color; + $base-color: $style; + $style: simple; + + @if $padding == inherit { + $padding: 7px 18px; + } + + @include buttonstyle($style, $base-color, $text-size, $padding); + } + + @if type-of($style) == number { + $padding: $base-color; + $text-size: $style; + $base-color: #4294f0; + $style: simple; + + @if $padding == #4294f0 { + $padding: 7px 18px; + } + + @include buttonstyle($style, $base-color, $text-size, $padding); + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } +} + + +// Selector Style Button +//************************************************************************// +@mixin buttonstyle($type, $b-color, $t-size, $pad) { + // Grayscale button + @if $type == simple and $b-color == grayscale($b-color) { + @include simple($b-color, true, $t-size, $pad); + } + + @if $type == shiny and $b-color == grayscale($b-color) { + @include shiny($b-color, true, $t-size, $pad); + } + + @if $type == pill and $b-color == grayscale($b-color) { + @include pill($b-color, true, $t-size, $pad); + } + + @if $type == flat and $b-color == grayscale($b-color) { + @include flat($b-color, true, $t-size, $pad); + } + + // Colored button + @if $type == simple { + @include simple($b-color, false, $t-size, $pad); + } + + @else if $type == shiny { + @include shiny($b-color, false, $t-size, $pad); + } + + @else if $type == pill { + @include pill($b-color, false, $t-size, $pad); + } + + @else if $type == flat { + @include flat($b-color, false, $t-size, $pad); + } +} + + +// Simple Button +//************************************************************************// +@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); + $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); + $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); + + @if is-light($base-color) { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border: grayscale($border); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + + border: 1px solid $border; + border-radius: 3px; + box-shadow: inset 0 1px 0 0 $inset-shadow; + color: $color; + display: inline-block; + font-size: $textsize; + font-weight: bold; + @include linear-gradient ($base-color, $stop-gradient); + padding: $padding; + text-decoration: none; + text-shadow: 0 1px 0 $text-shadow; + background-clip: padding-box; + + &:hover:not(:disabled) { + $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); + $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + } + + box-shadow: inset 0 1px 0 0 $inset-shadow-hover; + cursor: pointer; + @include linear-gradient ($base-color-hover, $stop-gradient-hover); + } + + &:active:not(:disabled), + &:focus:not(:disabled) { + $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); + + @if $grayscale == true { + $border-active: grayscale($border-active); + $inset-shadow-active: grayscale($inset-shadow-active); + } + + border: 1px solid $border-active; + box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active; + } +} + + +// Shiny Button +//************************************************************************// +@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); + $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); + $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); + $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); + $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); + $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); + $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); + + @if is-light($base-color) { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border: grayscale($border); + $border-bottom: grayscale($border-bottom); + $fourth-stop: grayscale($fourth-stop); + $inset-shadow: grayscale($inset-shadow); + $second-stop: grayscale($second-stop); + $text-shadow: grayscale($text-shadow); + $third-stop: grayscale($third-stop); + } + + border: 1px solid $border; + border-bottom: 1px solid $border-bottom; + border-radius: 5px; + box-shadow: inset 0 1px 0 0 $inset-shadow; + color: $color; + display: inline-block; + font-size: $textsize; + font-weight: bold; + @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); + padding: $padding; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px $text-shadow; + + &:hover:not(:disabled) { + $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); + $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); + $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); + $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); + + @if $grayscale == true { + $first-stop-hover: grayscale($first-stop-hover); + $second-stop-hover: grayscale($second-stop-hover); + $third-stop-hover: grayscale($third-stop-hover); + $fourth-stop-hover: grayscale($fourth-stop-hover); + } + + cursor: pointer; + @include linear-gradient(top, $first-stop-hover 0%, + $second-stop-hover 50%, + $third-stop-hover 50%, + $fourth-stop-hover 100%); + } + + &:active:not(:disabled), + &:focus:not(:disabled) { + $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); + + @if $grayscale == true { + $inset-shadow-active: grayscale($inset-shadow-active); + } + + box-shadow: inset 0 0 20px 0 $inset-shadow-active; + } +} + + +// Pill Button +//************************************************************************// +@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { + $color: hsl(0, 0, 100%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); + $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); + $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); + $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); + + @if is-light($base-color) { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + + border: 1px solid $border-top; + border-color: $border-top $border-sides $border-bottom; + border-radius: 16px; + box-shadow: inset 0 1px 0 0 $inset-shadow; + color: $color; + display: inline-block; + font-size: $textsize; + font-weight: normal; + line-height: 1; + @include linear-gradient ($base-color, $stop-gradient); + padding: $padding; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px $text-shadow; + background-clip: padding-box; + + &:hover:not(:disabled) { + $base-color-hover: adjust-color($base-color, $lightness: -4.5%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); + $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); + $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + $text-shadow-hover: grayscale($text-shadow-hover); + } + + border: 1px solid $border-top; + border-color: $border-top $border-sides $border-bottom; + box-shadow: inset 0 1px 0 0 $inset-shadow-hover; + cursor: pointer; + @include linear-gradient ($base-color-hover, $stop-gradient-hover); + text-shadow: 0 -1px 1px $text-shadow-hover; + background-clip: padding-box; + } + + &:active:not(:disabled), + &:focus:not(:disabled) { + $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); + $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); + $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); + $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); + $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); + + @if $grayscale == true { + $active-color: grayscale($active-color); + $border-active: grayscale($border-active); + $border-bottom-active: grayscale($border-bottom-active); + $inset-shadow-active: grayscale($inset-shadow-active); + $text-shadow-active: grayscale($text-shadow-active); + } + + background: $active-color; + border: 1px solid $border-active; + border-bottom: 1px solid $border-bottom-active; + box-shadow: inset 0 0 6px 3px $inset-shadow-active; + text-shadow: 0 -1px 1px $text-shadow-active; + } +} + + + +// Flat Button +//************************************************************************// +@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { + $color: hsl(0, 0, 100%); + + @if is-light($base-color) { + $color: hsl(0, 0, 20%); + } + + background-color: $base-color; + border-radius: 3px; + border: none; + color: $color; + display: inline-block; + font-size: inherit; + font-weight: bold; + padding: 7px 18px; + text-decoration: none; + background-clip: padding-box; + + &:hover:not(:disabled){ + $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + } + + background-color: $base-color-hover; + cursor: pointer; + } + + &:active:not(:disabled), + &:focus:not(:disabled) { + $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + + @if $grayscale == true { + $base-color-active: grayscale($base-color-active); + } + + background-color: $base-color-active; + cursor: pointer; + } +} diff --git a/Safa- Levi/Day2/scss/bourbon/addons/_clearfix.scss b/Safa- Levi/Day2/scss/bourbon/addons/_clearfix.scss new file mode 100644 index 0000000..783cfbc --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/addons/_clearfix.scss @@ -0,0 +1,23 @@ +// Modern micro clearfix provides an easy way to contain floats without adding additional markup. +// +// Example usage: +// +// // Contain all floats within .wrapper +// .wrapper { +// @include clearfix; +// .content, +// .sidebar { +// float : left; +// } +// } + +@mixin clearfix { + &:after { + content:""; + display:table; + clear:both; + } +} + +// Acknowledgements +// Beat *that* clearfix: [Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php) diff --git a/Safa- Levi/Day2/scss/bourbon/addons/_directional-values.scss b/Safa- Levi/Day2/scss/bourbon/addons/_directional-values.scss new file mode 100644 index 0000000..742f103 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/addons/_directional-values.scss @@ -0,0 +1,111 @@ +// directional-property mixins are shorthands +// for writing properties like the following +// +// @include margin(null 0 10px); +// ------ +// margin-right: 0; +// margin-bottom: 10px; +// margin-left: 0; +// +// - or - +// +// @include border-style(dotted null); +// ------ +// border-top-style: dotted; +// border-bottom-style: dotted; +// +// ------ +// +// Note: You can also use false instead of null + +@function collapse-directionals($vals) { + $output: null; + + $A: nth( $vals, 1 ); + $B: if( length($vals) < 2, $A, nth($vals, 2)); + $C: if( length($vals) < 3, $A, nth($vals, 3)); + $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) )); + + @if $A == 0 { $A: 0 } + @if $B == 0 { $B: 0 } + @if $C == 0 { $C: 0 } + @if $D == 0 { $D: 0 } + + @if $A == $B and $A == $C and $A == $D { $output: $A } + @else if $A == $C and $B == $D { $output: $A $B } + @else if $B == $D { $output: $A $B $C } + @else { $output: $A $B $C $D } + + @return $output; +} + +@function contains-falsy($list) { + @each $item in $list { + @if not $item { + @return true; + } + } + + @return false; +} + +@mixin directional-property($pre, $suf, $vals) { + // Property Names + $top: $pre + "-top" + if($suf, "-#{$suf}", ""); + $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); + $left: $pre + "-left" + if($suf, "-#{$suf}", ""); + $right: $pre + "-right" + if($suf, "-#{$suf}", ""); + $all: $pre + if($suf, "-#{$suf}", ""); + + $vals: collapse-directionals($vals); + + @if contains-falsy($vals) { + @if nth($vals, 1) { #{$top}: nth($vals, 1); } + + @if length($vals) == 1 { + @if nth($vals, 1) { #{$right}: nth($vals, 1); } + } @else { + @if nth($vals, 2) { #{$right}: nth($vals, 2); } + } + + // prop: top/bottom right/left + @if length($vals) == 2 { + @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } + @if nth($vals, 2) { #{$left}: nth($vals, 2); } + + // prop: top right/left bottom + } @else if length($vals) == 3 { + @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } + @if nth($vals, 2) { #{$left}: nth($vals, 2); } + + // prop: top right bottom left + } @else if length($vals) == 4 { + @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } + @if nth($vals, 4) { #{$left}: nth($vals, 4); } + } + + // prop: top/right/bottom/left + } @else { + #{$all}: $vals; + } +} + +@mixin margin($vals...) { + @include directional-property(margin, false, $vals...); +} + +@mixin padding($vals...) { + @include directional-property(padding, false, $vals...); +} + +@mixin border-style($vals...) { + @include directional-property(border, style, $vals...); +} + +@mixin border-color($vals...) { + @include directional-property(border, color, $vals...); +} + +@mixin border-width($vals...) { + @include directional-property(border, width, $vals...); +} diff --git a/Safa- Levi/Day2/scss/bourbon/addons/_ellipsis.scss b/Safa- Levi/Day2/scss/bourbon/addons/_ellipsis.scss new file mode 100644 index 0000000..a8ea2a4 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/addons/_ellipsis.scss @@ -0,0 +1,7 @@ +@mixin ellipsis($width: 100%) { + display: inline-block; + max-width: $width; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/Safa- Levi/Day2/scss/bourbon/addons/_font-family.scss b/Safa- Levi/Day2/scss/bourbon/addons/_font-family.scss new file mode 100644 index 0000000..31f5d9c --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/addons/_font-family.scss @@ -0,0 +1,5 @@ +$georgia: Georgia, Cambria, "Times New Roman", Times, serif; +$helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; +$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; +$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; +$verdana: Verdana, Geneva, sans-serif; diff --git a/Safa- Levi/Day2/scss/bourbon/addons/_hide-text.scss b/Safa- Levi/Day2/scss/bourbon/addons/_hide-text.scss new file mode 100644 index 0000000..fc79438 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/addons/_hide-text.scss @@ -0,0 +1,10 @@ +@mixin hide-text { + overflow: hidden; + + &:before { + content: ""; + display: block; + width: 0; + height: 100%; + } +} diff --git a/Safa- Levi/Day2/scss/bourbon/addons/_html5-input-types.scss b/Safa- Levi/Day2/scss/bourbon/addons/_html5-input-types.scss new file mode 100644 index 0000000..9e9324a --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/addons/_html5-input-types.scss @@ -0,0 +1,86 @@ +//************************************************************************// +// Generate a variable ($all-text-inputs) with a list of all html5 +// input types that have a text-based input, excluding textarea. +// http://diveintohtml5.org/forms.html +//************************************************************************// +$inputs-list: 'input[type="email"]', + 'input[type="number"]', + 'input[type="password"]', + 'input[type="search"]', + 'input[type="tel"]', + 'input[type="text"]', + 'input[type="url"]', + + // Webkit & Gecko may change the display of these in the future + 'input[type="color"]', + 'input[type="date"]', + 'input[type="datetime"]', + 'input[type="datetime-local"]', + 'input[type="month"]', + 'input[type="time"]', + 'input[type="week"]'; + +// Bare inputs +//************************************************************************// +$all-text-inputs: assign-inputs($inputs-list); + +// Hover Pseudo-class +//************************************************************************// +$all-text-inputs-hover: assign-inputs($inputs-list, hover); + +// Focus Pseudo-class +//************************************************************************// +$all-text-inputs-focus: assign-inputs($inputs-list, focus); + + + +// You must use interpolation on the variable: +// #{$all-text-inputs} +// #{$all-text-inputs-hover} +// #{$all-text-inputs-focus} + +// Example +//************************************************************************// +// #{$all-text-inputs}, textarea { +// border: 1px solid red; +// } + + + +//************************************************************************// +// Generate a variable ($all-button-inputs) with a list of all html5 +// input types that have a button-based input, excluding button. +//************************************************************************// +$inputs-button-list: 'input[type="button"]', + 'input[type="reset"]', + 'input[type="submit"]'; + +// Bare inputs +//************************************************************************// +$all-button-inputs: assign-inputs($inputs-button-list); + +// Hover Pseudo-class +//************************************************************************// +$all-button-inputs-hover: assign-inputs($inputs-button-list, hover); + +// Focus Pseudo-class +//************************************************************************// +$all-button-inputs-focus: assign-inputs($inputs-button-list, focus); + +// Active Pseudo-class +//************************************************************************// +$all-button-inputs-active: assign-inputs($inputs-button-list, active); + + + +// You must use interpolation on the variable: +// #{$all-button-inputs} +// #{$all-button-inputs-hover} +// #{$all-button-inputs-focus} +// #{$all-button-inputs-active} + +// Example +//************************************************************************// +// #{$all-button-inputs}, button { +// border: 1px solid red; +// } diff --git a/Safa- Levi/Day2/scss/bourbon/addons/_position.scss b/Safa- Levi/Day2/scss/bourbon/addons/_position.scss new file mode 100644 index 0000000..7de7518 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/addons/_position.scss @@ -0,0 +1,32 @@ +@mixin position ($position: relative, $coordinates: null null null null) { + + @if type-of($position) == list { + $coordinates: $position; + $position: relative; + } + + $coordinates: unpack($coordinates); + + $top: nth($coordinates, 1); + $right: nth($coordinates, 2); + $bottom: nth($coordinates, 3); + $left: nth($coordinates, 4); + + position: $position; + + @if ($top and $top == auto) or (type-of($top) == number) { + top: $top; + } + + @if ($right and $right == auto) or (type-of($right) == number) { + right: $right; + } + + @if ($bottom and $bottom == auto) or (type-of($bottom) == number) { + bottom: $bottom; + } + + @if ($left and $left == auto) or (type-of($left) == number) { + left: $left; + } +} diff --git a/Safa- Levi/Day2/scss/bourbon/addons/_prefixer.scss b/Safa- Levi/Day2/scss/bourbon/addons/_prefixer.scss new file mode 100644 index 0000000..c32f502 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/addons/_prefixer.scss @@ -0,0 +1,45 @@ +//************************************************************************// +// Example: @include prefixer(border-radius, $radii, webkit ms spec); +//************************************************************************// +// Variables located in /settings/_prefixer.scss + +@mixin prefixer ($property, $value, $prefixes) { + @each $prefix in $prefixes { + @if $prefix == webkit { + @if $prefix-for-webkit { + -webkit-#{$property}: $value; + } + } + @else if $prefix == moz { + @if $prefix-for-mozilla { + -moz-#{$property}: $value; + } + } + @else if $prefix == ms { + @if $prefix-for-microsoft { + -ms-#{$property}: $value; + } + } + @else if $prefix == o { + @if $prefix-for-opera { + -o-#{$property}: $value; + } + } + @else if $prefix == spec { + @if $prefix-for-spec { + #{$property}: $value; + } + } + @else { + @warn "Unrecognized prefix: #{$prefix}"; + } + } +} + +@mixin disable-prefix-for-all() { + $prefix-for-webkit: false !global; + $prefix-for-mozilla: false !global; + $prefix-for-microsoft: false !global; + $prefix-for-opera: false !global; + $prefix-for-spec: false !global; +} diff --git a/Safa- Levi/Day2/scss/bourbon/addons/_retina-image.scss b/Safa- Levi/Day2/scss/bourbon/addons/_retina-image.scss new file mode 100644 index 0000000..3995c19 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/addons/_retina-image.scss @@ -0,0 +1,31 @@ +@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) { + @if $asset-pipeline { + background-image: image-url("#{$filename}.#{$extension}"); + } + @else { + background-image: url("#{$filename}.#{$extension}"); + } + + @include hidpi { + @if $asset-pipeline { + @if $retina-filename { + background-image: image-url("#{$retina-filename}.#{$extension}"); + } + @else { + background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); + } + } + + @else { + @if $retina-filename { + background-image: url("#{$retina-filename}.#{$extension}"); + } + @else { + background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); + } + } + + background-size: $background-size; + + } +} diff --git a/Safa- Levi/Day2/scss/bourbon/addons/_size.scss b/Safa- Levi/Day2/scss/bourbon/addons/_size.scss new file mode 100644 index 0000000..a865379 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/addons/_size.scss @@ -0,0 +1,16 @@ +@mixin size($size) { + $height: nth($size, 1); + $width: $height; + + @if length($size) > 1 { + $height: nth($size, 2); + } + + @if $height == auto or (type-of($height) == number and not unitless($height)) { + height: $height; + } + + @if $width == auto or (type-of($width) == number and not unitless($width)) { + width: $width; + } +} diff --git a/Safa- Levi/Day2/scss/bourbon/addons/_timing-functions.scss b/Safa- Levi/Day2/scss/bourbon/addons/_timing-functions.scss new file mode 100644 index 0000000..5ecc6f9 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/addons/_timing-functions.scss @@ -0,0 +1,32 @@ +// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) +// Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html + +// EASE IN +$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); +$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); +$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); +$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); +$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); +$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); +$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); +$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); + +// EASE OUT +$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); +$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); +$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); +$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); +$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); +$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); +$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); +$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); + +// EASE IN OUT +$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); +$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); +$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); +$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); +$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); +$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); +$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); +$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); diff --git a/Safa- Levi/Day2/scss/bourbon/addons/_triangle.scss b/Safa- Levi/Day2/scss/bourbon/addons/_triangle.scss new file mode 100644 index 0000000..573954e --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/addons/_triangle.scss @@ -0,0 +1,83 @@ +@mixin triangle ($size, $color, $direction) { + height: 0; + width: 0; + + $width: nth($size, 1); + $height: nth($size, length($size)); + + $foreground-color: nth($color, 1); + $background-color: if(length($color) == 2, nth($color, 2), transparent); + + @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { + + $width: $width / 2; + $height: if(length($size) > 1, $height, $height/2); + + @if $direction == up { + border-left: $width solid $background-color; + border-right: $width solid $background-color; + border-bottom: $height solid $foreground-color; + + } @else if $direction == right { + border-top: $width solid $background-color; + border-bottom: $width solid $background-color; + border-left: $height solid $foreground-color; + + } @else if $direction == down { + border-left: $width solid $background-color; + border-right: $width solid $background-color; + border-top: $height solid $foreground-color; + + } @else if $direction == left { + border-top: $width solid $background-color; + border-bottom: $width solid $background-color; + border-right: $height solid $foreground-color; + } + } + + @else if ($direction == up-right) or ($direction == up-left) { + border-top: $height solid $foreground-color; + + @if $direction == up-right { + border-left: $width solid $background-color; + + } @else if $direction == up-left { + border-right: $width solid $background-color; + } + } + + @else if ($direction == down-right) or ($direction == down-left) { + border-bottom: $height solid $foreground-color; + + @if $direction == down-right { + border-left: $width solid $background-color; + + } @else if $direction == down-left { + border-right: $width solid $background-color; + } + } + + @else if ($direction == inset-up) { + border-width: $height $width; + border-style: solid; + border-color: $background-color $background-color $foreground-color; + } + + @else if ($direction == inset-down) { + border-width: $height $width; + border-style: solid; + border-color: $foreground-color $background-color $background-color; + } + + @else if ($direction == inset-right) { + border-width: $width $height; + border-style: solid; + border-color: $background-color $background-color $background-color $foreground-color; + } + + @else if ($direction == inset-left) { + border-width: $width $height; + border-style: solid; + border-color: $background-color $foreground-color $background-color $background-color; + } +} diff --git a/Safa- Levi/Day2/scss/bourbon/addons/_word-wrap.scss b/Safa- Levi/Day2/scss/bourbon/addons/_word-wrap.scss new file mode 100644 index 0000000..9734a59 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/addons/_word-wrap.scss @@ -0,0 +1,8 @@ +@mixin word-wrap($wrap: break-word) { + word-wrap: $wrap; + + @if $wrap == break-word { + overflow-wrap: break-word; + word-break: break-all; + } +} diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_animation.scss b/Safa- Levi/Day2/scss/bourbon/css3/_animation.scss new file mode 100644 index 0000000..08c3dbf --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_animation.scss @@ -0,0 +1,52 @@ +// http://www.w3.org/TR/css3-animations/#the-animation-name-property- +// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. + +// Official animation shorthand property. +@mixin animation ($animations...) { + @include prefixer(animation, $animations, webkit moz spec); +} + +// Individual Animation Properties +@mixin animation-name ($names...) { + @include prefixer(animation-name, $names, webkit moz spec); +} + + +@mixin animation-duration ($times...) { + @include prefixer(animation-duration, $times, webkit moz spec); +} + + +@mixin animation-timing-function ($motions...) { +// ease | linear | ease-in | ease-out | ease-in-out + @include prefixer(animation-timing-function, $motions, webkit moz spec); +} + + +@mixin animation-iteration-count ($values...) { +// infinite | + @include prefixer(animation-iteration-count, $values, webkit moz spec); +} + + +@mixin animation-direction ($directions...) { +// normal | alternate + @include prefixer(animation-direction, $directions, webkit moz spec); +} + + +@mixin animation-play-state ($states...) { +// running | paused + @include prefixer(animation-play-state, $states, webkit moz spec); +} + + +@mixin animation-delay ($times...) { + @include prefixer(animation-delay, $times, webkit moz spec); +} + + +@mixin animation-fill-mode ($modes...) { +// none | forwards | backwards | both + @include prefixer(animation-fill-mode, $modes, webkit moz spec); +} diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_appearance.scss b/Safa- Levi/Day2/scss/bourbon/css3/_appearance.scss new file mode 100644 index 0000000..3eb16e4 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_appearance.scss @@ -0,0 +1,3 @@ +@mixin appearance ($value) { + @include prefixer(appearance, $value, webkit moz ms o spec); +} diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_backface-visibility.scss b/Safa- Levi/Day2/scss/bourbon/css3/_backface-visibility.scss new file mode 100644 index 0000000..1161fe6 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_backface-visibility.scss @@ -0,0 +1,6 @@ +//************************************************************************// +// Backface-visibility mixin +//************************************************************************// +@mixin backface-visibility($visibility) { + @include prefixer(backface-visibility, $visibility, webkit spec); +} diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_background-image.scss b/Safa- Levi/Day2/scss/bourbon/css3/_background-image.scss new file mode 100644 index 0000000..6abe88b --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_background-image.scss @@ -0,0 +1,42 @@ +//************************************************************************// +// Background-image property for adding multiple background images with +// gradients, or for stringing multiple gradients together. +//************************************************************************// + +@mixin background-image($images...) { + $webkit-images: (); + $spec-images: (); + + @each $image in $images { + $webkit-image: (); + $spec-image: (); + + @if (type-of($image) == string) { + $url-str: str-slice($image, 0, 3); + $gradient-type: str-slice($image, 0, 6); + + @if $url-str == "url" { + $webkit-image: $image; + $spec-image: $image; + } + + @else if $gradient-type == "linear" { + $gradients: _linear-gradient-parser($image); + $webkit-image: map-get($gradients, webkit-image); + $spec-image: map-get($gradients, spec-image); + } + + @else if $gradient-type == "radial" { + $gradients: _radial-gradient-parser($image); + $webkit-image: map-get($gradients, webkit-image); + $spec-image: map-get($gradients, spec-image); + } + } + + $webkit-images: append($webkit-images, $webkit-image, comma); + $spec-images: append($spec-images, $spec-image, comma); + } + + background-image: $webkit-images; + background-image: $spec-images; +} diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_background.scss b/Safa- Levi/Day2/scss/bourbon/css3/_background.scss new file mode 100644 index 0000000..9bce930 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_background.scss @@ -0,0 +1,55 @@ +//************************************************************************// +// Background property for adding multiple backgrounds using shorthand +// notation. +//************************************************************************// + +@mixin background($backgrounds...) { + $webkit-backgrounds: (); + $spec-backgrounds: (); + + @each $background in $backgrounds { + $webkit-background: (); + $spec-background: (); + $background-type: type-of($background); + + @if $background-type == string or list { + $background-str: if($background-type == list, nth($background, 1), $background); + + $url-str: str-slice($background-str, 0, 3); + $gradient-type: str-slice($background-str, 0, 6); + + @if $url-str == "url" { + $webkit-background: $background; + $spec-background: $background; + } + + @else if $gradient-type == "linear" { + $gradients: _linear-gradient-parser("#{$background}"); + $webkit-background: map-get($gradients, webkit-image); + $spec-background: map-get($gradients, spec-image); + } + + @else if $gradient-type == "radial" { + $gradients: _radial-gradient-parser("#{$background}"); + $webkit-background: map-get($gradients, webkit-image); + $spec-background: map-get($gradients, spec-image); + } + + @else { + $webkit-background: $background; + $spec-background: $background; + } + } + + @else { + $webkit-background: $background; + $spec-background: $background; + } + + $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); + $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); + } + + background: $webkit-backgrounds; + background: $spec-backgrounds; +} diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_border-image.scss b/Safa- Levi/Day2/scss/bourbon/css3/_border-image.scss new file mode 100644 index 0000000..e338c2d --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_border-image.scss @@ -0,0 +1,59 @@ +@mixin border-image($borders...) { + $webkit-borders: (); + $spec-borders: (); + + @each $border in $borders { + $webkit-border: (); + $spec-border: (); + $border-type: type-of($border); + + @if $border-type == string or list { + $border-str: if($border-type == list, nth($border, 1), $border); + + $url-str: str-slice($border-str, 0, 3); + $gradient-type: str-slice($border-str, 0, 6); + + @if $url-str == "url" { + $webkit-border: $border; + $spec-border: $border; + } + + @else if $gradient-type == "linear" { + $gradients: _linear-gradient-parser("#{$border}"); + $webkit-border: map-get($gradients, webkit-image); + $spec-border: map-get($gradients, spec-image); + } + + @else if $gradient-type == "radial" { + $gradients: _radial-gradient-parser("#{$border}"); + $webkit-border: map-get($gradients, webkit-image); + $spec-border: map-get($gradients, spec-image); + } + + @else { + $webkit-border: $border; + $spec-border: $border; + } + } + + @else { + $webkit-border: $border; + $spec-border: $border; + } + + $webkit-borders: append($webkit-borders, $webkit-border, comma); + $spec-borders: append($spec-borders, $spec-border, comma); + } + + -webkit-border-image: $webkit-borders; + border-image: $spec-borders; + border-style: solid; +} + +//Examples: +// @include border-image(url("image.png")); +// @include border-image(url("image.png") 20 stretch); +// @include border-image(linear-gradient(45deg, orange, yellow)); +// @include border-image(linear-gradient(45deg, orange, yellow) stretch); +// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); +// @include border-image(radial-gradient(top, cover, orange, yellow, orange)); diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_border-radius.scss b/Safa- Levi/Day2/scss/bourbon/css3/_border-radius.scss new file mode 100644 index 0000000..7c17190 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_border-radius.scss @@ -0,0 +1,22 @@ +//************************************************************************// +// Shorthand Border-radius mixins +//************************************************************************// +@mixin border-top-radius($radii) { + @include prefixer(border-top-left-radius, $radii, spec); + @include prefixer(border-top-right-radius, $radii, spec); +} + +@mixin border-bottom-radius($radii) { + @include prefixer(border-bottom-left-radius, $radii, spec); + @include prefixer(border-bottom-right-radius, $radii, spec); +} + +@mixin border-left-radius($radii) { + @include prefixer(border-top-left-radius, $radii, spec); + @include prefixer(border-bottom-left-radius, $radii, spec); +} + +@mixin border-right-radius($radii) { + @include prefixer(border-top-right-radius, $radii, spec); + @include prefixer(border-bottom-right-radius, $radii, spec); +} diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_box-sizing.scss b/Safa- Levi/Day2/scss/bourbon/css3/_box-sizing.scss new file mode 100644 index 0000000..f07e1d4 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_box-sizing.scss @@ -0,0 +1,4 @@ +@mixin box-sizing ($box) { +// content-box | border-box | inherit + @include prefixer(box-sizing, $box, webkit moz spec); +} diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_calc.scss b/Safa- Levi/Day2/scss/bourbon/css3/_calc.scss new file mode 100644 index 0000000..94d7e4c --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_calc.scss @@ -0,0 +1,4 @@ +@mixin calc($property, $value) { + #{$property}: -webkit-calc(#{$value}); + #{$property}: calc(#{$value}); +} diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_columns.scss b/Safa- Levi/Day2/scss/bourbon/css3/_columns.scss new file mode 100644 index 0000000..96f601c --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_columns.scss @@ -0,0 +1,47 @@ +@mixin columns($arg: auto) { +// || + @include prefixer(columns, $arg, webkit moz spec); +} + +@mixin column-count($int: auto) { +// auto || integer + @include prefixer(column-count, $int, webkit moz spec); +} + +@mixin column-gap($length: normal) { +// normal || length + @include prefixer(column-gap, $length, webkit moz spec); +} + +@mixin column-fill($arg: auto) { +// auto || length + @include prefixer(column-fill, $arg, webkit moz spec); +} + +@mixin column-rule($arg) { +// || || + @include prefixer(column-rule, $arg, webkit moz spec); +} + +@mixin column-rule-color($color) { + @include prefixer(column-rule-color, $color, webkit moz spec); +} + +@mixin column-rule-style($style: none) { +// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid + @include prefixer(column-rule-style, $style, webkit moz spec); +} + +@mixin column-rule-width ($width: none) { + @include prefixer(column-rule-width, $width, webkit moz spec); +} + +@mixin column-span($arg: none) { +// none || all + @include prefixer(column-span, $arg, webkit moz spec); +} + +@mixin column-width($length: auto) { +// auto || length + @include prefixer(column-width, $length, webkit moz spec); +} diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_filter.scss b/Safa- Levi/Day2/scss/bourbon/css3/_filter.scss new file mode 100644 index 0000000..8560d77 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_filter.scss @@ -0,0 +1,5 @@ +@mixin filter($function: none) { + // [ + @include prefixer(perspective, $depth, webkit moz spec); +} + +@mixin perspective-origin($value: 50% 50%) { + @include prefixer(perspective-origin, $value, webkit moz spec); +} diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_placeholder.scss b/Safa- Levi/Day2/scss/bourbon/css3/_placeholder.scss new file mode 100644 index 0000000..5682fd0 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_placeholder.scss @@ -0,0 +1,8 @@ +@mixin placeholder { + $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; + @each $placeholder in $placeholders { + &:#{$placeholder}-placeholder { + @content; + } + } +} diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_radial-gradient.scss b/Safa- Levi/Day2/scss/bourbon/css3/_radial-gradient.scss new file mode 100644 index 0000000..7a8c376 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_radial-gradient.scss @@ -0,0 +1,39 @@ +// Requires Sass 3.1+ +@mixin radial-gradient($G1, $G2, + $G3: null, $G4: null, + $G5: null, $G6: null, + $G7: null, $G8: null, + $G9: null, $G10: null, + $pos: null, + $shape-size: null, + $fallback: null) { + + $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); + $G1: nth($data, 1); + $G2: nth($data, 2); + $pos: nth($data, 3); + $shape-size: nth($data, 4); + + $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10; + + // Strip deprecated cover/contain for spec + $shape-size-spec: _shape-size-stripper($shape-size); + + // Set $G1 as the default fallback color + $first-color: nth($full, 1); + $fallback-color: nth($first-color, 1); + + @if (type-of($fallback) == color) or ($fallback == "transparent") { + $fallback-color: $fallback; + } + + // Add Commas and spaces + $shape-size: if($shape-size, '#{$shape-size}, ', null); + $pos: if($pos, '#{$pos}, ', null); + $pos-spec: if($pos, 'at #{$pos}', null); + $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); + + background-color: $fallback-color; + background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); + background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); +} diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_transform.scss b/Safa- Levi/Day2/scss/bourbon/css3/_transform.scss new file mode 100644 index 0000000..8cc3596 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_transform.scss @@ -0,0 +1,15 @@ +@mixin transform($property: none) { +// none | + @include prefixer(transform, $property, webkit moz ms o spec); +} + +@mixin transform-origin($axes: 50%) { +// x-axis - left | center | right | length | % +// y-axis - top | center | bottom | length | % +// z-axis - length + @include prefixer(transform-origin, $axes, webkit moz ms o spec); +} + +@mixin transform-style ($style: flat) { + @include prefixer(transform-style, $style, webkit moz ms o spec); +} diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_transition.scss b/Safa- Levi/Day2/scss/bourbon/css3/_transition.scss new file mode 100644 index 0000000..5ad4c0a --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_transition.scss @@ -0,0 +1,77 @@ +// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. +// Example: @include transition (all 2s ease-in-out); +// @include transition (opacity 1s ease-in 2s, width 2s ease-out); +// @include transition-property (transform, opacity); + +@mixin transition ($properties...) { + // Fix for vendor-prefix transform property + $needs-prefixes: false; + $webkit: (); + $moz: (); + $spec: (); + + // Create lists for vendor-prefixed transform + @each $list in $properties { + @if nth($list, 1) == "transform" { + $needs-prefixes: true; + $list1: -webkit-transform; + $list2: -moz-transform; + $list3: (); + + @each $var in $list { + $list3: join($list3, $var); + + @if $var != "transform" { + $list1: join($list1, $var); + $list2: join($list2, $var); + } + } + + $webkit: append($webkit, $list1); + $moz: append($moz, $list2); + $spec: append($spec, $list3); + } + + // Create lists for non-prefixed transition properties + @else { + $webkit: append($webkit, $list, comma); + $moz: append($moz, $list, comma); + $spec: append($spec, $list, comma); + } + } + + @if $needs-prefixes { + -webkit-transition: $webkit; + -moz-transition: $moz; + transition: $spec; + } + @else { + @if length($properties) >= 1 { + @include prefixer(transition, $properties, webkit moz spec); + } + + @else { + $properties: all 0.15s ease-out 0s; + @include prefixer(transition, $properties, webkit moz spec); + } + } +} + +@mixin transition-property ($properties...) { + -webkit-transition-property: transition-property-names($properties, 'webkit'); + -moz-transition-property: transition-property-names($properties, 'moz'); + transition-property: transition-property-names($properties, false); +} + +@mixin transition-duration ($times...) { + @include prefixer(transition-duration, $times, webkit moz spec); +} + +@mixin transition-timing-function ($motions...) { +// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() + @include prefixer(transition-timing-function, $motions, webkit moz spec); +} + +@mixin transition-delay ($times...) { + @include prefixer(transition-delay, $times, webkit moz spec); +} diff --git a/Safa- Levi/Day2/scss/bourbon/css3/_user-select.scss b/Safa- Levi/Day2/scss/bourbon/css3/_user-select.scss new file mode 100644 index 0000000..1380aa8 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/css3/_user-select.scss @@ -0,0 +1,3 @@ +@mixin user-select($arg: none) { + @include prefixer(user-select, $arg, webkit moz ms spec); +} diff --git a/Safa- Levi/Day2/scss/bourbon/functions/_assign.scss b/Safa- Levi/Day2/scss/bourbon/functions/_assign.scss new file mode 100644 index 0000000..9a1db93 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/functions/_assign.scss @@ -0,0 +1,11 @@ +@function assign-inputs($inputs, $pseudo: null) { + $list : (); + + @each $input in $inputs { + $input: unquote($input); + $input: if($pseudo, $input + ":" + $pseudo, $input); + $list: append($list, $input, comma); + } + + @return $list; +} \ No newline at end of file diff --git a/Safa- Levi/Day2/scss/bourbon/functions/_color-lightness.scss b/Safa- Levi/Day2/scss/bourbon/functions/_color-lightness.scss new file mode 100644 index 0000000..8c6df4e --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/functions/_color-lightness.scss @@ -0,0 +1,13 @@ +// Programatically determines whether a color is light or dark +// Returns a boolean +// More details here http://robots.thoughtbot.com/closer-look-color-lightness + +@function is-light($hex-color) { + $-local-red: red(rgba($hex-color, 1.0)); + $-local-green: green(rgba($hex-color, 1.0)); + $-local-blue: blue(rgba($hex-color, 1.0)); + + $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255; + + @return $-local-lightness > .6; +} diff --git a/Safa- Levi/Day2/scss/bourbon/functions/_flex-grid.scss b/Safa- Levi/Day2/scss/bourbon/functions/_flex-grid.scss new file mode 100644 index 0000000..3bbd866 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/functions/_flex-grid.scss @@ -0,0 +1,39 @@ +// Flexible grid +@function flex-grid($columns, $container-columns: $fg-max-columns) { + $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($width / $container-width); +} + +// Flexible gutter +@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($gutter / $container-width); +} + +// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. +// This function takes the fluid grid equation (target / context = result) and uses columns to help define each. +// +// The calculation presumes that your column structure will be missing the last gutter: +// +// -- column -- gutter -- column -- gutter -- column +// +// $fg-column: 60px; // Column Width +// $fg-gutter: 25px; // Gutter Width +// $fg-max-columns: 12; // Total Columns For Main Container +// +// div { +// width: flex-grid(4); // returns (315px / 995px) = 31.65829%; +// margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%; +// +// p { +// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; +// float: left; +// margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; +// } +// +// blockquote { +// float: left; +// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; +// } +// } \ No newline at end of file diff --git a/Safa- Levi/Day2/scss/bourbon/functions/_golden-ratio.scss b/Safa- Levi/Day2/scss/bourbon/functions/_golden-ratio.scss new file mode 100644 index 0000000..463d14a --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/functions/_golden-ratio.scss @@ -0,0 +1,3 @@ +@function golden-ratio($value, $increment) { + @return modular-scale($value, $increment, $golden) +} diff --git a/Safa- Levi/Day2/scss/bourbon/functions/_grid-width.scss b/Safa- Levi/Day2/scss/bourbon/functions/_grid-width.scss new file mode 100644 index 0000000..8e63d83 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/functions/_grid-width.scss @@ -0,0 +1,13 @@ +@function grid-width($n) { + @return $n * $gw-column + ($n - 1) * $gw-gutter; +} + +// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. +// +// $gw-column: 100px; // Column Width +// $gw-gutter: 40px; // Gutter Width +// +// div { +// width: grid-width(4); // returns 520px; +// margin-left: $gw-gutter; // returns 40px; +// } diff --git a/Safa- Levi/Day2/scss/bourbon/functions/_modular-scale.scss b/Safa- Levi/Day2/scss/bourbon/functions/_modular-scale.scss new file mode 100644 index 0000000..afc59eb --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/functions/_modular-scale.scss @@ -0,0 +1,66 @@ +// Scaling Variables +$golden: 1.618; +$minor-second: 1.067; +$major-second: 1.125; +$minor-third: 1.2; +$major-third: 1.25; +$perfect-fourth: 1.333; +$augmented-fourth: 1.414; +$perfect-fifth: 1.5; +$minor-sixth: 1.6; +$major-sixth: 1.667; +$minor-seventh: 1.778; +$major-seventh: 1.875; +$octave: 2; +$major-tenth: 2.5; +$major-eleventh: 2.667; +$major-twelfth: 3; +$double-octave: 4; + +@function modular-scale($value, $increment, $ratio) { + $v1: nth($value, 1); + $v2: nth($value, length($value)); + $value: $v1; + + // scale $v2 to just above $v1 + @while $v2 > $v1 { + $v2: ($v2 / $ratio); // will be off-by-1 + } + @while $v2 < $v1 { + $v2: ($v2 * $ratio); // will fix off-by-1 + } + + // check AFTER scaling $v2 to prevent double-counting corner-case + $double-stranded: $v2 > $v1; + + @if $increment > 0 { + @for $i from 1 through $increment { + @if $double-stranded and ($v1 * $ratio) > $v2 { + $value: $v2; + $v2: ($v2 * $ratio); + } @else { + $v1: ($v1 * $ratio); + $value: $v1; + } + } + } + + @if $increment < 0 { + // adjust $v2 to just below $v1 + @if $double-stranded { + $v2: ($v2 / $ratio); + } + + @for $i from $increment through -1 { + @if $double-stranded and ($v1 / $ratio) < $v2 { + $value: $v2; + $v2: ($v2 / $ratio); + } @else { + $v1: ($v1 / $ratio); + $value: $v1; + } + } + } + + @return $value; +} diff --git a/Safa- Levi/Day2/scss/bourbon/functions/_px-to-em.scss b/Safa- Levi/Day2/scss/bourbon/functions/_px-to-em.scss new file mode 100644 index 0000000..4832245 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/functions/_px-to-em.scss @@ -0,0 +1,13 @@ +// Convert pixels to ems +// eg. for a relational value of 12px write em(12) when the parent is 16px +// if the parent is another value say 24px write em(12, 24) + +@function em($pxval, $base: $em-base) { + @if not unitless($pxval) { + $pxval: strip-units($pxval); + } + @if not unitless($base) { + $base: strip-units($base); + } + @return ($pxval / $base) * 1em; +} diff --git a/Safa- Levi/Day2/scss/bourbon/functions/_px-to-rem.scss b/Safa- Levi/Day2/scss/bourbon/functions/_px-to-rem.scss new file mode 100644 index 0000000..96b244e --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/functions/_px-to-rem.scss @@ -0,0 +1,15 @@ +// Convert pixels to rems +// eg. for a relational value of 12px write rem(12) +// Assumes $em-base is the font-size of + +@function rem($pxval) { + @if not unitless($pxval) { + $pxval: strip-units($pxval); + } + + $base: $em-base; + @if not unitless($base) { + $base: strip-units($base); + } + @return ($pxval / $base) * 1rem; +} diff --git a/Safa- Levi/Day2/scss/bourbon/functions/_strip-units.scss b/Safa- Levi/Day2/scss/bourbon/functions/_strip-units.scss new file mode 100644 index 0000000..6afc6e6 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/functions/_strip-units.scss @@ -0,0 +1,5 @@ +// Srtips the units from a value. e.g. 12px -> 12 + +@function strip-units($val) { + @return ($val / ($val * 0 + 1)); +} diff --git a/Safa- Levi/Day2/scss/bourbon/functions/_tint-shade.scss b/Safa- Levi/Day2/scss/bourbon/functions/_tint-shade.scss new file mode 100644 index 0000000..f717200 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/functions/_tint-shade.scss @@ -0,0 +1,9 @@ +// Add percentage of white to a color +@function tint($color, $percent){ + @return mix(white, $color, $percent); +} + +// Add percentage of black to a color +@function shade($color, $percent){ + @return mix(black, $color, $percent); +} diff --git a/Safa- Levi/Day2/scss/bourbon/functions/_transition-property-name.scss b/Safa- Levi/Day2/scss/bourbon/functions/_transition-property-name.scss new file mode 100644 index 0000000..54cd422 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/functions/_transition-property-name.scss @@ -0,0 +1,22 @@ +// Return vendor-prefixed property names if appropriate +// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background +//************************************************************************// +@function transition-property-names($props, $vendor: false) { + $new-props: (); + + @each $prop in $props { + $new-props: append($new-props, transition-property-name($prop, $vendor), comma); + } + + @return $new-props; +} + +@function transition-property-name($prop, $vendor: false) { + // put other properties that need to be prefixed here aswell + @if $vendor and $prop == transform { + @return unquote('-'+$vendor+'-'+$prop); + } + @else { + @return $prop; + } +} \ No newline at end of file diff --git a/Safa- Levi/Day2/scss/bourbon/functions/_unpack.scss b/Safa- Levi/Day2/scss/bourbon/functions/_unpack.scss new file mode 100644 index 0000000..3775963 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/functions/_unpack.scss @@ -0,0 +1,17 @@ +// Convert shorthand to the 4-value syntax + +@function unpack($shorthand) { + @if length($shorthand) == 1 { + @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); + } + @else if length($shorthand) == 2 { + @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); + } + @else if length($shorthand) == 3 { + @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); + } + @else { + @return $shorthand; + } +} + diff --git a/Safa- Levi/Day2/scss/bourbon/helpers/_convert-units.scss b/Safa- Levi/Day2/scss/bourbon/helpers/_convert-units.scss new file mode 100644 index 0000000..3443db3 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/helpers/_convert-units.scss @@ -0,0 +1,15 @@ +//************************************************************************// +// Helper function for str-to-num fn. +// Source: http://sassmeister.com/gist/9647408 +//************************************************************************// +@function _convert-units($number, $unit) { + $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn'; + $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn; + $index: index($strings, $unit); + + @if not $index { + @warn "Unknown unit `#{$unit}`."; + @return false; + } + @return $number * nth($units, $index); +} diff --git a/Safa- Levi/Day2/scss/bourbon/helpers/_gradient-positions-parser.scss b/Safa- Levi/Day2/scss/bourbon/helpers/_gradient-positions-parser.scss new file mode 100644 index 0000000..07d30b6 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/helpers/_gradient-positions-parser.scss @@ -0,0 +1,13 @@ +@function _gradient-positions-parser($gradient-type, $gradient-positions) { + @if $gradient-positions + and ($gradient-type == linear) + and (type-of($gradient-positions) != color) { + $gradient-positions: _linear-positions-parser($gradient-positions); + } + @else if $gradient-positions + and ($gradient-type == radial) + and (type-of($gradient-positions) != color) { + $gradient-positions: _radial-positions-parser($gradient-positions); + } + @return $gradient-positions; +} diff --git a/Safa- Levi/Day2/scss/bourbon/helpers/_is-num.scss b/Safa- Levi/Day2/scss/bourbon/helpers/_is-num.scss new file mode 100644 index 0000000..71459e1 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/helpers/_is-num.scss @@ -0,0 +1,8 @@ +//************************************************************************// +// Helper for linear-gradient-parser +//************************************************************************// +@function _is-num($char) { + $values: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9; + $index: index($values, $char); + @return if($index, true, false); +} diff --git a/Safa- Levi/Day2/scss/bourbon/helpers/_linear-angle-parser.scss b/Safa- Levi/Day2/scss/bourbon/helpers/_linear-angle-parser.scss new file mode 100644 index 0000000..e0401ed --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/helpers/_linear-angle-parser.scss @@ -0,0 +1,25 @@ +// Private function for linear-gradient-parser +@function _linear-angle-parser($image, $first-val, $prefix, $suffix) { + $offset: null; + $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); + $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); + + @if ($unit-long == "grad") or + ($unit-long == "turn") { + $offset: if($unit-long == "grad", -100grad * 3, -0.75turn); + } + + @else if ($unit-short == "deg") or + ($unit-short == "rad") { + $offset: if($unit-short == "deg", -90 * 3, 1.6rad); + } + + @if $offset { + $num: _str-to-num($first-val); + + @return ( + webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, + spec-image: $image + ); + } +} diff --git a/Safa- Levi/Day2/scss/bourbon/helpers/_linear-gradient-parser.scss b/Safa- Levi/Day2/scss/bourbon/helpers/_linear-gradient-parser.scss new file mode 100644 index 0000000..12bcdcd --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/helpers/_linear-gradient-parser.scss @@ -0,0 +1,41 @@ +@function _linear-gradient-parser($image) { + $image: unquote($image); + $gradients: (); + $start: str-index($image, "("); + $end: str-index($image, ","); + $first-val: str-slice($image, $start + 1, $end - 1); + + $prefix: str-slice($image, 0, $start); + $suffix: str-slice($image, $end, str-length($image)); + + $has-multiple-vals: str-index($first-val, " "); + $has-single-position: unquote(_position-flipper($first-val) + ""); + $has-angle: _is-num(str-slice($first-val, 0, 0)); + + @if $has-multiple-vals { + $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); + } + + @else if $has-single-position != "" { + $pos: unquote($has-single-position + ""); + + $gradients: ( + webkit-image: -webkit- + $image, + spec-image: $prefix + "to " + $pos + $suffix + ); + } + + @else if $has-angle { + // Rotate degree for webkit + $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); + } + + @else { + $gradients: ( + webkit-image: -webkit- + $image, + spec-image: $image + ); + } + + @return $gradients; +} diff --git a/Safa- Levi/Day2/scss/bourbon/helpers/_linear-positions-parser.scss b/Safa- Levi/Day2/scss/bourbon/helpers/_linear-positions-parser.scss new file mode 100644 index 0000000..d26383e --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/helpers/_linear-positions-parser.scss @@ -0,0 +1,61 @@ +@function _linear-positions-parser($pos) { + $type: type-of(nth($pos, 1)); + $spec: null; + $degree: null; + $side: null; + $corner: null; + $length: length($pos); + // Parse Side and corner positions + @if ($length > 1) { + @if nth($pos, 1) == "to" { // Newer syntax + $side: nth($pos, 2); + + @if $length == 2 { // eg. to top + // Swap for backwards compatability + $degree: _position-flipper(nth($pos, 2)); + } + @else if $length == 3 { // eg. to top left + $corner: nth($pos, 3); + } + } + @else if $length == 2 { // Older syntax ("top left") + $side: _position-flipper(nth($pos, 1)); + $corner: _position-flipper(nth($pos, 2)); + } + + @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + $spec: to $side $corner; + } + @else if $length == 1 { + // Swap for backwards compatability + @if $type == string { + $degree: $pos; + $spec: to _position-flipper($pos); + } + @else { + $degree: -270 - $pos; //rotate the gradient opposite from spec + $spec: $pos; + } + } + $degree: unquote($degree + ","); + $spec: unquote($spec + ","); + @return $degree $spec; +} + +@function _position-flipper($pos) { + @return if($pos == left, right, null) + if($pos == right, left, null) + if($pos == top, bottom, null) + if($pos == bottom, top, null); +} diff --git a/Safa- Levi/Day2/scss/bourbon/helpers/_linear-side-corner-parser.scss b/Safa- Levi/Day2/scss/bourbon/helpers/_linear-side-corner-parser.scss new file mode 100644 index 0000000..86ad88f --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/helpers/_linear-side-corner-parser.scss @@ -0,0 +1,31 @@ +// Private function for linear-gradient-parser +@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { + $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 ); + $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); + $val-3: null; + $has-val-3: str-index($val-2, " "); + + @if $has-val-3 { + $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); + $val-2: str-slice($val-2, 0, $has-val-3 - 1); + } + + $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); + $pos: unquote($pos + ""); + + // Use old spec for webkit + @if $val-1 == "to" { + @return ( + webkit-image: -webkit- + $prefix + $pos + $suffix, + spec-image: $image + ); + } + + // Bring the code up to spec + @else { + @return ( + webkit-image: -webkit- + $image, + spec-image: $prefix + "to " + $pos + $suffix + ); + } +} diff --git a/Safa- Levi/Day2/scss/bourbon/helpers/_radial-arg-parser.scss b/Safa- Levi/Day2/scss/bourbon/helpers/_radial-arg-parser.scss new file mode 100644 index 0000000..a3a3704 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/helpers/_radial-arg-parser.scss @@ -0,0 +1,69 @@ +@function _radial-arg-parser($G1, $G2, $pos, $shape-size) { + @each $value in $G1, $G2 { + $first-val: nth($value, 1); + $pos-type: type-of($first-val); + $spec-at-index: null; + + // Determine if spec was passed to mixin + @if type-of($value) == list { + $spec-at-index: if(index($value, at), index($value, at), false); + } + @if $spec-at-index { + @if $spec-at-index > 1 { + @for $i from 1 through ($spec-at-index - 1) { + $shape-size: $shape-size nth($value, $i); + } + @for $i from ($spec-at-index + 1) through length($value) { + $pos: $pos nth($value, $i); + } + } + @else if $spec-at-index == 1 { + @for $i from ($spec-at-index + 1) through length($value) { + $pos: $pos nth($value, $i); + } + } + $G1: null; + } + + // If not spec calculate correct values + @else { + @if ($pos-type != color) or ($first-val != "transparent") { + @if ($pos-type == number) + or ($first-val == "center") + or ($first-val == "top") + or ($first-val == "right") + or ($first-val == "bottom") + or ($first-val == "left") { + + $pos: $value; + + @if $pos == $G1 { + $G1: null; + } + } + + @else if + ($first-val == "ellipse") + or ($first-val == "circle") + or ($first-val == "closest-side") + or ($first-val == "closest-corner") + or ($first-val == "farthest-side") + or ($first-val == "farthest-corner") + or ($first-val == "contain") + or ($first-val == "cover") { + + $shape-size: $value; + + @if $value == $G1 { + $G1: null; + } + + @else if $value == $G2 { + $G2: null; + } + } + } + } + } + @return $G1, $G2, $pos, $shape-size; +} diff --git a/Safa- Levi/Day2/scss/bourbon/helpers/_radial-gradient-parser.scss b/Safa- Levi/Day2/scss/bourbon/helpers/_radial-gradient-parser.scss new file mode 100644 index 0000000..6dde50f --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/helpers/_radial-gradient-parser.scss @@ -0,0 +1,50 @@ +@function _radial-gradient-parser($image) { + $image: unquote($image); + $gradients: (); + $start: str-index($image, "("); + $end: str-index($image, ","); + $first-val: str-slice($image, $start + 1, $end - 1); + + $prefix: str-slice($image, 0, $start); + $suffix: str-slice($image, $end, str-length($image)); + + $is-spec-syntax: str-index($first-val, "at"); + + @if $is-spec-syntax and $is-spec-syntax > 1 { + $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); + $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); + $pos: append($pos, $keyword, comma); + + $gradients: ( + webkit-image: -webkit- + $prefix + $pos + $suffix, + spec-image: $image + ) + } + + @else if $is-spec-syntax == 1 { + $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); + + $gradients: ( + webkit-image: -webkit- + $prefix + $pos + $suffix, + spec-image: $image + ) + } + + @else if str-index($image, "cover") or str-index($image, "contain") { + @warn "Radial-gradient needs to be updated to conform to latest spec."; + + $gradients: ( + webkit-image: null, + spec-image: $image + ) + } + + @else { + $gradients: ( + webkit-image: -webkit- + $image, + spec-image: $image + ) + } + + @return $gradients; +} diff --git a/Safa- Levi/Day2/scss/bourbon/helpers/_radial-positions-parser.scss b/Safa- Levi/Day2/scss/bourbon/helpers/_radial-positions-parser.scss new file mode 100644 index 0000000..6a5b477 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/helpers/_radial-positions-parser.scss @@ -0,0 +1,18 @@ +@function _radial-positions-parser($gradient-pos) { + $shape-size: nth($gradient-pos, 1); + $pos: nth($gradient-pos, 2); + $shape-size-spec: _shape-size-stripper($shape-size); + + $pre-spec: unquote(if($pos, "#{$pos}, ", null)) + unquote(if($shape-size, "#{$shape-size},", null)); + $pos-spec: if($pos, "at #{$pos}", null); + + $spec: "#{$shape-size-spec} #{$pos-spec}"; + + // Add comma + @if ($spec != ' ') { + $spec: "#{$spec}," + } + + @return $pre-spec $spec; +} diff --git a/Safa- Levi/Day2/scss/bourbon/helpers/_render-gradients.scss b/Safa- Levi/Day2/scss/bourbon/helpers/_render-gradients.scss new file mode 100644 index 0000000..5765676 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/helpers/_render-gradients.scss @@ -0,0 +1,26 @@ +// User for linear and radial gradients within background-image or border-image properties + +@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { + $pre-spec: null; + $spec: null; + $vendor-gradients: null; + @if $gradient-type == linear { + @if $gradient-positions { + $pre-spec: nth($gradient-positions, 1); + $spec: nth($gradient-positions, 2); + } + } + @else if $gradient-type == radial { + $pre-spec: nth($gradient-positions, 1); + $spec: nth($gradient-positions, 2); + } + + @if $vendor { + $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); + } + @else if $vendor == false { + $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; + $vendor-gradients: unquote($vendor-gradients); + } + @return $vendor-gradients; +} diff --git a/Safa- Levi/Day2/scss/bourbon/helpers/_shape-size-stripper.scss b/Safa- Levi/Day2/scss/bourbon/helpers/_shape-size-stripper.scss new file mode 100644 index 0000000..ee5eda4 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/helpers/_shape-size-stripper.scss @@ -0,0 +1,10 @@ +@function _shape-size-stripper($shape-size) { + $shape-size-spec: null; + @each $value in $shape-size { + @if ($value == "cover") or ($value == "contain") { + $value: null; + } + $shape-size-spec: "#{$shape-size-spec} #{$value}"; + } + @return $shape-size-spec; +} diff --git a/Safa- Levi/Day2/scss/bourbon/helpers/_str-to-num.scss b/Safa- Levi/Day2/scss/bourbon/helpers/_str-to-num.scss new file mode 100644 index 0000000..b3d6168 --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/helpers/_str-to-num.scss @@ -0,0 +1,50 @@ +//************************************************************************// +// Helper function for linear/radial-gradient-parsers. +// Source: http://sassmeister.com/gist/9647408 +//************************************************************************// +@function _str-to-num($string) { + // Matrices + $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; + $numbers: 0 1 2 3 4 5 6 7 8 9; + + // Result + $result: 0; + $divider: 0; + $minus: false; + + // Looping through all characters + @for $i from 1 through str-length($string) { + $character: str-slice($string, $i, $i); + $index: index($strings, $character); + + @if $character == '-' { + $minus: true; + } + + @else if $character == '.' { + $divider: 1; + } + + @else { + @if not $index { + $result: if($minus, $result * -1, $result); + @return _convert-units($result, str-slice($string, $i)); + } + + $number: nth($numbers, $index); + + @if $divider == 0 { + $result: $result * 10; + } + + @else { + // Move the decimal dot to the left + $divider: $divider * 10; + $number: $number / $divider; + } + + $result: $result + $number; + } + } + @return if($minus, $result * -1, $result); +} diff --git a/Safa- Levi/Day2/scss/bourbon/settings/_asset-pipeline.scss b/Safa- Levi/Day2/scss/bourbon/settings/_asset-pipeline.scss new file mode 100644 index 0000000..d481a6a --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/settings/_asset-pipeline.scss @@ -0,0 +1 @@ +$asset-pipeline: false !default; diff --git a/Safa- Levi/Day2/scss/bourbon/settings/_prefixer.scss b/Safa- Levi/Day2/scss/bourbon/settings/_prefixer.scss new file mode 100644 index 0000000..ecab49f --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/settings/_prefixer.scss @@ -0,0 +1,6 @@ +// Variable settings for /addons/prefixer.scss +$prefix-for-webkit: true !default; +$prefix-for-mozilla: true !default; +$prefix-for-microsoft: true !default; +$prefix-for-opera: true !default; +$prefix-for-spec: true !default; // required for keyframe mixin diff --git a/Safa- Levi/Day2/scss/bourbon/settings/_px-to-em.scss b/Safa- Levi/Day2/scss/bourbon/settings/_px-to-em.scss new file mode 100644 index 0000000..f2f9a3e --- /dev/null +++ b/Safa- Levi/Day2/scss/bourbon/settings/_px-to-em.scss @@ -0,0 +1 @@ +$em-base: 16px !default; diff --git a/Safa- Levi/day1/README.md b/Safa- Levi/day1/README.md new file mode 100644 index 0000000..c58b775 --- /dev/null +++ b/Safa- Levi/day1/README.md @@ -0,0 +1,28 @@ +#Responsive and Assets + +1- Implemented **Responsive Grid System** and **Flexbox** was used for modules. + +Flexbox Notes: Flexbox was added only to the `.modal_album` module. As for IE, even if flexbox does not work, page will display original order of items. + + + +2- **Media Queries** 3 breakpoints were made with mobile-first media queries. + +- The mobile default shows items in a single column at full width +- The middle breakpoint shows items in 2 columns +- The large layout has a mix of 3 and 2 column sections + +3- **Responsive Images** + +- Replaced the "Find" buttons with icons using Ico-moon. +- Set the backround image to an SVG. This doesn't have real benefit in this context but we got experience toying around with SVG data code and DUI data. +- All images are set to a percantage based width for responsiveness in space + +4- **Modernizr** Modernizr was added to use a fallback png for the background svg. This is for IE8. + + + + + +##### *Added a separate stylesheet for all media queries* + diff --git a/Safa- Levi/day1/css/fonts.css b/Safa- Levi/day1/css/fonts.css new file mode 100644 index 0000000..5b3152a --- /dev/null +++ b/Safa- Levi/day1/css/fonts.css @@ -0,0 +1,39 @@ +/******* ico-font ********/ + +@font-face { + font-family: 'ico-fonts'; + src:url('fonts/ico-fonts.eot?-8sfmks'); + src:url('fonts/ico-fonts.eot?#iefix-8sfmks') format('embedded-opentype'), + url('fonts/ico-fonts.woff?-8sfmks') format('woff'), + url('fonts/ico-fonts.ttf?-8sfmks') format('truetype'), + url('fonts/ico-fonts.svg?-8sfmks#ico-fonts') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + font-family: 'ico-fonts'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-pushpin:before { + content: "\e600"; +} +.icon-binoculars:before { + content: "\e601"; +} +.icon-search:before { + content: "\e602"; +} + + + diff --git a/Safa- Levi/day1/css/fonts/ico-fonts.ttf b/Safa- Levi/day1/css/fonts/ico-fonts.ttf new file mode 100755 index 0000000..96cd842 Binary files /dev/null and b/Safa- Levi/day1/css/fonts/ico-fonts.ttf differ diff --git a/Safa- Levi/day1/css/fonts/ico-fonts.woff b/Safa- Levi/day1/css/fonts/ico-fonts.woff new file mode 100755 index 0000000..8be0022 Binary files /dev/null and b/Safa- Levi/day1/css/fonts/ico-fonts.woff differ diff --git a/Safa- Levi/day1/css/layout.css b/Safa- Levi/day1/css/layout.css new file mode 100644 index 0000000..81e578e --- /dev/null +++ b/Safa- Levi/day1/css/layout.css @@ -0,0 +1,100 @@ + +/*********** BORDER BOX SIZING *************/ + +html { + box-sizing: border-box; +} +*, *:before, *:after { + box-sizing: inherit; +} + + +/******** RESPONSIVE GRID SYSTEM ********/ + +/******** 3 COL SECTIONS ********/ + +/* SECTIONS */ +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* COLUMN SETUP */ +.col { + display: block; + float:left; + margin: 1% 0 1% 4%; +} +.col:first-child { margin-left: 0; } + + +/* GROUPING */ +.group:before, +.group:after { + content:""; + display:table; +} +.group:after { + clear:both; +} +.group { + zoom:1; /* For IE 6/7 */ +} + + +/* GRID OF THREE */ +.span_3_of_3 { + width: 100%; +} +.span_2_of_3 { + width: 100%; +} +.span_1_of_3 { + width: 100%; +} + + + +/******** 2 COL SECTIONS ********/ + +/* SECTIONS */ +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* COLUMN SETUP */ +.col { + display: block; + float:left; + margin: 1% 0 1% 4%; +} +.col:first-child { margin-left: 0; } + + +/* GROUPING */ +.group:before, +.group:after { + content:""; + display:table; +} +.group:after { + clear:both; +} +.group { + zoom:1; /* For IE 6/7 */ +} + + +/* GRID OF TWO */ +.span_2_of_2 { + width: 100%; +} +.span_1_of_2 { + width: 100%; +} + + + diff --git a/Safa- Levi/day1/css/media-queries.css b/Safa- Levi/day1/css/media-queries.css new file mode 100644 index 0000000..8fa93aa --- /dev/null +++ b/Safa- Levi/day1/css/media-queries.css @@ -0,0 +1,60 @@ +/*********** MEDIA QUERIES *************/ + +/* GO FULL WIDTH AT LESS THAN 850 PIXELS */ + + +@media only screen and (min-width: 551px) and (max-width: 850px) { + .col { + margin: 1% 0 1% 4%; + } +} + +@media only screen and (min-width: 551px) and (max-width: 850px) { + .modal-album-2col { + margin: 0; + } + .span_2_of_2 { + width: 100%; + } + .span_1_of_2 { + width: 48%; + } + .span_3_of_3 { + width: 100%; + } + .span_2_of_3 { + width: 100%; + } + .span_1_of_3 { + width: 48%; + } +} + + +@media only screen and (min-width: 851px) { + .col { + margin: 1% 0 1% 4%; + } +} + +@media only screen and (min-width: 851px) { + .modal-album-2col { + margin: 0 20%; + } + .span_2_of_2 { + width: 100%; + } + .span_1_of_2 { + width: 48%; + } + .span_3_of_3 { + width: 100%; + } + .span_2_of_3 { + width: 65.33%; + } + .span_1_of_3 { + width: 30.66%; +} +} + diff --git a/Safa- Levi/day1/css/modules.css b/Safa- Levi/day1/css/modules.css new file mode 100644 index 0000000..d0145c4 --- /dev/null +++ b/Safa- Levi/day1/css/modules.css @@ -0,0 +1,57 @@ + +/*********** ALBUM MODULE *************/ + +.modal-album { + padding: 0 3%; + display: flex; + flex-direction: column; + align-items: center; +} + +.modal-album-2col { + display: flex; + flex-direction: column; + align-items: center; +} + +.modal-album p { + color: white; +} + +.modal-album img { + width: 100%; +} + + + +/*********** CAPTION MODULES *************/ + +.caption-default { + border: 3px solid gray; + color: white; + text-align: center; + word-wrap: normal; + background: -moz-linear-gradient(-45deg, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); + background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); + background: -webkit-linear-gradient(-45deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); + background: -o-linear-gradient(-45deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); + background: -ms-linear-gradient(-45deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); + background: linear-gradient(135deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=1 ); + font-family: 'Raleway', sans-serif; + opacity: .75; +} + + + +/*********** FIND MODULE *************/ + + +.icon-search { + text-decoration: none; + background-color: transparent; + border: none; + font-size: 2em; + color: white; +} + diff --git a/Safa- Levi/day1/css/normalize.min.css b/Safa- Levi/day1/css/normalize.min.css new file mode 100644 index 0000000..08f8950 --- /dev/null +++ b/Safa- Levi/day1/css/normalize.min.css @@ -0,0 +1,425 @@ +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/Safa- Levi/day1/css/test.scss.haml b/Safa- Levi/day1/css/test.scss.haml new file mode 100644 index 0000000..ce7da04 --- /dev/null +++ b/Safa- Levi/day1/css/test.scss.haml @@ -0,0 +1,3 @@ +p { + color: blue; +} diff --git a/Safa- Levi/day1/imgs/Kanye.jpg b/Safa- Levi/day1/imgs/Kanye.jpg new file mode 100644 index 0000000..2fdc2ea Binary files /dev/null and b/Safa- Levi/day1/imgs/Kanye.jpg differ diff --git a/Safa- Levi/day1/imgs/background.png b/Safa- Levi/day1/imgs/background.png new file mode 100644 index 0000000..6041f32 Binary files /dev/null and b/Safa- Levi/day1/imgs/background.png differ diff --git a/Safa- Levi/day1/imgs/background.svg b/Safa- Levi/day1/imgs/background.svg new file mode 100644 index 0000000..9c3186b --- /dev/null +++ b/Safa- Levi/day1/imgs/background.svg @@ -0,0 +1,4531 @@ + + + + + + diff --git a/Safa- Levi/day1/imgs/depeche.jpg b/Safa- Levi/day1/imgs/depeche.jpg new file mode 100644 index 0000000..6db6d53 Binary files /dev/null and b/Safa- Levi/day1/imgs/depeche.jpg differ diff --git a/Safa- Levi/day1/imgs/flo-rida.jpg b/Safa- Levi/day1/imgs/flo-rida.jpg new file mode 100644 index 0000000..4f6fc57 Binary files /dev/null and b/Safa- Levi/day1/imgs/flo-rida.jpg differ diff --git a/Safa- Levi/day1/imgs/freddie-gibs.jpg b/Safa- Levi/day1/imgs/freddie-gibs.jpg new file mode 100644 index 0000000..ac21ed0 Binary files /dev/null and b/Safa- Levi/day1/imgs/freddie-gibs.jpg differ diff --git a/Safa- Levi/day1/imgs/psy.jpg b/Safa- Levi/day1/imgs/psy.jpg new file mode 100644 index 0000000..06992ed Binary files /dev/null and b/Safa- Levi/day1/imgs/psy.jpg differ diff --git a/Safa- Levi/day1/imgs/run.jpg b/Safa- Levi/day1/imgs/run.jpg new file mode 100644 index 0000000..52eddc2 Binary files /dev/null and b/Safa- Levi/day1/imgs/run.jpg differ diff --git a/Safa- Levi/day1/imgs/spell.jpg b/Safa- Levi/day1/imgs/spell.jpg new file mode 100644 index 0000000..d1dee32 Binary files /dev/null and b/Safa- Levi/day1/imgs/spell.jpg differ diff --git a/Safa- Levi/day1/imgs/sublime.jpg b/Safa- Levi/day1/imgs/sublime.jpg new file mode 100644 index 0000000..0d32b93 Binary files /dev/null and b/Safa- Levi/day1/imgs/sublime.jpg differ diff --git a/Safa- Levi/day1/imgs/sunny.jpg b/Safa- Levi/day1/imgs/sunny.jpg new file mode 100644 index 0000000..4f33030 Binary files /dev/null and b/Safa- Levi/day1/imgs/sunny.jpg differ diff --git a/Safa- Levi/day1/imgs/wild.jpg b/Safa- Levi/day1/imgs/wild.jpg new file mode 100644 index 0000000..c482e4c Binary files /dev/null and b/Safa- Levi/day1/imgs/wild.jpg differ diff --git a/Safa- Levi/day1/index.html b/Safa- Levi/day1/index.html new file mode 100644 index 0000000..b7fb09a --- /dev/null +++ b/Safa- Levi/day1/index.html @@ -0,0 +1,148 @@ + + + + + + + + + + + + + + + Top Albums + + +
+

Team Florida's Current Music Picks

+

Henok's Top Five Of The Moment

+
+ + + +
+
+
+ Run The Jewels 2 +
Run The Jewels - Run The Jewels 2
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.

+ +
+ +
+
+ Black Moon Spell +
King Tuff - Black Moon Spell
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor. +

+ +
+ +
+
+ Pinata +
Freddie Gibbs & Madlib - Pinata
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor. +

+ +
+
+ + + +
+
+
+
+ Present Tense +
Wild Beasts - Present Tense
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor. +

+ +
+
+ +
+
+
+ Sunny +
Hippie Sabotage - Sunny
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor. +

+ +
+
+
+ + + +

Casey's Five Picks Of The Moment

+ +
+
+
+ Sublime +
Sublime - Sublime
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor. +

+ +
+ +
+
+ Hangover +
PSY & Snoop - Hangover
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor. +

+ +
+ +
+
+ Mercy +
Kanye West - Mercy
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor. +

+ +
+
+ + + +
+
+
+
+ Enjoy The Silence +
Depeche Mode - Enjoy The Silence
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor. +

+ +
+
+ +
+
+
+ Wild Ones +
Flo Rida - Wild Ones
+
+

class=ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor. +

+ +
+
+
+ + diff --git a/Safa- Levi/day1/js/Modernizr 2.8.3 (Custom Build) | no-svg b/Safa- Levi/day1/js/Modernizr 2.8.3 (Custom Build) | no-svg new file mode 100644 index 0000000..96c727b --- /dev/null +++ b/Safa- Levi/day1/js/Modernizr 2.8.3 (Custom Build) | no-svg @@ -0,0 +1,4 @@ +/* Modernizr 2.8.3 (Custom Build) | MIT & BSD + * Build: http://modernizr.com/download/#-svg-shiv-cssclasses-load + */ +;window.Modernizr=function(a,b,c){function v(a){j.cssText=a}function w(a,b){return v(prefixes.join(a+";")+(b||""))}function x(a,b){return typeof a===b}function y(a,b){return!!~(""+a).indexOf(b)}function z(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:x(f,"function")?f.bind(d||b):f}return!1}var d="2.8.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m={svg:"http://www.w3.org/2000/svg"},n={},o={},p={},q=[],r=q.slice,s,t={}.hasOwnProperty,u;!x(t,"undefined")&&!x(t.call,"undefined")?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e}),n.svg=function(){return!!b.createElementNS&&!!b.createElementNS(m.svg,"svg").createSVGRect};for(var A in n)u(n,A)&&(s=A.toLowerCase(),e[s]=n[A](),q.push((e[s]?"":"no-")+s));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)u(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},v(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f + + + Kenyon Institute + + + +
+ +
+
+

Main Introduction

+

Lorem ipsum dolor sit amet, + consectetur adipiscing elit. Maecenas in mi urna. + Phasellus rhoncus tempor velit, vitae finibus felis. + Vestibulum tempor justo ante, a tincidunt purus + dignissim eu. Quisque maximus ut lorem suscipit + molestie. Nullam interdum ante et maximus varius. + Cum sociis natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. Proin interdum tellus + tortor, sit amet placerat lectus gravida quis.

+
+
+
+

Programs

+
+

Sample Header

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Maecenas in mi urna. Phasellus rhoncus tempor + velit, vitae finibus felis. Read More...

+ +
+ + + + + +
+ +
+
+

Sample Header

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Maecenas in mi urna. Phasellus rhoncus tempor + velit, vitae finibus felis. Read More...

+ +
+ + + + +
+ +
+
+

Sample Header

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Maecenas in mi urna. Phasellus rhoncus tempor + velit, vitae finibus felis. Read More...

+ +
+ + + + +
+ +
+
+
+
+ + + +
+
+
+

Feature and Speakers

+
+ +
Professor Name
+

Professor Title and Department

+
+
+ +
Professor Name
+

Professor Title and Department

+
+
+ +
Professor Name
+

Professor Title and Department

+
+
+ +
Professor Name
+

Professor Title and Department

+
+
+
+ + + diff --git a/readme.md b/readme.md deleted file mode 100644 index fea380b..0000000 --- a/readme.md +++ /dev/null @@ -1,71 +0,0 @@ -# UXE - Sass 101 - -- Getting through this week we will be 100% using Sass. CSS is now dead to us. To make this transition, you need to complete the following tasks: - - Get Sass installed, either the Ruby or C version. - - Be able to run Sass and process to CSS - - Choose a project that we will start converting to Sass - - Review all exercises [http://coderecipez.roughdraft.io/](http://coderecipez.roughdraft.io/) - -- To turn in this assignment: - - Clone the repo and place project you will convert to Sass inside - - -## Submitting assignments - -Submitting assignments for this course will require leveraging some of the more advanced features of Github. These features will not only improve your knowledge of Git and Github, but also provide practice exercises for working on a distributed project with a large team. - -## How to submit an assignment - -In order to submit assignments, please use the following steps - -1. [Fork this repo][1] so that you have a working version -1. [Clone the forked repo][2] to your local computer -1. Create a folder named with your name, example `dale-sande` -1. Once completed with your assignment, commit code to the master branch and push to Github `git push origin master` -1. From __your fork__ of the project, initiate a pull request to the parent repo - -## Assignment review - -When a pull request is initiated, I will be notified of the update and comment on the submitted assignment via Github tools. - -## Keeping your local repo up to date -Your local repo will be an independent version of the original repo from the moment you fork the repo. In order to keep your local repo up to date with the original repo, you need to do what is called an [upstream pull][3]. - -To manage an upstream pull, I suggest updating your `.bash_profile` and your `.gitconfig` file with easy to remember aliases. - -### .bash_profile - -In your `.bash_profile` add the following alias - -``` -alias upstream="git remote add upstream \$@" -``` - -From the command line you simply need to refer to the alias and add the path to the upstream repo as shown in the following example. - -``` -$ upstream https://github.com/blackfalcon/unicorn-class-css-section.git -``` - -Once the upstream repo is configured for your local repo, this never needs to be reset again, unless you delete your local repo. - -### .gitconfig -In your `.gitconfig` add the following alias - -``` -[alias] - pu = !"git fetch origin -v; git fetch upstream -v; git merge upstream/master" -``` - -From the command line, within the project repo, enter the following command to pull latest code from the upstream master. - -``` -git pu -``` - - - - -[1]:https://help.github.com/articles/fork-a-repo -[2]:https://help.github.com/articles/fork-a-repo#step-2-clone-your-fork -[3]:https://help.github.com/articles/syncing-a-fork