react-awesome-paginate/dist/index.css.map

React awesome paginate is a modern, typescript based pagination component. You can use it in your project.

{"version":3,"sources":["Pagination.css"],"names":[],"mappings":"AAAA,mCACE,kBAAmB,CACnB,YAAa,CACb,cAAe,CACf,sBAAuB,CACvB,iBACF,CAEA,+BACE,YAAa,CACb,cACF,CAEA,gCAIE,eAAgB,CAChB,WAAA,CAJA,cAAe,CACf,cAAe,CACf,oCAGF,CAEA,qDACE,wBACF,CAEA,yCACE,kBAAmB,CACnB,UACF,CAEA,uCACE,wBAAyB,CACzB,oBAAqB,CACrB,UACF,CAEA,6CACE,wBAAyB,CACzB,oBACF,CAEA,sCAKE,eAAgB,CAChB,WAAA,CAJA,aAAc,CACd,cAAe,CACf,gBAAiB,CAHjB,iBAMF,CAOA,oFACE,OACF,CAEA,yCACE,qBAAsB,CACtB,qBAAsB,CACtB,gBACF,CAOA,sFACE,OACF,CAEA,0CACE,qBAAsB,CACtB,qBAAsB,CACtB,iBAAkB,CAKlB,cAAe,CAJf,WAAY,CAEZ,eAAgB,CAChB,cAAe,CAEf,sBAAuB,CAEvB,oBAAsB,CADtB,kBAAmB,CALnB,UAOF,CAOA,oFACE,OACF,CAEA,yCAGE,aAAc,CADd,eAAiB,CAEjB,SAAU,CAHV,gBAIF,CAEA,+CAEE,aAAc,CADd,eAAiB,CAEjB,SACF,CAGA,yCACE,qBAAsB,CACtB,qBAAsB,CACtB,gBACF,CAEA,+CACE,qBACF","file":"index.css","sourcesContent":[".react-awesome-paginate__container {\r\n  align-items: center;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n  margin-top: 1.5rem\r\n}\r\n\r\n.react-awesome-paginate__pages {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.react-awesome-paginate__button {\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n  transition: background-color .2s ease;\r\n  background: none;\r\n  border: none\r\n}\r\n\r\n.react-awesome-paginate__button:hover:not(:disabled) {\r\n  background-color: #f0f0f0\r\n}\r\n\r\n.react-awesome-paginate__button:disabled {\r\n  cursor: not-allowed;\r\n  opacity: .5\r\n}\r\n\r\n.react-awesome-paginate__button.active {\r\n  background-color: #007bff;\r\n  border-color: #007bff;\r\n  color: #fff\r\n}\r\n\r\n.react-awesome-paginate__button.active:hover {\r\n  background-color: #054d99;\r\n  border-color: #007bff;\r\n}\r\n\r\n.react-awesome-paginate__more__button {\r\n  text-align: center;\r\n  color: #7e7d7d;\r\n  font-size: 14px;\r\n  padding: 6px 12px;\r\n  background: none;\r\n  border: none\r\n}\r\n\r\n/* Default theme styles */\r\n.react-awesome-paginate__default__container {\r\n  gap: 8px;\r\n}\r\n\r\n.react-awesome-paginate__default__pages {\r\n  gap: 8px;\r\n}\r\n\r\n.react-awesome-paginate__default__button {\r\n  background-color: #fff;\r\n  border: 1px solid #ccc;\r\n  padding: 6px 12px;\r\n}\r\n\r\n/* Circle theme styles */\r\n.react-awesome-paginate__circular__container {\r\n  gap: 8px;\r\n}\r\n\r\n.react-awesome-paginate__circular__pages {\r\n  gap: 8px;\r\n}\r\n\r\n.react-awesome-paginate__circular__button {\r\n  background-color: #fff;\r\n  border: 1px solid #ccc;\r\n  border-radius: 50%;\r\n  height: 40px;\r\n  width: 40px;\r\n  min-height: 34px;\r\n  min-width: 34px;\r\n  font-size: 12px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  transition: width 0.2s;\r\n}\r\n\r\n/* Classic theme styles */\r\n.react-awesome-paginate__classic__container {\r\n  gap: 8px;\r\n}\r\n\r\n.react-awesome-paginate__classic__pages {\r\n  gap: 8px;\r\n}\r\n\r\n.react-awesome-paginate__classic__button {\r\n  padding: 6px 12px;\r\n  font-weight: bold;\r\n  color: #007bff;\r\n  font: 16px;\r\n}\r\n\r\n.react-awesome-paginate__classic__more__button {\r\n  font-weight: bold;\r\n  color: #007bff;\r\n  font: 16px;\r\n}\r\n\r\n/* Compact theme styles */\r\n.react-awesome-paginate__compact__button {\r\n  background-color: #fff;\r\n  border: 1px solid #ccc;\r\n  padding: 6px 12px;\r\n}\r\n\r\n.react-awesome-paginate__compact__more__button {\r\n  border: 1px solid #ccc;\r\n}"]}