{"version":3,"file":"drawer_v1.css","mappings":";;;AAEA,QAIC,uBADA,YAEA,eAEA,OAAM,CADN,MAJA,WADA,WAMA,CAEA,uBACC,qBCWD,QAAO,CDVN,eCQD,MDNkB,CCIlB,kBAGA,ODPkB,CCKlB,KDLkB,CAGlB,uBAIC,kBEmEO,CFtEP,aACA,sBAGA,WAEA,mCACC,8CAGD,mCACC,+CAGD,sCACC,+CAGD,sCACC,8CAGD,uBACC,GACC,wBAED,GACC,4BAIF,sBACC,GACC,2BAED,GACC,yBAIF,uBACC,GACC,WAED,GACC,aAKF,qCAGC,mBACA,gBACA,gCAJA,aAKA,iBAJA,8BAKA,gBGbF,mBHiBE,kDACC,uBACA,SACA,eACA,iBACA,UAEA,6DACC,aEFG,CFGH,iBAKH,qCAEC,SADA,kBAEA,WAKD,8BAMC,YADA,gBAJA,kBAEA,QADA,MAEA,iBAEA,CIhGA,yBJsGA,8BAEC,eADA,UACA,EInGD,8CJiGA,8BAEC,eADA,UACA,EAMF,6BAGC,YADA,eADA,UAEA,CAGD,6BACC","sources":["webpack://@studyportals/drawer-dll/@studyportals/drawer/drawer.scss","webpack://@studyportals/drawer-dll/@studyportals/drawer/node_modules/@studyportals/styles-abstracts/mixins/_layout.scss","webpack://@studyportals/drawer-dll/@studyportals/drawer/node_modules/@studyportals/styles-abstracts/variables/_colors.scss","webpack://@studyportals/drawer-dll/@studyportals/drawer/node_modules/@studyportals/styles-abstracts/mixins/_spacing.scss","webpack://@studyportals/drawer-dll/@studyportals/drawer/node_modules/@studyportals/styles-abstracts/mixins/_responsive.scss"],"sourcesContent":["@import '~@studyportals/styles-abstracts/abstracts.scss';\n\n.Drawer {\n\tz-index: $PentHouse;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: transparent;\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\n\t> .DrawerOverlay {\n\t\tbackground: rgba(49, 50, 51, 0.7);\n\t\tcursor: pointer;\n\n\t\t@include overlay(0);\n\t}\n\n\t> .DrawerWrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\tbackground: $GreyLL;\n\t\twidth: 100%;\n\n\t\t&--is-opening {\n\t\t\tanimation: openDrawer 0.4s ease-in-out forwards;\n\t\t}\n\n\t\t&--is-closing {\n\t\t\tanimation: closeDrawer 0.4s ease-in-out forwards;\n\t\t}\n\n\t\t&--full-to-right {\n\t\t\tanimation: fullToRight 0.4s ease-in-out forwards;\n\t\t}\n\n\t\t&--right-to-full {\n\t\t\tanimation: openDrawer 0.4s ease-in-out forwards;\n\t\t}\n\n\t\t@keyframes closeDrawer {\n\t\t\t0% {\n\t\t\t\ttransform: translateX(0);\n\t\t\t}\n\t\t\t100% {\n\t\t\t\ttransform: translateX(100%);\n\t\t\t}\n\t\t}\n\n\t\t@keyframes openDrawer {\n\t\t\t0% {\n\t\t\t\ttransform: translateX(100%);\n\t\t\t}\n\t\t\t100% {\n\t\t\t\ttransform: translateX(0);\n\t\t\t}\n\t\t}\n\n\t\t@keyframes fullToRight {\n\t\t\t0% {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t\t100% {\n\t\t\t\twidth: 384px;\n\t\t\t}\n\t\t}\n\n\n\t\t> .DrawerHeader {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: space-between;\n\t\t\talign-items: center;\n\t\t\tbackground: white;\n\t\t\tborder-bottom: 1px solid $GreyL;\n\t\t\tfont-size: 1.7rem;\n\t\t\tmin-height: 3rem;\n\n\t\t\t@include PaddingAreas(0.5, 1);\n\n\t\t\t> .CloseButton {\n\t\t\t\tbackground-color: transparent;\n\t\t\t\tborder: 0;\n\t\t\t\tcursor: pointer;\n\t\t\t\tmargin-left: auto;\n\t\t\t\tpadding: 0;\n\n\t\t\t\t> .CloseIcon {\n\t\t\t\t\tcolor: $GreyD;\n\t\t\t\t\tfont-size: 2.6rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t> .DrawerFooter {\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t&--right {\n\t\t> .DrawerWrapper {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\twidth: fit-content;\n\t\t\tmin-width: 384px;\n\t\t\theight: 100%;\n\t\t}\n\t}\n\n\t@include Breakpoint(Small, Medium) {\n\t\t&--right {\n\t\t\t> .DrawerWrapper {\n\t\t\t\twidth: 100%;\n\t\t\t\tmin-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t&--full {\n\t\t> .DrawerWrapper {\n\t\t\twidth: 100%;\n\t\t\tmin-width: 100%;\n\t\t\theight: 100%;\n\t\t}\n\n\t\t> .DrawerOverlay {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n","@mixin Clearfix(){\r\n\t&::before, &::after{\r\n\t\tcontent: '';\r\n\t\tdisplay: block;\r\n\t}\r\n\r\n\t&::after{\r\n\t\tclear: both;\r\n\t}\r\n}\r\n\r\n@mixin CenterElement{\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%, -50%);\r\n}\r\n\r\n@mixin overlay($Padding){\r\n\tposition: absolute;\r\n\ttop: $Padding;\r\n\tleft: $Padding;\r\n\tright: $Padding;\r\n\tbottom: $Padding;\r\n}","/* Grey palette */\r\n$Grey-900: #181818;\r\n$Grey-800: #404040;\r\n$Grey-700: #606061;\r\n$Grey-600: #808080;\r\n$Grey-500: #A3A3A3;\r\n$Grey-400: #C0C1C2;\r\n$Grey-300: #D8D9DB;\r\n$Grey-200: #E0E1E3;\r\n$Grey-100: #F0F1F3;\r\n\r\n$White: #FFFFFF;\r\n\r\n/* Orange palette */\r\n$Orange-900: #C63414;\r\n$Orange-800: #D1421A;\r\n$Orange-700: #D9481F;\r\n$Orange-600: #E25524;\r\n$Orange-500: #F95C39;\r\n$Orange-400: #FB7C59;\r\n$Orange-300: #FB8F71;\r\n$Orange-200: #FC9E85;\r\n$Orange-100: #FBA693;\r\n\r\n/* Blue palette */\r\n$Blue-900: #10438E;\r\n$Blue-800: #1250A8;\r\n$Blue-700: #125BC9;\r\n$Blue-600: #2072E1;\r\n$Blue-500: #5AA3F4;\r\n$Blue-400: #7BB7F7;\r\n$Blue-300: #9DCCFA;\r\n$Blue-200: #BFDEFD;\r\n$Blue-100: #E1F0FF;\r\n\r\n/* Red palette */\r\n$Red-900: #8B0000;\r\n$Red-800: #A10A0A;\r\n$Red-700: #B71C1C;\r\n$Red-600: #C62828;\r\n$Red-500: #D32F2F;\r\n$Red-400: #E53935;\r\n$Red-300: #EF5350;\r\n$Red-200: #EF9A9A;\r\n$Red-100: #FFCDD2;\r\n\r\n/* Green palette */\r\n$Green-900: #1E8558;\r\n$Green-800: #229E66;\r\n$Green-700: #28B177;\r\n$Green-600: #2DC589;\r\n$Green-500: #33D9A0;\r\n$Green-400: #66E2B7;\r\n$Green-300: #99EBCE;\r\n$Green-200: #D2E7DE;\r\n$Green-100: #EDF5F2;\r\n\r\n/* Yellow palette */\r\n$Yellow-900: #FFAA00;\r\n$Yellow-800: #FFB733;\r\n$Yellow-700: #FFC34D;\r\n$Yellow-600: #FFD166;\r\n$Yellow-500: #FFE080;\r\n$Yellow-400: #FFE799;\r\n$Yellow-300: #FFEEB3;\r\n$Yellow-200: #FEE7C0;\r\n$Yellow-100: #FEF7E9;\r\n\r\n\r\n\r\n\r\n/*\r\n\t\tDeprecated color palette\r\n*/\r\n\r\n/* Primary palette. */\r\n$BrandOrange: #F95C39;\r\n$BrandOrangeD: #CC4C2F;\r\n$BrandOrangeL: #FEDED7;\r\n\r\n$BrandBlue: #247BA0;\r\n$BrandBlueD: #1B5A75;\r\n$BrandBlueL: #4B93B1;\r\n\r\n/* Grey palette. */\r\n$GreyDD: #05293C;\r\n$GreyD: #3F5C6E;\r\n$Grey: #547A92;\r\n$GreyL: #B8C6CE;\r\n$GreyLL: #EDF3F6;\r\n$GreyLLL: #F5F9FA;\r\n\r\n/* Secondary palette. */\r\n$Red: #E64632;\r\n$RedL: #FFA79A;\r\n$RedLL: #FADAD6;\r\n\r\n$Green: #1E8558;\r\n$GreenL: #D2E7DE;\r\n$GreenLL: #EDF5F2;\r\n\r\n$Yellow: #FFAA00;\r\n$YellowL: #FEE7C0;\r\n$YellowLL: #FEF7E9;\r\n","/**\r\n * Get the areas values in rems based on the four dimensions.\r\n * The minimum amount of parameters is one and the maximum is four,\r\n * and they correspond with dimensions similarly as how they do\r\n * for the margin and padding css rules in general.\r\n * @param {list} $Args [0]\r\n * @return {number | list}\r\n */\r\n@function GetAreas($Args...){\r\n\r\n\t$Areas: '';\r\n\r\n\t@if (length($Args) == 5){\r\n\r\n\t\t@error 'You have too many arguments in spacing areas.';\r\n\t}\r\n\r\n\t@each $Value in $Args{\r\n\r\n\t\t@if(\r\n\t\t\t$Value != 0 and\r\n\t\t\t$Value != 0.25 and\r\n\t\t\t$Value != 0.5 and\r\n\t\t\t$Value != 1 and\r\n\t\t\t$Value != 1.5 and\r\n\t\t\t$Value != 2 and\r\n\t\t\t$Value != 3 and\r\n\t\t\t$Value != 4 and\r\n\t\t\t$Value != 5 and\r\n\t\t\t$Value != 7\r\n\t\t){\r\n\r\n\t\t\t@error \"#{$Value} is an invalid parameter.\";\r\n\t\t} @else if($Value == 0){\r\n\r\n\t\t\t$Areas: JoinString($Areas, 0);\r\n\t\t} @else{\r\n\r\n\t\t\t$Areas: JoinString($Areas, $Value, 'rem');\r\n\t\t}\r\n\t}\r\n\r\n\t@return unquote($Areas);\r\n}\r\n\r\n@function JoinString($ExistingAreas, $NewArea, $Append: ''){\r\n\r\n\t@return  $ExistingAreas + ' ' + $NewArea + $Append;\r\n}\r\n\r\n/**\r\n * @param {list} $args [0]\r\n */\r\n@mixin MarginAreas($Args...){\r\n\r\n\tmargin: GetAreas($Args...);\r\n}\r\n\r\n/**\r\n * @param {list} $args [0]\r\n */\r\n@mixin PaddingAreas($Args...){\r\n\r\n\tpadding: GetAreas($Args...);\r\n}\r\n","/**\r\n * Apply the content that is between the brackets of the mixin usage only for the\r\n * breakpoint(s) that are included in the arguments.\r\n * @param {...String} $Arguments\r\n */\r\n\r\n@mixin Breakpoint($Arguments...){\r\n\r\n\t@each $Parameter in $Arguments{\r\n\t\t/* 480px / 16px = 30rem */\r\n\t\t@if $Parameter == Small {\r\n\r\n\t\t\t@media #{all} and (max-width: 480px) { @content; }\r\n\t\t}\r\n\t\t\t/* 481px / 16px = 30.063rem and 768px / 16px = 48rem */\r\n\t\t@else if $Parameter == Medium{\r\n\r\n\t\t\t@media #{all} and (min-width: 481px) and (max-width: 768px) { @content; }\r\n\t\t}\r\n\t\t\t/* 769px / 16px = 48.063rem and 1024px / 16px = 64rem */\r\n\t\t@else if $Parameter == Large{\r\n\r\n\t\t\t@media #{all} and (min-width: 769px) and (max-width: 1024px) { @content; }\r\n\t\t}\r\n\t\t\t/* 1025px / 16px = 64.0625rem */\r\n\t\t@else if $Parameter == ExtraLarge{\r\n\r\n\t\t\t@media #{all} and (min-width: 1025px) { @content; }\r\n\t\t}\r\n\t\t@else{\r\n\r\n\t\t\t@error 'Please use a valid breakpoint!';\r\n\t\t}\r\n\t}\r\n}"],"names":[],"sourceRoot":""}