Proyecto en colaboración con OPASO

materials.css 1.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. /* Authors : Carlos C. Corrada-Bravo
  2. David J. Ortiz-Rivera
  3. Organization : Centro de Desarrollo y Consultoria Computacional
  4. Project : OPASO Material Registry
  5. File : materials.css
  6. Description : Styling for materials page */
  7. .download{
  8. margin-right: 0px;
  9. }
  10. td[value=mat_name]{
  11. cursor: pointer;
  12. }
  13. td[value=cas]{
  14. max-width: 250px;
  15. }
  16. .material-data-icon-wrapper{
  17. width: 100%;
  18. cursor: pointer;
  19. text-align: right;
  20. padding: 15px 15px 0px;
  21. }
  22. .material-data-shader{
  23. top: 0;
  24. left: 0;
  25. z-index: 5;
  26. width: 100%;
  27. height: 100%;
  28. position: absolute;
  29. will-change: transform;
  30. transform: translateX(-100%);
  31. background-color: rgba(0,0,0,0);
  32. transition: all 0.25s ease-in-out;
  33. }
  34. .material-data-wrapper{
  35. left: 0;
  36. top: 0px;
  37. width: 300px;
  38. height: 100%;
  39. background-color: #fff;
  40. border-right: 1px solid rgb(52,53,54);
  41. }
  42. .material-data-row,.material-name-wrapper{
  43. width: 100%;
  44. padding: 5px 15px;
  45. display: inline-block;
  46. word-break: break-all;
  47. border-bottom: 0.5px solid rgb(52,53,54);
  48. }
  49. .material-data-row{
  50. padding-left: 30px;
  51. }
  52. .material-name-wrapper{
  53. border-bottom: 1px solid rgb(52,53,54);
  54. }
  55. .material-data-header{
  56. margin-bottom: 7.5px;
  57. }
  58. .material-data-sub-header{
  59. width: initial;
  60. color: #060606;
  61. }
  62. .material-data-text-wrapper{
  63. width: 100%;
  64. padding-left: 15px;
  65. display: inline-block;
  66. }
  67. .material-data-text{
  68. float: right;
  69. color: #060606;
  70. }
  71. .material-name{
  72. float: left;
  73. color: #060606;
  74. width: initial;
  75. display: inline-block;
  76. }
  77. .hide-material-data-icon{
  78. color: darkgray;
  79. }
  80. .slide-right{
  81. transform: translateX(0%);
  82. transition: transform 0.25s ease-in-out;
  83. }
  84. @media screen and (max-width: 991px){
  85. .download{
  86. margin-bottom: 0px;
  87. }
  88. .material-data-shader{
  89. z-index: 9999;
  90. }
  91. .material-data-wrapper{
  92. top: 0px;
  93. width: 90%;
  94. height: 100%;
  95. }
  96. }