{"_id":"@ashetm/sass-mixins-responsive","_rev":"4-7a23483d33990e0b53437a4e7985313a","time":{"created":"2023-02-01T21:00:35.997Z","1.0.0":"2023-01-31T13:51:00.868Z","modified":"2023-02-05T18:00:49.283Z","1.0.1":"2023-02-01T21:00:36.219Z","1.0.2":"2023-02-05T18:00:49.206Z"},"name":"@ashetm/sass-mixins-responsive","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.1":{"name":"@ashetm/sass-mixins-responsive","version":"1.0.1","description":"Take what you need!","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/AsheTM/sass-mixins-responsive.git"},"private":false,"keywords":["css","media","mediaqueries","mediaquery","mixin","mixins","responsive","sass","scss","util","utilities","utility"],"author":{"name":"Haitham DAWOUD","email":"contact@ashetm.com","url":"https://ashetm.com"},"license":"ISC","bugs":{"url":"https://github.com/AsheTM/sass-mixins-responsive/issues"},"homepage":"https://github.com/AsheTM/sass-mixins-responsive#readme","gitHead":"a17f906467764553d09a1a59860c86bb06ba8d43","_id":"@ashetm/sass-mixins-responsive@1.0.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-7hgPNuRUV3mfr9XEDQJM9P05myyPSEHXkjFd92mMCo7Eu+vAAw6LznAF13+8Sv3uMLXxg/AWAGi+l4+oFFyuDg==","shasum":"d047b6286bbdf5105156d3cb557e73f4f7aeacca","tarball":"https://registry.npmjs.org/@ashetm/sass-mixins-responsive/-/sass-mixins-responsive-1.0.1.tgz","fileCount":4,"unpackedSize":6921,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAO+tAQL9vqeppEoZ2ycKtx72EsYiRCUaR2VGCTnWpepAiEA2VA4CQ3glkMswUEAXvoKU2X5Hd/1kUrejgu0PUzBImo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2tL0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeiQ/+JpA+lgrbIW7KcUUIcxWbs13wm6cPphZOeexPh+dVOwr8aHDN\r\ndQEBoSVviGpqkcaKAG7c75pS8s8StlDt8cx0USrDb6wXbu5vawwfCDI1y5hi\r\nEb55CpP7hqzVpJLe41qDiccroz3AIoritrPnjhQF7t9/nRbVNeUbFUDl32p/\r\nHLZtRPb06s4mC6IehAsyp1BT2YjHY/HYvX4WIiEhGqKJhlknFJXA2wmnWA8s\r\nmNNhjgylcgtZ1WkZEuFgUPIPETczVWVTx+twTD8AWIOt+Nqnum9vCCZoJZYP\r\nu1sfXxxYRq8Asyy1MxlCrqwCnC+laqe1N8HeBLPfGdOPiz1GUwuhrVk86Vp4\r\nOJeg7UkMYT34VXI9wGAj3NVc55cetV7+E6Y0oIiAVdWU86V++iiYXPI4ZNbJ\r\nrNKtgbcM5sogGHymZPqu0ftBZuyB3O342h4m3IE541D5afvG9u3rKu1jVYYh\r\nD+MX4ocB27RVbI7GdudGoyYZo8v/jgfQSqsS+eSEeWHaH0suE18Euu2H1rGI\r\nD1o+/PsczXJYZe/niFeU/NP4jVThUgVfSCUg3i5S4+OYst/vx8Wm1Wo/puGe\r\nx38hbnPAuDA5zvOV7A7v/lbnUrmrXnjNElAo5f78PgqP/maQAUhnDL6kN95z\r\nNKDvo1+Yro38O7vztt3gB+osLrmu62awwKM=\r\n=/Fqj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ashetm","email":"haithemalidaoud@gmail.com"},"directories":{},"maintainers":[{"name":"ashetm","email":"haithemalidaoud@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sass-mixins-responsive_1.0.1_1675285236070_0.11998177391452725"},"_hasShrinkwrap":false},"1.0.2":{"name":"@ashetm/sass-mixins-responsive","version":"1.0.2","description":"Some responsive utilities Sass mixins for your needs. Take what you need!","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/AsheTM/sass-mixins-responsive.git"},"private":false,"keywords":["css","media","mediaqueries","mediaquery","mixin","mixins","responsive","sass","scss","util","utilities","utility"],"author":{"name":"Haitham DAWOUD","email":"contact@ashetm.com","url":"https://ashetm.com"},"license":"ISC","bugs":{"url":"https://github.com/AsheTM/sass-mixins-responsive/issues"},"homepage":"https://github.com/AsheTM/sass-mixins-responsive#readme","gitHead":"256c925625bdee10cb10b03ec3d7a68531ec1665","_id":"@ashetm/sass-mixins-responsive@1.0.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-OpZ79S5CSI+26LlLWVj+c4C2Ff98r+1mw/a3QeDHkBPMUWpPMRNMGGSHf/UNluwFE5lAlxlE1B3HrkhdobtLXQ==","shasum":"8fc8a942d306c1f164e182ff95006f2166e84e57","tarball":"https://registry.npmjs.org/@ashetm/sass-mixins-responsive/-/sass-mixins-responsive-1.0.2.tgz","fileCount":4,"unpackedSize":7201,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFWKkIYQNxd3f5K5FkveXR0QXzUjhi/c0GMKen81u7pgIhAL94U71IvcLU24UKBZnx033Q8vGYwOd1BKgibHllLNon"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3+7RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJqQ//UQ4kMXAhF5iQ3JSMTPmDyzrAs6VTgkgxKCKJbSnuLSoOUQkF\r\n0krwfMzO65d6PIl+qrb5w5uPQU2O+5uENuKgGQSHdHzDdrZH/y0RsCykKVBy\r\nQpzWS3iOQihMsZQ7YEAwQpzYQwhWymiIt37kpXhWxig9FcGG14EFv+ZGjp3e\r\nQouyhy+GDFIbi7UmDdwVXA0k8yKR1SvFSMZC2AAtMcMAdiN6HFLuoPn+yKIW\r\nzmsxMqTjrr37MAqufLY7EF75wA/NmJkeib74R0OxShYuTE0r3jKKI8HBWZ3i\r\nyb65ykKwLQwkkArTbooDUTv9GWkRmX5tJ2oeurt7XMYxEm8W1gu8n5A0wyau\r\nSQPghGM08LSCuN0gJVwNNPP156vwPbDClHuFjEvHNh5PUfccAlmUFaM2vcQv\r\nPlj5IxbqB0/Db48tDO2JyPnHjsylq3a3cECoZQireWxTcUnyH7pFoFYeJk0A\r\n875knHR05yqqlvKyYYCKxcaW1Z+nOsCcr2izCRqfa0OwnpdYG3iJ+d2WSwCx\r\ndQr9Nr907HrT4/CvbA1qQ2iznCxNW8rhRne1MsV+y6tLEVHyoDzlQzsBVoVQ\r\nF1jDr2toHk6eIj+FBzGj/fYqqxJ6IuR5x2FQ82ylhiSMsebxTOmINY9nljUJ\r\nVocCkjRysv08wUGZAJBIMWoAUhxWtAToGjw=\r\n=Rdvk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ashetm","email":"haithemalidaoud@gmail.com"},"directories":{},"maintainers":[{"name":"ashetm","email":"haithemalidaoud@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sass-mixins-responsive_1.0.2_1675620049061_0.7722649793958434"},"_hasShrinkwrap":false}},"maintainers":[{"name":"ashetm","email":"haithemalidaoud@gmail.com"}],"description":"Some responsive utilities Sass mixins for your needs. Take what you need!","homepage":"https://github.com/AsheTM/sass-mixins-responsive#readme","keywords":["css","media","mediaqueries","mediaquery","mixin","mixins","responsive","sass","scss","util","utilities","utility"],"repository":{"type":"git","url":"git+https://github.com/AsheTM/sass-mixins-responsive.git"},"author":{"name":"Haitham DAWOUD","email":"contact@ashetm.com","url":"https://ashetm.com"},"bugs":{"url":"https://github.com/AsheTM/sass-mixins-responsive/issues"},"license":"ISC","readme":"\r\n# @ashetm/sass-mixins-responsive\r\n\r\nSome responsive utilities Sass mixins for your needs. Take what you need!\r\n\r\n## Install\r\n\r\nYou can install it with npm:\r\n\r\n```bash\r\nnpm install @ashetm/sass-mixins-responsive\r\n```\r\n\r\n## Import\r\n\r\nYou only need to import ``@ashetm/sass-mixins-responsive``.\r\n\r\n```scss\r\n@import '@ashetm/sass-mixins-responsive';\r\n```\r\n\r\nor, if you want to override the breakpoint value(s)\r\n\r\n```scss\r\n@use '@ashetm/sass-mixins-responsive' as *;\r\n\r\n$breakpoint-mobile: 500px;\r\n$breakpoint-tablet: 800px;\r\n$breakpoint-laptop: 1000px;\r\n```\r\n\r\n## Usage\r\n\r\n### Variables\r\n\r\nThere is 3 variables that can be overriden: \r\n\r\n* ``$breakpoint-mobile`` with default value ``612px``\r\n* ``$breakpoint-tablet`` with default value ``912px``\r\n* ``$breakpoint-laptop`` with no default value\r\n\r\n### Mixins\r\n\r\n#### for-mobile\r\n\r\nExample: \r\n\r\n```scss\r\n.selector {\r\n  @include for-mobile {\r\n    width: 100%;\r\n  }\r\n}\r\n```\r\n\r\ngives in output: \r\n\r\n```css\r\n@media all and (min-width: <$breakpoint-mobile: 612px>) {\r\n  .selector {\r\n    width: 100%;\r\n  }\r\n}\r\n```\r\n\r\n#### for-tablet\r\n\r\nExample: \r\n\r\n```scss\r\n.selector {\r\n  @include for-tablet {\r\n    width: 100%;\r\n  }\r\n}\r\n```\r\n\r\ngives in output: \r\n\r\n```css\r\n@media all and (min-width: <$breakpoint-mobile + 1: 613px>) and (max-width: <$breakpoint-tablet: 912px>) {\r\n  .selector {\r\n    width: 100%;\r\n  }\r\n}\r\n```\r\n\r\n#### for-laptop\r\n\r\nExample: \r\n\r\n```scss\r\n.selector {\r\n  @include for-laptop {\r\n    width: 100%;\r\n  }\r\n}\r\n```\r\n\r\ngives in output: \r\n\r\n```css\r\n/* If ``$breakpoint-laptop`` is given */\r\n@media all and (min-width: <$breakpoint-tablet + 1: 913px>) and (max-width: <$breakpoint-laptop: 912px>) {\r\n  .selector {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n/* If ``$breakpoint-laptop`` is not given */\r\n@media all and (min-width: <$breakpoint-tablet + 1: 913px>) {\r\n  .selector {\r\n    width: 100%;\r\n  }\r\n}\r\n```\r\n\r\n#### for-huge-screen\r\n\r\n**NB:** If ``$breakpoint-laptop`` is given, this mixin will be available otherwise it will throw an error.\r\n\r\nExample: \r\n\r\n```scss\r\n.selector {\r\n  @include for-huge-screen {\r\n    width: 100%;\r\n  }\r\n}\r\n```\r\n\r\ngives in output: \r\n\r\n```css\r\n/* If ``$breakpoint-laptop`` is given */\r\n@media all and (min-width: <$breakpoint-laptop + 1>) {\r\n  .selector {\r\n    width: 100%;\r\n  }\r\n}\r\n```\r\n\r\n#### at-least\r\n\r\nExample: \r\n\r\n```scss\r\n.selector {\r\n  @include at-least(<$value>, <$device: screen>) {\r\n    width: 100%;\r\n  }\r\n}\r\n```\r\n\r\ngives in output: \r\n\r\n```css\r\n@media <$device: screen> and (min-width: <$value>) {\r\n  .selector {\r\n    width: 100%;\r\n  }\r\n}\r\n```\r\n\r\n\r\n#### between\r\n\r\nExample: \r\n\r\n```scss\r\n.selector {\r\n  @include between(<$min>, <$max>, <$device: screen>) {\r\n    width: 100%;\r\n  }\r\n}\r\n```\r\n\r\ngives in output: \r\n\r\n```css\r\n@media <$device: screen> and (min-width: <$min>) and (max-width: <$max>) {\r\n  .selector {\r\n    width: 100%;\r\n  }\r\n}\r\n```\r\n\r\n#### at-most\r\n\r\nExample: \r\n\r\n```scss\r\n.selector {\r\n  @include at-most(<$value>, <$device: screen>) {\r\n    width: 100%;\r\n  }\r\n}\r\n```\r\n\r\ngives in output: \r\n\r\n```css\r\n@media <$device: screen> and (max-width: <$value>) {\r\n  .selector {\r\n    width: 100%;\r\n  }\r\n}\r\n```\r\n","readmeFilename":"README.md"}